New in CSS

30-ish new frontend features

Drupalcamp Kortrijk
June 29th 2026

Nicolai Schwarz,
textformer.de

Hi, Nicolai Schwarz here
textformer.de
Designer & Webdeveloper
Dortmund, Germany

doing Drupal since around 2008
mostly Site Building, Frontend stuff, Accessibility

written 100+ articles in the last 15 years for Screenguide, PC Magazin, Webstandards Magazin, t3n, PHP Magazin

Nicolai Schwarz

Baseline

Baseline gives you clear information about which web platform features are ready to use in your projects today.

The core browser set: Chrome, Edge, Firefox & Safari.

See web.dev/baseline

Not
today

Grid
Upgrades

Masonry
Grid Lanes

Look Ma, no JS

A classic masonry layout

Now called Grid Lanes in CSS

CSS

Lanes can have different widths

Items can be spanned over lanes

Items can be pinned in certain lanes

CSS

Two directions

CSS, possible fallback

  • can be enabled
  • can be enabled
  • not supported
  • can be enabled
  • since Mar 26

See caniuse.com

webkit.org: Introducing CSS Grid Lanes
webkit.org: When will CSS Grid Lanes arrive?

Have a look at the order.

Normal order:
1, 2, 3, 4
7, 5, 6.

Order changed with Flow Tolerance:
1, 2, 3, 4
5, 6, 7.

Icon Warning

Manuel Matuzović: Your Grid Lanes will likely fail WCAG 2.4.3

CSS reading-flow and reading-order might address this.

Gap decorations

works for flex, grid, or multi-column

CSS

  • since Jun 26
  • since Jun 26
  • not supported
  • not supported
  • not supported

See caniuse.com

Interactive CSS Gap Decorations Demo

New in HTML

Lazy loading
for video and audio

Analog to image and iframe

Lazy loading 1

Lazy loading 2

  • since May 26
  • since May 26
  • not supported
  • not supported
  • not supported

See caniuse.com

Use it anyway. It’s just a plus.

<search>

Defines the missing search landmark

Very old code

Modern code

Old code

New code

  • since Oct 23
  • since Oct 23
  • since Nov 23
  • since Sep 23
  • since Sep 23

See caniuse.com

<geolocation>

Proposal by Google. An HTML element that streamlines requesting and accessing location data.

New code

Fallback

Show coordinates

  • since Jan 26
  • since Jan 26
  • since Apr 26
  • not supported
  • not supported

See caniuse.com

Use it with fallback or polyfill

<install>

experiment by Microsoft & Google
for progressive web apps (PWAs)

a trusted install button, no JS required

  • N/A
  • N/A
  • N/A
  • N/A
  • N/A

No caniuse.com-Link available.

<model>

Proposal by Apple. Similar to img or video — only now you can embed interactive 3D models into the webpage.

Basic usage

Lighting

Animation and playback

  • not supported
  • not supported
  • not supported
  • not supported
  • Sep 25

See webkit.org/blog

sizes="auto"

Helpful for responsive images,
but only with lazy-loading!

Responsive image in HTML

Here the browser needs to know which image to download before the layout happens.

New for lazy-loading

Here the browser can download the image after layout is done. And then sizes doesn’t matter anymore.

  • since Jun 24
  • since Jun 24
  • since Jul 24
  • since Apr 26
  • not supported

See caniuse.com

There is a polyfill.

Read also: Sizes="auto" pretty much requires width and height attributes

command and
commandfor

Now buttons can have actions without JavaScript.

dialog for old browsers

JS

dialog for new browsers

command and
commandfor

Now buttons can have actions without JavaScript.

  • since Apr 25
  • since Apr 25
  • since Jul 25
  • since Oct 25
  • since Nov 25

See caniuse.com

Use it. It is not that difficult to write a polyfill for older browsers.

closedby

New options to close dialog

dialog with easy dismiss

Closable using the Esc key, or by clicking outside the dialog ("light dismiss").

closedby

New options to close dialog

  • since Mar 25
  • since Mar 25
  • since May 25
  • since Jul 25
  • not supported

See caniuse.com

Use it. Again: It is not that difficult to write a polyfill for older browsers.

HTML in Canvas

HTML in Canvas

accessible HTML, with fancy effects

Typography

text-wrap: balance

Prettify headlines, equalizes the length of lines

CSS

without text-wrap

Hollywood grinds to a halt on first full day of joint actors’ and writers’ strikes

with text-wrap: balance

Hollywood grinds to a halt on first full day of joint actors’ and writers’ strikes

  • Oct 24
  • Oct 24
  • Jan 25
  • Dec 23
  • May 24

See caniuse.com

text-wrap: pretty

Prettify paragraphs, optimizes line breaks
to prevent orphaned words

CSS

Plain text

Ein besonderer Schwerpunkt liegt auf der Bildungsarbeit: Das umfangreiche pädagogische Angebot, die Forschungsmöglichkeiten in Bibliothek und Archiv sowie das Veranstaltungsprogramm richten sich an Kinder, Jugendliche und Erwachsene.

