Real-world CSS vs. CSS-in-JS performance comparison

Re:Real-world CSS vs. CSS-in-JS performance comparison by masswerk on Tuesday June 08, 2021 @08:31PM (#27442843)

This is, what `<link rel="alternate stylesheet" href="contrast.css" title="High contrast">`is for. (Using JS, you can switch between default and alternative stylesheets by setting their "disabled" attribute accordingly.) This mechanism also allows a user to (pre)select a stylesheet in the browser.

Sadly, Chrome doesn't support this standard (it has been around for a while and is in HTML4, HTML Living Standard, CSSOM). But you can work around this by JS, see above.

(Edit: It's for things like this that you still want a menu bar for your browser.)

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by lwhi on Wednesday June 09, 2021 @04:24AM (#27445536)

True, but I'm wondering how the CSS in JS users would implement this.

[ Parent | on HN ]

Re:Real-world CSS vs. CSS-in-JS performance comparison by betageek on Wednesday June 09, 2021 @11:02AM (#27448705)

CSS-in-JS alone doesn't give you many tools for that kind of stuff, but if you use something that integrates more design system-style theming it's pretty easy - have a look at https://chakra-ui.com/ and click on the moon icon in the top corner for instant dark mode. Implementing various themes for high-contrast etc. would just be a case of changing the theme.

[ Parent | on HN ]