CSS Day 2026

CSS Day 2026 in Amsterdam is twee weken geleden en ik krijg het nog steeds niet uit mijn hoofd. Hier de technieken die zijn blijven hangen, de dingen die ik echt wil gebruiken.

Kleur

• Werk in oklch() voor voorspelbare, perceptueel gelijkmatige kleuren. Hex-waarden mengen en lichter maken is waarom je steeds modder krijgt.
• Bouw paletten generiek en gebruik chroma clipping om ze in gamut te houden in plaats van handgekozen hex-waarden.

Tekstgrootte en gebruikersvoorkeuren

• Gebruik rem, maar zet zelf nooit een root rem. De browservoorkeur bezit die, en als je hem overschrijft breek je de OS-tekstgrootte van de gebruiker (die ongeveer een derde van de telefoongebruikers aanpast).
• Nieuwe env-waarden leggen de OS-tekstschaling bloot.
• Doe fluid type en spacing goed. utopia.fyi is de referentie.
• Behandel prefers-* (dark, light, contrast, reduced motion) als instructies, niet als randgevallen.

CSS dat JavaScript vervangt

• Geavanceerde attr(), style queries en if() laten CSS waarden lezen en interpreteren. JS haalt alleen data op en geeft het aan CSS.
• popover, commandfor, anchor positioning met position-try en flip-regels, calc-size() en appearance: base-select vervangen de meeste menu-, tooltip- en custom-select-libraries.

Motion

• View transitions: morphen tussen elementen met view-transition-name, animeren tussen pagina's met @view-transition, zonder framework.
• Scroll-state queries laten een element reageren op of het vastzit of gescrold is. Dit vervangt een hoop hakkelige scroll-JavaScript.

Theming

• color-scheme, light-dark() voor specifieke elementen, en system colors geven je licht en donker zonder override-soep.

Performance

• content-visibility slaat het renderen van offscreen content over tot het nodig is. Weinig moeite, veel impact op lange pagina's en zware canvassen.

Het bookmarken waard

• defensivecss.dev
• htmhell.dev
• accessibility-cookbook.com
• utopia.fyi
• CSS Working Group-repo

Voor de volledige sprekerslijst en de talks, kijk op cssday.nl.