30-ish new frontend features
Drupalcamp Kortrijk 2026
June 29-30th 2026
Nicolai Schwarz, textformer.de
Last Update: June 28th, 2026
The goal of the session was to give an overview over some of the new CSS features you may use either now – or in the near future. Like CSS Grid Lanes, Anchor Positioning and Customizable Select.
I guess, you will mainly need the linklist right here. But you may still look at the actual slides (I had to cut them into two parts, around 27 MB altogether, not optimized in any way).
The slides were built for Desktop. (I will not make the slides responsive.) You navigate with the arrow keys → ←. Adjust the size with browser zoom till the content fits. Some examples inside the slides will only work in the latest Chrome browsers.
Baseline gives you clear information about which web platform features are ready to use in your projects today.
I didn’t want to repeat some »old« topics from my previous talks. So no inert, <dialog>, popover, CSS Nesting, CSS Layers, CSS Scope, Container style queries, Scroll-driven Animations and Subgrid in this one.
But I have added links to these topics at the bottom.
Designers have been waiting a few years for this. Native Masonry layouts with CSS. You can use this already – with a fallback. But there are likely problems with accessibility.
This gives you basically border-line options for gaps in Grids, Flexbox and Multicolumn.
It just makes sense to add lazy loading for these media items. You can use this right now. Older browser will simply ignore the attribute.
This adds the last landmark role as its own HTML element. This removes the need for adding role=search to a search <form> element.
»This element represents a major shift in how sites request user location data—moving away from script-triggered permission prompts toward a declarative, user-action-oriented experience. It reduces the boilerplate code required to handle permission states and errors, and provides a stronger signal of user intent.« (developer.chrome.com)
This comes from Microsoft and Google. »Installing web apps has always required JavaScript. When you use the beforeinstallprompt event, the installation flow lives entirely in script. The new <install> element changes that: drop a single HTML element into your page and the browser renders a trusted install button for you, with no JavaScript required.« (developer.chrome.com)
Apple throws its own HTML element in the ring. »The
This is helpful for responsive images. But it only works in combination with lazy loading.
Less JavaScript needed. »Chrome 135 introduces new capabilities for providing declarative behaviour with the new command and commandfor attributes, enhancing and replacing the popovertargetaction and popovertarget attributes. These new attributes can be added to buttons, letting the browser address some core issues around simplicity and accessibility, and provide built-in common functionality.« (developer.chrome.com)
Again: Less JS needed. The new closedby attribute allows you to define which user actions will close the dialog. You can add light dismiss behavior (like for popovers), or go the other way: e.g., prevent the ESC key from closing the dialog.
»This API lets you draw DOM content directly into a 2D canvas or a WebGL/WebGPU texture while keeping the UI interactable, accessible, and hooked up to your favorite browser features. By combining HTML with low-level graphics processing, you can create experiences that were previously impossible.« (developer.chrome.com)
Better line balance for headings.
Better line balance for copy text / paragraphs.
hyphens: auto is pretty useless on its own. But with hyphenate-limit-chars you finally have some control – in every modern browser except Safari.
In case you missed it. There are some CSS units like lh, ch, ex, cap and rlh, rch, rex and rcap. Some may be useful in certain situations.
This CSS module aims to establish a vertical rhythm for text on a website. So whenever text sits besides other text – e.g. in CSS Flexbox, Grid oder Multicolum – the lines align. You can already achieve this when you are very careful with line-heights and margins. But this module will make it a lot easier.
There is an old module from 2017, that went nowhere. But with the new iteration from 2026 I am hopeful this gets implemented someday.
This lets you natively position elements relative to other elements, known as anchors. Sounds nice. But it can get pretty complicated.
»The contrast-color() CSS function takes a color value and returns a contrasting color. The function commonly ensures the WCAG AA minimum contrast. The browsers may use different and better algorithms.« (developer.mozilla.org)
This is one of my favorite new proposals. It will improve accessibility and, again, saves you lots of JavaScript.
»The focusgroup HTML attribute is a proposed declarative way to add keyboard arrow-key navigation to composite widgets such as toolbars, tablists, menus, listboxes, etc. without writing any roving-tabindex JavaScript. One attribute replaces hundreds of lines of boilerplate.« (developer.chrome.com)
Add alternative text for images you add with ::before and ::after.
»ARIA Notify is designed to address scenarios where a visual change that’s not tied to a DOM change and not accessible to assistive technology users, happens in the page. Examples include changing the format of text in a document, or when a person joins a video conference call.
Developers have come to rely on ARIA live regions as a limited workaround. ARIA Notify is an imperative notification API that’s designed to replace the usage of ARIA live regions, and overcome its limitations, in these scenarios.« (blogs.windows.com)
So we can finally customize the old select form element. The new feature also includes a handy fallback for older browser. Depending on what yu want to do, you still need to check how older browser render your code. And if your solution is accessible.
This is just a new option to render images that are scaled up or down. If you want to preserve a pixellated form, e.g. for pixel art or qr codes, crisp-edges will usually be better for scaling.
This allows form controls like inputs, select, and textareas to automatically grow as big as the text inside it is.
This is basically a kid of lazy-rendering for parts of your content. It improves rendering performance. / In this context CSS Containment is relevant. My advice: Skip this part.
CSS grows and grows. And steals a few functions and ideas from JavaScript and SVG.
So far I haven’t found a usecase for this in CSS.
On one hand you will be able to do some wonderful conditional theming with this. On the other hand this will make your CSS even more complicated.
While we are at it: Let’s also add a random function. The Webkit team is pioneering this one.
This one we are stealing from SVG. It mimics path() in SVG. But with shape() we can use CSS units and animations.
Like many other companies Google is pushing AI.
And then we have the controversial new Prompt API from Google. This one is opposed by Apple and Mozilla in its current form.
»The inert attribute is a global HTML attribute that simplifies how to remove and restore user input events for an element, including focus events and events from assistive technologies.« (Emma Twersky, web.dev)
»The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.« (developer.mozilla.org)
»The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.« (developer.mozilla.org)
»One of our favorite CSS preprocessor features is now built into the language: nesting style rules.« (Adam Argyle, developer.chrome.com)
»CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important.« (Miriam Suzanne, css-tricks.com)
»It’s an upcoming way to scope the reach of your CSS selectors, allowing you to move away from methodologies such as BEM because you no longer need to name those in-between elements.«
It can get pretty complicated, which style wins over another. Especially now that @layer and @scope enter the hacking order. So you might want to refresh your knowledge about the Cascade.
»The containment spec includes more than just size queries; it also enables querying a parent's style values. From Chromium 111, you’ll be able to apply style containment for custom property values and query a parent element for the value of a custom property.« (Una Kravets, developer.chrome.com)
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. (Bramus Van Damme, developer.chrome.com)