De toekomst van CSS ✨ Mijn top 10 keuzes voor Interop 2027
De afgelopen jaren hebben alle grote browserleveranciers (Google, Apple, Microsoft en Mozilla, samen met Igalia en Bocoup) samengewerkt aan Interop, een project om de universele ondersteuning van webtechnologieën in browsers te verbeteren. Het is een opmerkelijk succesvolle inspanning; wanneer een focusgebied wordt toegevoegd aan Interop, bereikt dit vaak binnen een jaar bijna 100% ondersteuning in alle grote browsers.
CSS Subgrid is hier een goed voorbeeld van. Subgrid is een krachtige uitbreiding van CSS Grid die geheel nieuwe layouts mogelijk maakt. Het werd al in 2019 geïmplementeerd in Firefox, maar in andere browsers gebeurde jarenlang weinig. Nadat het werd toegevoegd aan Interop 2023, was het aan het einde van dat jaar breed beschikbaar in alle moderne browsers.
Nu we het einde van 2026 naderen, wordt Interop 2027 gepland. Het team bij Mozilla heeft een rankingsysteem opgezet waarin we kunnen stemmen op de meest gewenste functies. Ze zijn van plan deze data te gebruiken om te bepalen wat er volgend jaar in Interop wordt opgenomen.
In dit artikel duik ik in de top 10 functies waarop ik heb gestemd, om een voorproefje te geven van hoe CSS er binnen een jaar uit zou kunnen zien. Daarnaast deel ik enkele tips en tricks die je vandaag al kunt gebruiken.
1. CSS-functies
Een van de meest spannende ideeën is het voorstel om functies aan CSS toe te voegen:
/* Definieer een functie: */
@function --gradient-to-transparent(--color, --direction: bottom) {
result: linear-gradient(
to var(--direction),
var(--color),
transparent
);
}
/* Roep de functie aan: */
.elem {
background: --gradient-to-transparent(red);
}
/* ...wat resulteert in: */
.elem {
background: linear-gradient(
to bottom,
red,
transparent
);
}Voor wie bekend is met JavaScript, zal dit zeer vertrouwd aanvoelen. We definiëren nieuwe functies met @function en specificeren de teruggegeven waarde met result.
Er zijn talloze interessante toepassingen voor. Persoonlijk ben ik het meest geïnteresseerd in de mogelijkheid om te converteren tussen polaire en cartesiaanse coördinaten, een concept dat herhaaldelijk terugkomt in mijn Whimsical Animations cursus:
@function --translate-polar(--angle, --distance) {
result: translate(
calc(cos(var(--angle)) * var(--distance)),
calc(sin(var(--angle)) * var(--distance))
);
}
/* Verplaats dit element 100px in een hoek van 45°: */
.particle {
transform: --translate-polar(45deg, 100px);
}Dit voelt bijna als sciencefiction, maar het is al geïmplementeerd in Chromium-browsers. Als het wordt toegevoegd aan Interop 2027, is de kans groot dat het snel breed beschikbaar komt.
2. Bevels en squircles met corner-shape
In CSS gebruiken we de eigenschap border-radius om de hoeken van DOM-nodes af te ronden en zo afgeronde rechthoeken te maken. Deze eigenschap voegt effectief een kwartcirkel toe aan elke hoek, die de vier rechte zijden met elkaar verbindt.
De eigenschap corner-shape onderzoekt alternatieve manieren om deze vier zijden te verbinden. Het biedt een aantal nieuwe opties:
squirclebevelnotchscoop
Wanneer ik voor het eerst over deze eigenschap hoorde, was ik vooral enthousiast over de squircle. Squircles maken gebruik van een alternatief algoritme voor afgeronde hoeken via superellipsen. Apple gebruikt dit al jaren omdat het vloeiendere, zachtere randen oplevert.
Na wat experimenteren merk ik echter dat ik corner-shape: bevel veel gebruik. Het is uitstekend voor het creëren van video game- of sci-fi interfaces.
Hoewel we technisch gezien soortgelijke effecten konden bereiken met clip-path of masks, verandert corner-shape daadwerkelijk de vorm van de border-box. Dit betekent dat onze borders, outlines en box-shadows correct de aangepaste hoekvormen volgen. Hoewel deze eigenschap (in oktober 2026) nog niet beschikbaar is in Firefox/Safari, is het zinvol om het nu al te gaan gebruiken als een progressive enhancement.
3. Oneindige mogelijkheden met border-shape
Naast corner-shape is er een apart voorstel voor border-shape. Dit is in feite een versie op een lager niveau waarmee we de rand zelf kunnen tekenen.
Kort samengevat stelt border-shape ons in staat om elke gewenste randvorm te creëren met behulp van rechte lijnen, bogen en Bézier-curves. Net als bij corner-shape verandert deze eigenschap de eigenlijke border-box van het element, waardoor borders, outlines en schaduwen correct worden gevolgd. Het is zelfs mogelijk om te animeren tussen verschillende border-shapes.
4. Anchored Container Queries
De Anchor Positioning API stelt ons in staat om één element te koppelen (verankeren) aan een ander. Een voorbeeld is een zwevende tooltip die is verankerd aan de trigger; ongeacht waar die trigger op de pagina staat, de tooltip blijft ermee verbonden.
Dit is verrassend complex. Stel dat we willen dat de tooltip boven de anchor zweeft, maar de anchor bevindt zich vlak bovenaan de viewport. De originele Anchor Positioning API bood tools om dit op te lossen, zoals fallback-posities waardoor de tooltip automatisch naar beneden klapt als er boven geen ruimte is.
Wat ontbrak, was de mogelijkheid om in CSS te detecteren óf het element is omgeklapt naar de fallback-positie. Voor tooltips is dit cruciaal, omdat we vaak een klein pijltje willen toevoegen dat naar de anchor wijst.
De "Level 2" versie van de Anchor Positioning API bevat een nieuw type container query waarmee we kunnen controleren of het doelelement een fallback-positie gebruikt.
5. De CSS inherit() functie
De inherit keyword in CSS stelt ons in staat om een waarde van de parent over te nemen, zelfs als die eigenschap normaal gesproken niet wordt geërfd.
Dit is nuttig, maar werkt niet altijd perfect. Neem bijvoorbeeld geneste border-radii. Om geneste afgeronde hoeken er correct uit te laten zien, moet de binnenste radius kleiner zijn dan de buitenste. Je wilt de geërfde waarde dus niet exact overnemen, maar transformeren.
Dat is waar de voorgestelde inherit() functie om de hoek komt. Deze haalt de geërfde waarde op en stelt ons in staat deze te wijzigen met calc():
p {
border-radius: calc(inherit() - 4px);
}Gezien hoe experimenteel deze functie is, zou ik verbaasd zijn als hij direct in Interop 2027 terechtkomt, maar het zou een zeer nuttige toevoeging zijn.
6. Scroll-triggered animations
In tegenstelling tot scroll-driven animations (waarbij je door een animatie heen "scrobt" terwijl je scrollt), is het doel van scroll-triggered animations om een keyframe-animatie te activeren wanneer de gebruiker een specifiek punt bereikt—vergelijkbaar met een nabijheidssensor. Op dat moment draait de animatie normaal af over een gespecificeerde duur.
Momenteel kunnen we dit implementeren via de IntersectionObserver API in JavaScript, maar dat is omslachtig. Het zou ideaal zijn om CSS te kunnen gebruiken voor zowel scroll-driven als scroll-triggered animaties, aangezien ze elk hun eigen use case hebben.
7. CSS reading-flow en reading-order
Bij dynamische grid-layouts worden items op desktop vaak heel anders gerangschikt dan op mobiel. Dit leidt tot een onfortuinlijk neveneffect: de tab-volgorde is altijd gebaseerd op de DOM-volgorde, niet op de visuele volgorde. Voor gebruikers van hulptechnologieën betekent dit dat de navigatievolgorde hetzelfde blijft, ook al verandert de visuele layout drastisch.
De nieuwe eigenschap reading-flow biedt een oplossing. Hiermee kunnen we specificeren dat de tab-volgorde een van de visuele volgordes moet volgen:
.grid {
display: grid;
reading-flow: grid-rows;
}Er zijn waarden voor zowel CSS Grid als Flexbox. Voor nog meer controle is er de eigenschap reading-order, waarmee we een aangepaste volgorde kunnen creëren, vergelijkbaar met tabIndex in HTML.
8. Keyword size animaties met interpolate-size en calc-size()
Een langdurig pijnpunt in webdevelopment is de onmogelijkheid om te animeren tussen keyword-waarden zoals auto. De eigenschap interpolate-size lost dit op, samen met de gerelateerde calc-size() functie.
De meest voorkomende use case is het animeren tussen height: 0 en height: auto, bijvoorbeeld voor uitklapbare accordeon-menu's:
html {
interpolate-size: allow-keywords;
}
@supports (interpolate-size: allow-keywords) {
details {
overflow: hidden;
&::details-content {
height: 0;
transition:
height 300ms,
content-visibility 300ms;
transition-behavior: allow-discrete;
}
&:open::details-content {
height: auto;
}
}
}Deze functie is sinds 2024 geïmplementeerd in Chrome. Je kunt het vandaag al gebruiken als progressive enhancement, mits je de transitie plaatst achter een @supports query om vertragingen in niet-ondersteunde browsers te voorkomen.
9. CSS gap decorations
Een nadeel van CSS Grid is dat het niet eenvoudig is om randen (borders) tussen grid-cellen toe te voegen. Als een grid-cel leeg is, is er geen element om een border aan toe te voegen.
Het voorstel voor gap decorations introduceert nieuwe CSS-eigenschappen waarmee we een border-achtige syntaxis direct op het grid kunnen toepassen via de rule eigenschap:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1px;
border: 1px solid red;
/* De nieuwe functie: */
rule: 1px solid red;
}De rule eigenschap is een shorthand voor breedte, kleur en stijl (dashed/dotted/solid). Er zijn ook row-rule en column-rule beschikbaar als je alleen lijnen tussen rijen of kolommen wilt tekenen.
Klassieke workaround Totdat browsers dit ondersteunen, is een veelgebruikte methode om het grid zelf een achtergrondkleur te geven die overeenkomt met de gewenste border, en een gap van 1px toe te voegen zodat de achtergrond tussen de cellen door zichtbaar wordt. Dit vereist echter dat alle cellen gevuld zijn met DOM-nodes en werkt alleen bij een egale paginabackground.
10. Scroll state container queries
Bij het gebruik van position: sticky is het vaak wenselijk om te weten of een element daadwerkelijk "vastgeplakt" is. Denk aan het veranderen van de achtergrondkleur van een sticky header zodra deze de bovenkant van de viewport raakt.
Het voorstel voor scroll state container queries maakt dit mogelijk:
header {
position: sticky;
top: 0;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.header-content {
background: var(--gray-300);
border-bottom: 1px solid var(--gray-500);
}
}Deze API is niet alleen voor sticky-positionering. We kunnen ook controleren of een scroll-container helemaal boven- of onderaan is gescrold (via scrollable: top of scrollable: bottom), wat handig is voor het tonen van scroll-indicatoren zoals gradiënten.
Conclusie
Nu we het zevende jaar van Interop ingaan, is het onmiskenbaar dat dit project een groot succes is geweest voor het web.
In een tijd waarin veel developers hun werk delegeren aan LLM's, vragen sommigen zich af of we nog wel op de hoogte hoeven te blijven van de nieuwste CSS-functies. Persoonlijk denk ik dat dit belangrijker is dan ooit. We kunnen niet van LLM's verwachten dat ze moderne CSS gebruiken als hun trainingsdata jaren oud is.
Om de best mogelijke gebruikerservaringen te bouwen, moeten we onze AI-agents kunnen sturen om gebruik te maken van moderne webfuncties. Diepe technische expertise blijft dus ongelooflijk waardevol in het tijdperk van AI-agents.
***
Bronverwijzing Het idee voor dit artikel is geïnspireerd door Declan Chidlow, die eveneens zijn topkeuzes voor Interop 2027 heeft gedeeld.
Groetjes,