Kilian Valkhof

Building tools that make developers awesome.

The gotchas of CSS Nesting

CSS & HTML, 13 June 2023

I've written before about the problems you can run into with CSS nesting (keep in mind that article uses an older syntax but the point still stands) and the question that @ChallengeCSS tweeted out today made me realize there's actually a few more gotcha's.

:root isn’t global

CSS & HTML, 1 May 2023

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.

A small JavaScript pattern I enjoy using

Javascript, 3 April 2023

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.

I no longer understand prefers-contrast

CSS & HTML, 8 March 2023

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

CSS & HTML, 19 January 2023

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.

Polypane browser for responsive web development and design 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.

FixA11y

Browser extensions that automatically fix accessibility issues.

Trimage

Drag-and-drop lossless compression of PNG and JPG images for web.

Messenger Demo Viewer

Demo your (bot) interactions on Messenger.