Start a new topic
Discussions Cohost Cohost Feature Requests

CSS Stylesheets in Chosts

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">):

  • It’s already not too rare to see people go through the effort of using a custom post style in their chosts. (I guess kinda like a forum signature or tumblr page theme?) For that use case, it would be nice not to have to copy-paste the same HTML boilerplate and find the insertion point over and over again, and instead reuse just a single stylesheet. It’d also be nice to be able to easily share posting themes
  • I think it would make that kind of chosting more accessible! In addition to being able to share themes, most CSS tutorials assume CSS files instead of inline styles, and inline styles are rather difficult to write manually either way.
  • For more complex CSS posts, it’s sometimes useful to be able to query @supports, @media prefers-reduced-motion, or similar conditional rendering. Though things like @media min-width wouldn’t be very useful inside a post, container queries would allow having responsive post layouts in the future…
  • custom fonts and sibling selector crimes :3

Additional notes:
  • As far as I can tell, out of the ways I’ve tried, the best way to implement this is by scoping the stylesheet code, i.e. rewriting the CSS selectors to be scoped to within a particular element (or to that element in the case of :root), and renaming all animations, fonts, etc. so they don’t collide. (Alternatively, using the shadow DOM would be easier to implement, but it’s buggy in several browsers and requires Javascript. Also, things like @import etc. would still have to be filtered out anyway)
  • I think given the amount of things you can already do in posts, there probably isn’t much additional concern for abuse to be had…?
  • some or all of these features could be cohost plus! exclusive probably

ok that is all have a nice day

41 people like this idea
7 CommentsSorted by Oldest First
Putting a unique css class on every post, and then making every CSS rule have
```css
div.thatUniqueClass myRule {
}
```
Would probably work pretty well to avoid anything you might insert in a `<style>` tag breaking free and causing havoc. That, and the already present list of things that are allowed to be in the `style=` property in the first place.

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

1 person likes this

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?

1 person likes this
Agree completely with the epilepsy concerns. Injecting an !important animation time zero for anyone with prefers reduced motion should hopefully be enough for that on the css end as well as disallowing !important for the choster, but i might be being naive here. Either way this would not stop people from posting aura inducing gifs.

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.

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

1 person likes this

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 > "?

Login or Signup to post a comment
More topics in Cohost Feature Requests
See all 728 topics