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 […]| Kilian Valkhof | Front-end & user experience developer
Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Either because someone points it out to them or because they attach a mouse to their mac which makes scroll bars appear. Often, MacOS hiding scroll bars by default is blamed for| Kilian Valkhof | Front-end & user experience developer
Front-end & user experience developer| kilianvalkhof.com
Recently I needed a way to detect support for a media query in CSS and Javascript. To detect if a browser supports a certain CSS feature, you can use @supports () { ... }, but that doesn’t work for media queries. In this article I’ll show you how you can detect support for media queries […]| Kilian Valkhof | Front-end & user experience developer
Accessibility is not like drowning. I mean it obviously isn’t, but let me explain why I’m comparing the two. Today is Global Accessibility Awareness Day, and there’s something I want to talk about. In stoic philosophy there is a metaphor of the drowning man to explain that no one is perfect, and that virtue is […]| Kilian Valkhof | Front-end & user experience developer
I don’t get to work on a lot of new sites nowadays, but I recently got the opportunity to set one up from scratch. For most sites I built when I was still running an agency, I would use some form of CSS Reset, most often Normalize.css, but I figured that this time round I […]| Kilian Valkhof | Front-end & user experience developer
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 […]| Kilian Valkhof | Front-end & user experience developer
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 on web pages). But just because they're in one place and in the […]| Kilian Valkhof | Front-end & user experience developer
Earlier this month I was implementing a lightbox for devtoolstips.org using . 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.| Kilian Valkhof | Front-end & user experience developer
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 […]| Kilian Valkhof | Front-end & user experience developer