6 ms·
Imagine you need to implement an alternative stylesheet for people with increased visual needs (e.g. high contrast). How would you go about doing this? -- Ed
by lwhi 5y ago
Imagine you need to implement an alternative stylesheet for people with increased visual needs (e.g. high contrast).
How would you go about doing this?
--
Edit: to the person who downvoted me for asking a question. Classy.
- notoverthere 5y agoSwitch the `<link href="">` value to point to a high contrast stylesheet. Or alternatively, apply a class to the body tag – e.g. `<body class="high-contrast">` – and declare CSS rules accordingly. Specificity should take care of overriding the 'normal' style rules where needed.
- lwhi 5y agoHaving to override styles that have random namespace tokens in the class names (via CSS in JS) is going to be difficult.
- easrng 5y agoI'd use CSS variables for colors and write another stylesheet, using the cascade so I only override the styles I need to.
- deleted 5y ago[deleted]
- masswerk 5y agoThis 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.)
- lwhi 5y agoTrue, but I'm wondering how the CSS in JS users would implement this.
- betageek 5y agoCSS-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/ 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.
- Supermancho 5y agoHN randomly mods posts. Don't assume malice.
- lwhi 5y agoCould you please explain what you mean?
- jfengel 5y agoI think you should assume malice... but reconcile yourself to the fact that there's not much you can do about it. People engage in petty acts of malice on social media because they can get away with it. The best you can hope for is to forget about it. It's unsatisfying, but less unsatisfying than trying to get back at them or apply "sour grapes" or whatever. None of that works. The sooner you put your brain on something else, the sooner you'll forget that somebody was a dick to you and got away with it. It sucks, but it's the least worst alternative. Treat it as noise -- which I think is what the OP was trying to say.
- lwhi 5y agoI agree re. the assumption; and also the resolution. I also think it's worth calling it out too though.
- Supermancho 5y agoNew posts get down modded randomly for whatever reason (iirc it was to disrupt some bot karma farming). Wait a day and the post will almost always be back to to the default (1) + any user mods.
- acdha 5y agoYou can specify alternative style sheets and even get some standard browser UI: https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative... I’ve implemented that two ways: having JavaScript pop the alternative attribute off for all but the desired style sheet or simply using a top-level class to modify the relatively few things we were customizing. Back in the day, I used SCSS but CSS Variables have matured to the point where you can do an awful lot that way, too.