CSS in 2026 Alpha Function, Grid Lanes, and What Happened at CSS Day

The CSS Revolution Continues

CSS is evolving faster than ever. In the past week alone, we've seen game-changing proposals, a brand-new layout guide from WebKit, and a vibrant community conference. Let's break down the most important updates you need to know.

1. The alpha() Function: Finally, a Clean Way to Adjust Opacity

Have you ever struggled to change the opacity of a color stored in a CSS variable? You're not alone. The new alpha() function solves this elegantly.

The Old Way (Painful):

--color: oklch(0.65 0.23 230);
/* To change opacity, you had to repeat the full color function */
color: oklch(from var(--color) l c h / 0.5);

The New Way (Clean):

--color: oklch(0.65 0.23 230);
color: alpha(from var(--color) / 0.5);

The alpha() function doesn't care about the underlying color format. It simply extracts the alpha channel and lets you override it. This means:

• Shorter, more readable code.
• No need to hard-code color values in variables.
• Better intention communication: you're only modifying opacity.

2. WebKit's Field Guide to Grid Lanes (Masonry Layout)

WebKit released a comprehensive guide to Grid Lanes — the official CSS masonry layout. Think of it as a native, performant way to create Pinterest-style grids without JavaScript.

Key takeaways:

• Uses grid-template-rows: masonry (or columns).
• Items are placed in a packed layout, filling gaps automatically.
• Fallback to regular grid for browsers that don't support it yet.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry; /* Magic happens here */
}

3. Quality-of-Life Upgrades: closedby and overscroll-behavior

Una Kravets highlighted two small but mighty improvements:

• closedby="any": Closes a dialog when clicking outside or pressing Escape. No more custom JavaScript for light dismiss.
• overscroll-behavior: contain: Prevents scroll chaining. Your modal's scroll won't trigger the background page to scroll.

<dialog closedby="any" style="overscroll-behavior: contain;">
  <p>This modal stays put!</p>
</dialog>

Note: closedby isn't supported in Safari yet, but overscroll-behavior is widely available.

4. CSS Day 2026: What Went Down

CSS Day in Amsterdam was packed with insights. Recordings will be available in late June, but here's what we know:

• @function is coming — Jane Ori's walkthrough made it accessible.
• No flamethrowers this year, but plenty of DOOM references (the game, not the end of the world).
• Talks covered everything from container queries to scroll-driven animations.

5. CSS Wordle: The Game That's Taking Over

Sunkanmi Fafowora created CSS Wordle — a daily puzzle where you guess CSS properties. It's addictive, educational, and a great way to test your knowledge.

6. New Baseline Features

Chrome 149 brought several features to Baseline (cross-browser stable):

• Gap decorations (lines between grid gaps)
• image-rendering: crisp-edges (pixel-perfect scaling)
• rect() and xywh() for shape-outside

Limitations & Caveats

• alpha() is still in the proposal stage; not yet implemented in any browser.
• Grid Lanes (masonry) is only in WebKit (Safari/Chrome on iOS) — Firefox and Chrome desktop are still working on it.
• closedby lacks Safari support. Always provide a fallback.

Next Steps

• Experiment with alpha() in your preprocessor or via a polyfill.
• Try the Grid Lanes demo to see masonry in action.
• Watch CSS Day recordings when they're released.

Source: CSS-Tricks What's Important #13

Recommended Reading

• Beyond Pixel Perfect: Rethinking Excellence in Modern Web Development
• What's Coming in Python 3.15? A Deep Dive into Alpha 5 Features