Chris Coyier on

Real-World Usage of content-visibility

Jeremey Keith uses the little-used CSS property content-visibility to improve the performance on a fairly heavy page. It works a treat. I did a before-and-after check with pagespeed insights on the page for Out On The Ocean. The “style and layout” part of the main thread work went down considerably. Total blocking time went from more than 600 […]

Chris Coyier on

Syntax Highlighting with no spans?!

When I think of showing off syntax highlighted code on the web, I think of code that takes in a string of code, finds relevant substrings (tokens) with elaborate RegExes, then wraps them in <span>s with classes to that color can be applied to those classes. This is quite literally how it works. The really […]

Chris Coyier on

Scroll-Locked Dialogs

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]

Šime Vidas on

How to fix the invisible scrollbar issue in iOS browsers

The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible. On […]

Chris Coyier on

A Scroll-Driven Animation… with a Duration

Ryan Mulligan digs into a Jhey Tompkins Pen and discovers a neat little trick involving two @keyframe animations. The first is a “trigger” animation that triggers when a certain element comes into view, and flips a –trigger custom property. Via a Style Query, that triggers the actual animation. Why bother? Scroll-driven animation durations are, well… […]

Chris Coyier on

Fading Out Text with Mask

If you’re going to fade out some text, I’m gonna call it and say the best way, while also being the easiest, is using a mask. Kilian Valkhof covered this recently, rejecting the idea of an overlay gradient, and also offering the idea of using background-clip. But mask is the clear winner. Let’s get that […]

Chris Coyier on

Progressively Enhanced Form Validation

Here’s a thing you’re sure to do in your web developer career: add form validation to a form. You can’t leave that name field blank! That doesn’t look like an email address! That quantity is too high! Forms are a part of the beating heart of the web, and especially important to business. You can’t […]