Kilian Valkhof
796 FOLLOWERS
Hello! I'm Kilian Valkhof, a front-end developer, user-experience designer and generalist. That means I also do back-end, visual design, marketing and DevOps if needed. I build tools for developers, designers and other people that work on the web to make them more effective, efficient and to let them have more fun. I often write about the things I built or explain the way I look at topics..
Kilian Valkhof
3d ago
Yesterday on Mastodon we had a short discussion about the (terribly named) overflow media feature. Because it has the same name as a CSS property it’s easy to think it has more power than it really does. Underlying that is the issue that your page can’t change the value of a media feature: media features say something about the medium: the device, browser or user preferences.
Media features
When I’m talking about media features, I mean the bit between parenthesis in a media query, like (min-width: 600px). It checks if the available width in the browser is at least 600 pixels wide and if so, it ..read more
Kilian Valkhof
11M ago
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. Here's what they tweeted:
Everyone is exited about CSS Nesting but are you ready for it? Answer the below quiz ?
What would be the result of the following code (without cheating! ?)
“`
body {
@media all {
background: red;
}
background: blue;
}
“`
No spoil in the comments!#CSS
— T. Afif @ CSS Challenges (@ChallengesCss) June 13, 2023
Take a ..read more
Kilian Valkhof
1y ago
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-element 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 first encountered this issue with ::backdrop: Backdrop doesn't inherit from anywhere but after a recent rendering engine update to Polypane I noticed that all my custom selection colors (also powered by CSS custom properties) suddenly st ..read more
Kilian Valkhof
1y ago
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.
When you have a piece of business logic, frequently that depends on a a certain value being true. An if statement:
if ( status === 'active' ) { … }
This is easy to parse for me and I can quickly see what it does. What often ends up happening though is that the business logic gets a second possibility, for example status being active or status being trialing:
if ( status === 'active' || status === 'trialing') { … }
This is still relatively easy to read but there’s ..read more
Kilian Valkhof
1y ago
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.
For some reason, the color of the backdrop wasn't what I expected, even though devtools picked up the right css var being set. It was just that the CSS var was not define. This puzzled me because it was clearly defined earlier in the C ..read more
Kilian Valkhof
1y ago
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!
You can find the episode and show notes here: Supper Club × Polypane with Kilian Valkhof. Fingers crossed someone can help me and Scott out with my “Sick Pick” ;)
The post I was on the Syntax.fm podcast to talk about Polypane first appeared on Kilian Valkhof ..read more
Kilian Valkhof
1y ago
Sometimes we want something to be true so badly, we ignore all the red flags. I had only spoken at this big of a conference once, and that was mostly by accident. So when my CFP got accepted to Modern Frontends, I was elated. A huge conference, in London, surrounded by amazing speakers.
As you’ve probably read elsewhere by now, that feeling obviously didn’t stay with me.
Still, I’ve pondered writing an article of my own. The run-up to the conference was full of red flags that I could write up that would’ve been somewhat interesting as a cautionary tale.
My interactions with the organiser, a wo ..read more
Kilian Valkhof
1y ago
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?
Before diving into clip, lets quickly go over what overflow does and what it's other values do.
A quick refresher on overflow
The overflow property lets you control how content that overflows a block element should be displayed. It had four different values:
visible: The default value: any content that overflows is visibly rend ..read more
Kilian Valkhof
1y ago
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.
What makes a number input useful?
By telling the browser that you only want numbers, it can improve the user experience for you. Firstly, they display a spinbox (up and down buttons, sometimes also called a rocker):
<input type="number" />
Secondly they let you use built-in validation logic like input.checkValidity(), and that will mak ..read more
Kilian Valkhof
2y ago
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.
We go into what each of the media queries does and what you should change for them, but we also go over why you make those changes. It was nice to be able to take the time exploring the impact of some changes and the effect that they have. Streams with Alex are always sup ..read more