Kilian Valkhof

Building tools that make developers awesome.

On better browsers: arbitrary media queries and browser UIs

CSS & HTML, 14 September 2022

This morning Kitty Giraudel tweeted about an imaginary media query that would indicate right- or left-handedness and it made me imagine a future where sites can register support for one or more media features through a browser API, and the browser would offer these options in the UI.

Do you know about overflow: clip?

CSS & HTML, 11 August 2022

You probably know overflow: hidden, overflow: scroll and overflow: auto, but do you know overflow: clip? It's a relatively new value for the overflow property, and with Safari 16 being released later this year all evergreen browsers will support it. So what does it do?

Are you sure that’s a number input?

Accessibility, CSS & HTML, 28 June 2022

We've had inputs with the number type broadly available in browsers for about 8 years now. These inputs show a little rocker and can be used for, you guessed it, numerical input. But not every input that contains numbers should have an input type number.

Digging Deep into Media Queries with Alex Trost of Frontend.horse

CSS & HTML, 4 March 2022

On the Frontend horse Livestream (Which I highly recommend you subscribe to!) I joined Alex Trost to take a look at the Frontend.horse site to add support for the many different user preference media queries that exist now: prefers-color-scheme, prefers-reduced-motion, prefers-reduced-data, prefers-contrast and forced-colors.

Preventing smooth scrolling with JavaScript

CSS & HTML, Javascript, 31 January 2022

With scroll-behavior: smooth in your CSS you can tell browsers to animate scrolling to different parts of your site, for example when linking to an ID on a page. The javascript scrollTo API has a behavior option that lets you turn on smooth scrolling for one specific scroll regardless of the CSS being set or not.

But what if you want to do the opposite: turn smooth scrolling off for a specific scroll even if it’s turned on in the CSS?

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.

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.