A digital menu displays various chicken items with pricing; includes Deluxe Chicken Club and Shwarma options, highlighting selection choices.

Proximity rule violation as it is.

Did I choose Deluxe Chicken Club or Shwarma?

CSS code demonstrates a transition effect for opacity under specific classes, focusing on easing and initial state settings.

Code sample.

Browser support is around 91%.

As always, you can use @ supports for progressive enhancement.

No JavaScript. No workarounds. Just CSS.

How it works:

Define your element's normal state, add a transition, then use @starting-style to set where it should animate from.

When the element renders, it starts with @starting-style values and transitions to the regular styles.

Before this, you had two options:

1. JavaScript to add classes after render
2. Opacity and visibility hacks

Now you can simply use starting-style.

Illustration shows CSS transition process: starting-style, transition arrow, and final styles, highlighting smooth rendering.

Your CSS transitions work on hover, on click, on everything... except when elements first render.

Here's the fix.

@ starting-style defines the initial state for elements appearing in the DOM. They can now transition smoothly from that state to their final styles.

CSS code snippet using @supports for conditional background image switching based on light and dark mode.

You can use @ supports for progressive enhancement:

One function.
No scattered media queries.
Theme switching without the mess.

Browser support as of April 2026 (might be inaccurate)

• Firefox 150+ ✅ (just went stable)
• Chrome 148+ 🧪 (behind experimental flag)
• Safari ❌ (not yet)

I couldn't even find it on caniuse...

Code snippet displaying CSS styles for class selectors ".one" and ".two," utilizing gradients and mask images.

Here are some examples from the web-platform-tests dashboard.

Data table showing harness status and performance results for various background image properties across different web browsers, with some failures.

It works with:

- url() for images
- linear-gradient() and radial-gradient()
- image-set() for responsive images
- Even masks and other image types

CSS code snippet defines background images for light and dark modes using media queries, with specified URLs for each mode.

For years, switching background images between light and dark mode meant writing this.

Now you can collapse it into one line:

background-image: light-dark(url(light.png), url(dark.png));

Two boxes show a CSS theme adapting to light and dark modes, with differing background images and text colors for each theme.

light-dark() isn't just for colors anymore.

It now handles:

1. Images
2. Gradients
3. Image-sets

And even more.

ATTENTION: this is a super new, experimental feature that is not widely supported.

Haha no problem :D

WE SHOULD REMEMBER OUR HISTORY!

A chart displaying CSS at-rule support across various web browsers, with usage statistics indicating global compatibility around 96.72%.

No more specificity calculations.

Where it matters:

- Managing third-party CSS libraries
- Separating framework styles from custom styles
- Working in large codebases with multiple developers

Browser support is around 96-97%.

A code snippet showing CSS layer declarations for reset, components, and utilities, with specific padding and margin styles defined.

It creates explicit layers in your CSS. Layers have priority order.

Styles in higher-priority layers always win, regardless of specificity.

Define your layers upfront, then assign styles to each layer.

The utilities layer wins over components. Components win over reset.

More specific selectors override less specific ones.

You end up with deeply nested selectors, !important everywhere, or inline styles just to make something work.

@ layer changes this.

Illustrates CSS specificity issues without `@layer` versus controlled order with `@layer`, highlighting component hierarchy and conflicts.

Your CSS specificity wars are over.

@ layer lets you control the cascade without !important hacks.

The problem with CSS: Specificity decides what wins.

Color-coded scrollbars are illustrated with labels showing various colors and styles in a web design context.

Good old days

Code snippet demonstrates CSS `@starting-style` for transitioning background color from transparent to green over 1.5 seconds.

🆕 Animate elements from display: none

CSS `@starting-style` lets you define the initial style for elements entering the page, enabling enter animations without JavaScript.

⋅ Combine with transition
⋅ Works with popover and dialog

Learn more 👇
developer.mozilla.org/en-US/docs/...

A blog post discusses the relevance of the inert HTML attribute, highlighting its ongoing utility in accessibility despite evolving technology.

Good UX 👍

Still a lot to do, but hopefully getting there.

4. corner-shape: squircle on images when supported (with a higher border-radius to make it more prominent)
5. Keeping an eye on text contrast
6. Images generated specifically to demonstrate each property (in the case of highlighting the wine, book, phone, candle, and overall scene)

Cooking the landing page for my CSS book.

The small details that matter:

1. Code samples and results visible right there
2. Tab navigation & focus for better accessibility
3. Showing badges whether the properties work in your browser

hmm, maybe

input:invalid {
caret-color: red;
}

in case of invalid values

Well, we can always check the end result I believe...?

A table displaying browser compatibility and usage for the color-mix() function across various platforms and versions.

The color space matters ☝️

Using oklab gives you perceptually better results. Mixing in sRGB can look worse.

Browser support is around ~92.5%.

One base color.
As many variations as you need.
All calculated in CSS.

A grid displaying color swatches organized by shades and hues, labeled with color names and numeric values.

Where it actually saves time:
- Generating hover/active states automatically
- Building entire color ramps from one base color
- Theming without maintaining dozens of variables

You can generated stuff like this for example.

Code snippet showing a CSS class for button background using color-mix with a specific color and black.

Or you can also create darker versions by mixing with black.

Code snippet shows a CSS class defining a button background using the color-mix function in the oklab color space.

Here how it works:

Blends two colors together in a specific(!) color space.

No more manual color picking or pre preprocessors usage (remember darken/lighten functions?).

For example, creating a lighter variation.

That mixes your brand blue with 20% white. Instant lighter shade.

Three overlapping circles represent color mixtures in the OKLab color space: blue, pink, and green with various combinations labeled.

Your design system has 47 color tokens.

But most of them are just... variations of 3 base colors.

color-mix() in CSS generates all those shades from one source.