New in CSS
Part 2
30-ish new frontend features
Drupalcamp Kortrijk
June 29th 2026
Nicolai Schwarz,
textformer.de
Accessibility
contrast-color()
might not be what you expect
Random Color in the Background
Text will be black or white
Might not be the color you expect. Should pass WCAG AA. Might not pass AAA for mid-tone background colors.
- since Apr 26
- since Apr 26
- since Apr 26
- since Dec 25
- since Sep 25
See caniuse.com
focusgroup
one of the best additions, someday
A list with buttons, with focusgroup
- N/A (works in current version)
- N/A (works in current version)
- N/A (works in current version)
- N/A
- N/A
No caniuse.com-Link available.
Some polyfills exists.
Alt text
for generated content
simple improvement
- since Sep 19
- since Jan 20
- since Oct 19
- since Jul 24
- since Mar 24
See caniuse.com
ariaNotify()
alternative to »offscreen live region«
- not supported
- not supported
- not supported
- since Apr 26
- not supported
See caniuse.com
Customizable Select
Modern additions
Older browsers will ignore the new stuff.
CSS, tell browsers you want a customizable select
- since Apr 25
- since Apr 25
- since Jul 25
- not supported
- not supported
See caniuse.com
Use it. It has a built-in fallback. But check accessibility.
This & that
crisp-edges
scales images to preserve lines without blurring
normal handling, looks blurred
crisp-edges – much better, but not perfect,
because the original image was not pixel perfect
- depends on value
- depends on value
- depends on value
- depends on value
- depends on value
See caniuse.com
field-sizing
content-sized textareas
- since Mar 24
- since Mar 24
- since Mar 24
- since Jun 26
- since Nov 25
See caniuse.com
content-visibility: auto
Lazy Rendering
CSS
= render these items later
CSS
= here is an estimate for their width and height
We are using this on jmberlin.de. Depending on the page this saves between 20% and 40% of the rendering time. In the best case these are 50ms.
On the one hand these are 50ms against a complete loading of those pages between 800ms and 1200ms (cached).
On the other hand you get these little improvements with just a few lines of CSS.
New
CSS functions
round(), mod(), and rem()
nearest multiple, remainder of a division
- since May 24
- since May 24
- since Jun 24
- since Sep 23
- since Dec 23
See caniuse.com
abs() and sign()
If JS can do it …
- since Jun 25
- since Jun 25
- since Sep 25
- since Sep 23
- since Mar 22
See caniuse.com
if()
Someone is jealous of JS
if-test within a shorthand
- since May 25
- since May 25
- since Aug 25
- not supported
- not supported
See caniuse.com
random()
Hail Eris! All Hail Discordia!
shape()
native CSS shapes
SVG Path
CSS shape() Path
Advantages: Native to CSS, suppports CSS units and variables, easier to make responsive, supports CSS animations
- since Apr 25
- since Apr 25
- since Jul 25
- since Feb 26
- since Mar 25
See caniuse.com
AI
Prompt API
pushed by Google
Download a Gemini Nano model. The model may be up to 22 GB. Current model, v3Nano, is around 4 GB.
Then you can locally use the
- Prompt API,
- Summarizer API,
- Writer API,
- Rewriter API,
- and Proofreader API.
- since May 26
- can be enabled
- not supported
- not supported
- not supported
See caniuse.com
Mozilla and Apple are against this API.
- Chrome’s model might become the dominant model.
- An LLM’s behavior changes as the model is updated.
- A web standard becomes tied to AI policies.
- Security concerns
- Privacy concerns
textformer.de/dcbe26
