The CSS Landscape Is Changing Fast — Here's What You Need to Know
If you've been keeping up with the world of CSS lately, you already know things are moving at a remarkable pace. New features, new functions, and new possibilities are landing in browsers at a rate that can feel genuinely hard to track. That's exactly what the What's !important series is here for — to cut through the noise and bring you the CSS updates that actually matter. In this edition, we're diving into the powerful new @function rule, the surprisingly useful alpha() function, Grid Lanes, some underappreciated features of the <dialog> element, and even a CSS Wordle clone that will blow your mind.
CSS @function: The Biggest CSS Feature of the Year?
Let's start with the one everyone in the CSS community is talking about: @function. This new at-rule allows developers to define reusable, custom CSS functions — and it's widely expected to become one of the most significant CSS features to achieve Baseline status in 2025. That's a bold prediction, but when you consider what @function actually enables, it starts to feel well-justified.
At its core, @function lets you write logic directly inside your CSS, similar in spirit to how you might write a utility function in JavaScript. You can define a named function, accept parameters, perform calculations, and return a value — all without leaving your stylesheet. This opens the door to far more expressive, maintainable, and DRY (Don't Repeat Yourself) CSS codebases.
Frontend Masters published a thorough walkthrough by Jane Ori that explains how CSS functions work from the ground up. What makes her tutorial stand out is its baby-step approach — she doesn't assume you're already familiar with the syntax, and she eases you into the concept with clear, progressive examples. If you've felt a little intimidated by @function (and honestly, many developers have), her guide is the perfect antidote.
In addition to Jane's tutorial, CSS-Tricks contributor Declan Chidlow has written comprehensive @function documentation for the CSS-Tricks Almanac. It's well worth bookmarking as a quick reference once you start experimenting with the feature in your own projects. As browser support continues to grow, knowing where to look when you hit a syntax question will save you valuable time.
Introducing the alpha() Function — But Wait, Didn't We Already Have This?
Here's one that caught a lot of developers off guard: the new alpha() CSS function. At first glance, the reaction from much of the community was a confused why? — and understandably so. After all, CSS already gives us ways to manipulate the alpha channel of a color. You can do it using relative color syntax with oklch() like this:
- Old approach:
color: oklch(from var(--color) l c h / 0.5); - New approach:
color: alpha(from var(--color) / 0.5);
So why does alpha() exist if we could already achieve the same result? The answer is actually quite practical. A comment from Jason Leo in the relevant GitHub discussion on Mozilla's standards-positions repository clarifies the reasoning elegantly. The alpha() function solves a real ergonomics problem: it means you no longer need to know or hard-code the color space of a variable when you just want to adjust its opacity.
Think about it — if you're consuming a design token stored in a CSS custom property, you might not know (or want to care) whether it's stored as oklch, hsl, rgb, or any other color format. With the old relative color syntax, you had to specify the color space explicitly to perform the transformation. With alpha(), you simply pass the color and the desired opacity, and the function handles the rest. It's a small quality-of-life improvement with surprisingly broad practical implications for design systems and component libraries.
CSS Grid Lanes: A Cleaner Way to Think About Grid Layout
CSS Grid is already one of the most powerful layout tools the web has ever seen, but that doesn't mean there isn't room to improve the developer experience around it. That's where Grid Lanes come in. This newer concept introduces a more intuitive way to reference and work with the rows and columns inside a grid container.
Rather than relying exclusively on numbered line indices or named template areas, Grid Lanes offer a more semantic, readable approach to defining layout regions. For developers who work extensively with complex grid structures — think editorial layouts, dashboard UIs, or product listing pages — this kind of ergonomic improvement can meaningfully reduce cognitive load and the likelihood of layout bugs.
Things About <dialog> You Might Not Know
The HTML <dialog> element has been gaining serious traction as a native, accessible alternative to JavaScript-heavy modal implementations. But despite its growing adoption, there are several behaviors and attributes that even experienced developers tend to overlook.
For instance, many developers aren't aware of how <dialog> interacts with the top layer in modern browsers, or how the ::backdrop pseudo-element can be styled with CSS to create polished overlay effects without a single line of JavaScript. There's also nuance around focus management, the returnValue property, and how form submission works inside a dialog using the method="dialog" attribute. Taking the time to understand these lesser-known details can help you use <dialog> to its full potential while keeping your code accessible and maintainable.
CSS Wordle: Because CSS Can Do That Too
On the more delightful end of the CSS news spectrum, someone built a fully playable Wordle clone using CSS. No JavaScript. Just CSS. If that sounds impossible, that's part of what makes it such a fascinating project to study.
Beyond the novelty, projects like CSS Wordle serve an important educational purpose. They push developers to think creatively about what CSS is actually capable of — from state management using checkbox hacks and the :checked pseudo-class to complex visual feedback built entirely through selectors and custom properties. Exploring these kinds of experiments is a great way to deepen your understanding of the language in ways that everyday project work simply doesn't require.
Staying Current With CSS: Why It Matters More Than Ever
The pace of CSS evolution in 2025 is genuinely exciting. Features that once required JavaScript workarounds or preprocessor magic are landing natively in browsers. Custom functions, color manipulation utilities, improved grid tooling, and accessible native UI elements are all converging to make CSS a more complete and expressive language than it has ever been.
Whether you're a frontend developer looking to level up your stylesheet skills, a full-stack engineer trying to keep pace with the modern web platform, or a designer who writes code, keeping up with these developments isn't just interesting — it's increasingly essential. Bookmark your references, follow the right contributors, and keep experimenting. The best CSS is still being written.