yea, exaclty! after posting (seems you can’t edit posts here…) i found where i put the code where i tried various approaches, and scoping does just that: rewriting `.test-class-name { … }` to e.g. `[data-css-scope="UWYpOiFX"] .UWYpOiFX--test-class-name { … }`. and, like, y’know. this is definitely not as transparent as inline styles are currently, and i dunno how far staff are willing to go in supporting this kinda thing, but it’d be neat
honestly the feature i miss the most on cohost right now is internal/external CSS. i was looking forward to adding wacky hover effects and animations to my fursonas, but that pretty much requires being able to use style tags since you can't do any of that with inline CSS as far as i'm aware. i've seen people do a lot of fancy things already and getting a ton of mileage out of the bounce animation, but i think allowing users to customize this stuff even further would really take cohost's custom CSS to the next level.
thinking about how such a feature could be implemented, i assume there's plenty of concerns around how people could abuse it. outside of just ensuring the CSS stays within the post and it doesn't break anything as discussed above, i'm sure there's plenty of people who would want to make the most epilepsy inducing posts possible; then again, they can also do that with the way posts are currently set up, so maybe this feature could come with a way to disable all custom CSS in the options? or an epilepsy warning people could put on their posts?
Not just scrolling and links—layout too. iframes are unaffected by child document layout, so they would make showing posts with correct height impossible. The best you could do to work around it is by using javascript and some kind of resizeobserver postmessage loop that tries its best to match the height—and even if you did that, I’m not sure what would happen if you made a post with some kind of recursive height like 101vh, i.e. a post that is perpetually larger than its iframe container lol
Further, you’d have to duplicate all the inherited css like fonts and element styles in every iframe, and i’m also not sure about the browser performance implications…
sooo I think iframes are more trouble than they’re worth here. And, well, if it’d require javascript anyway, then shadow dom is a similarly easy option that doesn’t have these issues. Given cohost’s Actual Real SSR though, I’d imagine it’s probably desirable to have posts render properly on page load before any javascript is available; hence the suggestion to just rewrite the styles themselves
One option for scoping CSS that comes to mind for me would be to put the whole post in an <iframe>. That might require a little effort to make scrolling and links not behave weirdly, but it seems like a pretty sound solution otherwise.
Wouldn't it be easy to scope the style by prepending "#post-whaterveId ~ div >" to every rule in the local stylesheet? Or cleaner, by adding an id to the "body" turning the above rule simply into "#body-whaterverId > "?
caaaa[…]aaaaat
alright… i’m doing it… this is the (*rather low priority) Feature Request to allow proper CSS stylesheets in chosts.
On a basic level, this would mean something like <style> blocks in the html, but I think some kind of mechanism for sharing styles across multiple posts would also be nice (similar to a <link rel="stylesheet">):
41 people like this idea