Wat er speelt in
interface-ontwerp
dit seizoen
Front-end design beweegt snel. Nieuwe browserstandaarden, verschuivende ontwerpconventies en veranderende gebruikersverwachtingen zorgen er samen voor dat wat vorig jaar gangbaar was, nu al verouderd aanvoelt. Savourdeals volgt deze ontwikkelingen en brengt ze samen op één plek.
Hoe wij nieuws selecteren
CSS Container Queries veranderden mijn aanpak van componentontwerp fundamenteel. Niet als hype, maar als een oplossing voor een probleem dat ik al jaren om heen werkte.
Femke Adriaanse
Interface-ontwerper, Utrecht
Wat browsers nu kunnen was drie jaar geleden nog voorbehouden aan JavaScript-frameworks
Nesting zonder preprocessor: wat het in de praktijk betekent
Native CSS-nesting is nu beschikbaar in alle grote browsers zonder prefix. Voor projecten die Sass of Less gebruikten puur voor nesting, vervalt daarmee een belangrijk argument voor die toolchain. De syntaxis wijkt op kleine punten af van wat Sass-gebruikers gewend zijn, maar de migratiedrempel is laag. Bestaande stylesheets vereisen geen volledige herschrijving.
Joris Tempelaar
Technisch redacteur - CSS & browserstandaarden
View Transitions API: meer dan een animatietruc
Paginaovergangen die het navigatiegevoel veranderen
De View Transitions API maakt vloeiende overgangen tussen pagina's mogelijk zonder dat een Single Page Application-architectuur vereist is. Chrome ondersteunt het al in multi-page context, Firefox en Safari volgen. Voor redactionele sites en portfolioprojecten biedt dit een merkbaar verschil in hoe navigatie aanvoelt - zonder de complexiteit van een volledig framework.
Hover om meer te zien - de API werkt ook op afzonderlijke elementen binnen dezelfde pagina, niet alleen bij paginanavigatie.
Toegankelijkheid en animatie: de spanning blijft
Nieuwe animatiemogelijkheden brengen ook
verantwoordelijkheid mee. Gebruikers met vestibulaire
aandoeningen kunnen last hebben van bewegingseffecten.
De prefers-reduced-motion-mediaquery
bestaat al jaren, maar wordt nog steeds niet consequent
toegepast. Browserondersteuning voor @media
(prefers-reduced-motion) is volledig - de
implementatiegap zit bij ontwikkelaars, niet bij de
specificatie.
Anchor Positioning nadert stabiliteit
CSS Anchor Positioning lost een langdurig probleem op: tooltips, dropdowns en popovers die zich correct positioneren ten opzichte van hun trigger-element, zonder JavaScript-berekeningen. De specificatie is nog in ontwikkeling, maar Chrome heeft een werkende implementatie. Polyfills zijn beschikbaar voor vroege adoptie in productieprojecten.
Interop 2025: wat browsers samen aanpakken
Browser-fabrikanten werken via het Interop-initiatief aan gecoördineerde implementatie van specificaties. Voor 2025 staan onder andere scroll-gedrag, formulierelementen en CSS-eigenschappen op de agenda. Het initiatief vermindert de noodzaak van browser-specifieke workarounds, al vraagt volledige pariteit nog tijd.
Design tokens: van concept naar standaard
De W3C Design Tokens Community Group werkt aan een gestandaardiseerd formaat voor het uitwisselen van ontwerptokens tussen tools. Figma, Style Dictionary en andere tools bewegen richting compatibiliteit. Voor teams die design en code willen synchroniseren, is dit een ontwikkeling die de komende twee jaar concrete gevolgen heeft voor hun toolchain.