CSS Subscribe to CSS RSS feed

Opening: treating scroll as “time” When you build scroll-based animations, you eventually hit this thought: “What if scroll were not just an input event” “but a proper timeline?” Scroll-Driven Animation is that idea made explicit. Instead of treating scroll as a trigger, you treat it as the timeline itself. In this post, I group implementation strategies into three families: Native CSS Scroll-Driven Animation IntersectionObserver for state changes scroll + requestAnimationFrame with manual progress mapping For each one, we will cover the principle, strengths, tradeoffs, and accessibility concerns. The code samples here are minimal and correct by themselves, and each section ends with a link to a live demo you can poke at directly. ...

When we’re deciding whether to adopt a new feature, we usually look at a support table. We check caniuse, see what percentage of cells are green, and once it clears 90%, we think “okay, we can use this now.” But there’s a question the support table never answers: Can you use it with a keyboard? Does a screen reader read it correctly? Those are two different questions. There’s a bigger gap than you’d expect between a browser implementing a feature and that feature actually handling accessibility. Some features quietly replace accessibility code we used to hand-write; others open up brand-new traps. ...

I had clearly written a dark gray into my CSS. color: #595959. On a white background that color has a contrast of 6.4:1, which comfortably clears the accessibility bar of 4.5:1. Pass. Then I ran an accessibility checker, and a red line appeared. This text has a contrast of 4.04:1, which is insufficient. Expected ratio: 4.5:1. I put in a color that measures 6.4:1, so why is it calling it 4:1? Was the checker wrong? ...

Some people set their screen to maximum contrast. Yellow text on black, white text on blue, that sort of thing. For low-vision users this is the difference between being able to read the text and not; people with migraines or light sensitivity go the other way, using a muted, low-contrast palette. They have one thing in common — the user decides the colors. And the moment they do, a good chunk of the colors we wrote in CSS get ignored. ...

I turned on dark mode and my eyes hurt more. The background was black but the text was a heavy gray, so the contrast was far too low; links were still the default blue (#0000ff), which stung. Images blazed alone against the dark screen. One button was the same color as its background, so it was simply invisible. It said “dark mode supported.” But it was dark mode by color inversion, nothing more. ...

Introduction “We used red and green to distinguish them, so it should be fine.” It’s a thought that comes up naturally during development. But more people than you’d expect have difficulty telling those two colors apart. Statistics based on Northern European ancestry suggest that roughly 1 in 12 men and 1 in 200 women have red-green color vision deficiency. The exact ratio varies by region and genetic background, but the fact remains: there are always users who struggle to distinguish red from green. ...