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.
December 2023 update! The specification got updated to say that ::backdrop
inherits from “it’s originating element” (the dialog
in this article). The change has been made it all three browser engines, but currently hasn’t shipped yet. Thanks @Schepp for letting me know.
February 2024 update! The specification update is now live in Polypane 18, Chromium 122, Safari 17.4 and Firefox 120!
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.