A small JavaScript pattern I enjoy using
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.
:root isn’t global
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.
I no longer understand prefers-contrast
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.
::backdrop doesn’t inherit from anywhere
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.
I was on the Syntax.fm podcast to talk about Polypane
Last Friday I went on the Syntax.fm Supper Club podcast to chat with Scott and Wes about everything Polypane. We go pretty deep into some of the features and in hindsight it’s funny how most of it boils down to “I needed this feature so I built it”. I had a great time geeking out about it so thank you Scott and Wes for having me!
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
I develop more software and tools:
Superposition
Use the design system you already have
FromScratch
A cross-platform, simple and smart autosaving scratchpad.
A Messenger Adventure!
Go on a text adventure in Facebook Messenger.
Electron
Newsletter
The latest Electron news, articles, apps and interviews.
Trimage
Drag-and-drop lossless compression of PNG and JPG images for web.
Messenger Demo Viewer
Demo your (bot) interactions on Messenger.