Kilian Valkhof

Building tools that make developers awesome.

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?

Comparing CSS Specificity values

CSS & HTML, Javascript, 17 January 2022

CSS Specificity is usually written out as [a,b,c] for ID’s, classes and elements respectively. Even a single ID is more specific than any number of classes or elements, so it’s displayed as an array and can’t really be fitted into a single number. How do you compare two selectors to decide which has the highest specificity?

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.