Neben Führungen und Workshops finden Vorträge und Konferenzen, Konzerte und Lesungen sowie ein jährlicher Kultursommer statt. Besonders facettenreich sind auch unsere digitalen Programme, wozu der Internetauftritt des Museums, die JMB App, vielfältige Online-Features zu jüdischen Themen, Online-Publikationen, Online-Sammlungen und eine Mediathek gehören.

Plain text with text-wrap: pretty

Ein besonderer Schwerpunkt liegt auf der Bildungsarbeit: Das umfangreiche pädagogische Angebot, die Forschungsmöglichkeiten in Bibliothek und Archiv sowie das Veranstaltungsprogramm richten sich an Kinder, Jugendliche und Erwachsene.

Neben Führungen und Workshops finden Vorträge und Konferenzen, Konzerte und Lesungen sowie ein jährlicher Kultursommer statt. Besonders facettenreich sind auch unsere digitalen Programme, wozu der Internetauftritt des Museums, die JMB App, vielfältige Online-Features zu jüdischen Themen, Online-Publikationen, Online-Sammlungen und eine Mediathek gehören.

  • Sep 23
  • Sep 23
  • Oct 23
  • not supported
  • Sep 25

See caniuse.com

See: When to use CSS text-wrap: balance; vs text-wrap: pretty;

 

hyphens

old and rather useless

  • since Jan 21
  • since Sep 22
  • since Sep 22
  • since Aug 11 (with prefix)
  • since Jul 21 (with prefix)

See caniuse.com

CSS

Plain text with hyphens: auto

Ein besonderer Schwerpunkt liegt auf der Bildungsarbeit: Das umfangreiche pädagogische Angebot, die Forschungsmöglichkeiten in Bibliothek und Archiv sowie das Veranstaltungsprogramm richten sich an Kinder, Jugendliche und Erwachsene. Neben Führungen und Workshops finden Vorträge und Konferenzen, Konzerte und Lesungen sowie ein jährlicher Kultursommer statt. Besonders facettenreich sind auch unsere digitalen Programme, wozu der Internetauftritt des Museums, die JMB App, vielfältige Online-Features zu jüdischen Themen, Online-Publikationen, Online-Sammlungen und eine Mediathek gehören.

hyphenate-limit-chars

adds control

  • since Jan 23
  • since Jan 23
  • since Feb 23
  • since Apr 25
  • not supported

See caniuse.com

CSS

Plain text with hyphens: auto and hyphenate-limit-chars

Ein besonderer Schwerpunkt liegt auf der Bildungsarbeit: Das umfangreiche pädagogische Angebot, die Forschungsmöglichkeiten in Bibliothek und Archiv sowie das Veranstaltungsprogramm richten sich an Kinder, Jugendliche und Erwachsene. Neben Führungen und Workshops finden Vorträge und Konferenzen, Konzerte und Lesungen sowie ein jährlicher Kultursommer statt. Besonders facettenreich sind auch unsere digitalen Programme, wozu der Internetauftritt des Museums, die JMB App, vielfältige Online-Features zu jüdischen Themen, Online-Publikationen, Online-Sammlungen und eine Mediathek gehören.

New-ish units

ICYMI

lh

value of line-height

  • since Jan 23
  • since Jan 23
  • since Feb 23
  • since Nov 23
  • since Mar 23

See caniuse.com

rlh

value of line-height of the root element

  • since Mar 23
  • since Mar 23
  • since Mar 23
  • since Nov 23
  • since Mar 23

See caniuse.com

cap

height of Latin capital letters

  • since Oct 23
  • since Oct 23
  • since Nov 23
  • since Dec 23
  • since Feb 22

See caniuse.com

graphic from Wikimedia

rcap

height of Latin capital letters of the root element

  • since Oct 23
  • since Oct 23
  • since Nov 23
  • since Jan 26
  • since Dec 23

See caniuse.com

Fancy Headline

line-height: 1

Fancy Headline

line-height: 1cap

Fancy Headline

Yeah. Still depends on the font! And the browser!

Fancy Headline

This is Times New Roman.

You might also want to play around with the new Font metric overrides: ascent-override, descent-override, and line-gap-override.

Rhythmic sizing

consistent vertical rhythm, maybe one day

CSS

  • not supported
  • not supported
  • not supported
  • not supported
  • not supported

See CSS Rhythmic Sizing Module Level 1 (Working Draft)

Looks new, from 2026, but there is also a Working Draft from March 2017.

Anchor Positioning

Anchor Positioning

HTML

This is a tooltip!

Base CSS

This is a tooltip!
This is a tooltip!

CSS, add fallback

This is a tooltip!

CSS, styles for fallback

This is a tooltip!
  • since May 24
  • since May 24
  • since Jun 24
  • since Jan 26
  • since Sep 25

See caniuse.com

There is a polyfill.

Fun fact: This is the first time I put so many fancy CSS examples, JavaScripts and iframes in my slides that Chrome on my Laptop can't handle this anymore. I had to cut the presentation in two parts!

So, here is: Part 2