2026’s New CSS and Web Features Worth Using Now
Every month the web.dev team publishes a “Baseline digest”: a short list of web platform features that have become dependable across the major browsers. Most readers skim it, nod, and go back to their work. For a small studio or an in-house web person, though, these lists are a useful filter. They tell you which tricks you can stop faking with JavaScript or extra plugins. Here is our reading of the January and May 2026 digests, with a bias toward what helps ordinary business sites.
How to read “newly” versus “widely” available
Each digest sorts features into two groups. “Widely available” items have been around long enough that you can use them as a default. “Newly available” items work in current browsers but may not reach every visitor yet. Our rule of thumb: adopt the widely available group freely, and use the newer group when you can provide a sensible fallback or when your analytics show most visitors are on recent browsers.
Features that simplify forms and dialogs
:user-invalid
The older :invalid pseudo-class matches a form field as soon as the page loads, which is why so many sites show red error borders on empty fields before anyone has typed. The May digest lists :user-invalid as widely available. It only applies after the visitor has interacted with the field. For contact forms, quote requests and checkout steps, that is a quiet improvement to how the page feels, with no script needed.
:open
Also in May, newly available: the :open pseudo-class matches <dialog> and <details> elements while they are open. If you build FAQ accordions or simple modal windows, you can style the open state directly instead of toggling extra classes.
ToggleEvent.source
For teams using the Popover API, this tells you which control triggered a toggle. It is a developer convenience, and mostly relevant if you have several buttons driving one popover.
Features that tidy up layout and typography
- Container style queries. You can now style a component based on custom properties set on its parent, not only the parent’s size. That suits reusable cards or banners that change look depending on where they are placed.
- lh and rlh units. Both are widely available. They size things relative to line height, which makes spacing that follows the text rhythm much easier to maintain. The January digest also lists a set of root-relative units (rcap, rch, rex, ric) as newly available, useful mainly for typographic fine-tuning.
- Two-value display syntax. Writing display: inline flex instead of inline-flex is now widely available. It is not a visible change, but it makes the outer and inner behaviour of a box easier to read and teach.
- text-decoration-skip-ink: all. A small refinement for how underlines pass through letters.
- image-rendering. Handy for keeping QR codes or low-resolution graphics crisp rather than blurred when scaled.
- clip-path. Listed as widely available, so shaped images and cut-out sections no longer need workarounds.
Features for smoother navigation and animation
January’s digest highlights the Navigation API, a newer alternative to the History API aimed at single-page apps, as newly available. It matters if you maintain a JavaScript-driven site and have been patching together back-button behaviour. For a mostly static brochure site, you can ignore it. The same digest adds :active-view-transition, which targets the page only while a view transition runs, and lists animation-composition as widely available for controlling how stacked animations combine.
On the JavaScript side, the “by copy” array methods toReversed(), toSorted() and toSpliced() are now widely available. They return a changed copy and leave the original array alone, which prevents a class of subtle bugs in sorting and filtering code. Service workers can also use JavaScript modules, which helps teams that share code between the page and an offline layer.
What this means for a small business site
The practical benefit is less code. Each feature above replaces a script, a plugin or a pile of utility classes. Less code means faster pages, fewer things to break during updates, and cheaper maintenance. It also means a theme can stay lean. When we build or adjust themes for clients, this is the sort of change we try to fold in gradually; you can browse the approach on our themes page.
When to skip or delay
- If your site is a page builder or a heavily customised theme, do not rewrite working CSS only to use something new. Adopt features as you touch each component.
- If a newly available feature has no graceful fallback, such as styling that is essential rather than decorative, wait for the widely available label.
- Do not treat any digest as a substitute for testing on the devices your own customers use.
A simple routine
- Skim the monthly digest and note anything relevant to forms, layout or navigation.
- Add one or two items to your backlog, tagged by the component they would improve.
- Apply them when you next edit that component, and check the result in a couple of real browsers.