Most developers prefer to keep all their CSS custom properties in one place, and a pattern that has emerged in recent years is to put those on :root
, a pseudo-class that targets the topmost element in your document (so that's always <html>
on web pages). But just because they're in one place and in the topmost element, it doesn't mean they're global.
There is a JavaScript pattern that I enjoy using that I don’t see a lot around the web, so I figured it would be worth sharing.
The prefers-contrast
media query indicates whether someone prefers more or less contrast within the boundaries of your sites design. At least, that’s what I thought it meant, and it’s also how macOS seems to implement it with their ‘increase contrast’ accessibility feature. This is in contrast to the forced-colors
media query, which overwrites all your styles.
Earlier this month I was implementing a lightbox for devtoolstips.org using <dialog>
. I'll be writing about that soon but you can find the implementation in that link, it's remarkable how little code you need. While styling, I made use of the CSS custom properties that where already defined in the CSS to style the dialog and it's backdrop. Or so I thought.