CSS heeft zich in de afgelopen jaren enorm ontwikkeld en biedt tegenwoordig krachtige tools om aantrekkelijke, herbruikbare en responsieve componenten te bouwen. Veel problemen die ik vroeger alleen met JavaScript of preprocessors zoals Sass kon oplossen, kunnen nu in native CSS. Hier zijn een aantal nieuwe functies die je als ontwikkelaar zeker niet mag missen.
1. Container Queries
In baseline sinds: 2023
Iets waar ik vaker tegenaan ben gelopen, is dat het lastig kan zijn om een generiek component responsive te maken. Denk bijvoorbeeld aan een gebruikerskaart: afhankelijk van waar je deze plaatst, wil je dat de kaart een halve pagina of een klein blok beslaat.
Hier bieden Container Queries een uitkomst. Container Queries stellen je in staat om een parent-element in je HTML aan te wijzen als container, waarmee je vervolgens media query-achtige CSS kunt schrijven.
Het toewijzen doe je via:
.container-element {
container-type: inline-size;
container-name: usercard;
}
Hierbij is de container-name optioneel en alleen nodig als je meerdere containers door elkaar wilt gebruiken.
Voor container-type kun je de volgende waardes gebruiken:
- size - Staat container queries op breedte en hoogte toe
- inline-size - Staat container queries toe op breedte
- normal - Staat geen container queries toe
Vervolgens kun je de container op child-elementen op de volgende manier gebruiken:
Voorbeeld:
@container (width <= 300px) {
.card {
font-size: 1.2rem;
}
}
Zie https://stackblitz.com/edit/cloudrepublic-container-queries?file=styles.css voor een compleet voorbeeld
2. Container Units
In baseline sinds: 2023
Container Query Units zijn een logische uitbreiding op Container Queries en maken het mogelijk om relatieve eenheden te gebruiken die afhankelijk zijn van de grootte van een container. Dit biedt een nog nauwkeurigere controle over responsieve ontwerpen, omdat je stijlen kunt baseren op de container zelf, in plaats van op de viewport.
Met eenheden zoals cqw (container width), cqh (container height), cqi (inline size), en cqb (block size) kun je eenvoudig flexibele stijlen creëren.
Voorbeeld:
.container {
padding: 2cqi;
}
.card {
font-size: 1cqh;
border-radius: 0.5cqw;
}
Hier worden de padding, font-grootte en border-radius allemaal dynamisch aangepast op basis van de containerafmetingen, wat vooral handig is voor complexe lay-outs en schaalbare componenten.
Met Container Query Units kun je je CSS verder abstraheren en je stijlen nog flexibeler maken zonder onnodige hardcoding.
Zie https://stackblitz.com/edit/cloudrepublic-container-query-units?file=styles.css voor een compleet voorbeeld
3. Relative color syntax
In baseline sinds: 2024
Ik merk vaak dat het consistent houden van kleurenschema’s over een hele website een uitdaging kan zijn, vooral bij dynamische ontwerpen. De relative color syntax biedt een krachtige oplossing door het mogelijk te maken om kleuren direct af te leiden van bestaande waarden.
Met de relative color syntax kun je bijvoorbeeld tinten, verzadiging of lichtheid aanpassen op basis van een bestaande kleur, zonder nieuwe kleurcodes te hoeven definiëren. Dit maakt het eenvoudig om thema’s en variaties consistent te houden.
Voorbeeld:
:root {
--base-color: rgb(100, 150, 200);
--darker-shade: hsl(from var(--base-color) h s calc(l * 0.8));
--lighter-shade: hsl(from var(--base-color) h s calc(l * 1.2));
}
button {
background-color: var(--base-color);
border-color: var(--darker-shade);
color: var(--lighter-shade);
}
Dit maakt het ontwerpen van kleurenschema’s niet alleen efficiënter, maar ook veel flexibeler. Relative color syntax is ideaal voor het creëren van dynamische thema’s die eenvoudig kunnen worden aangepast.
Zie https://stackblitz.com/edit/cloudrepublic-relative-color-syntax?file=styles.css voor een compleet voorbeeld
4. CSS Nesting
In baseline sinds: 2023
De grootste reden dat ik eigenlijk altijd sass gebruik is de mogelijk om css te nesten. Dit maakt het zo veel simpeler om complexere componenten zoals een layout van een pagina overzichtelijk te houden.
Met CSS Nesting kun je stijlen hiërarchisch organiseren binnen een selector. Hierdoor kun je contextueel gerichte stijlen schrijven die nauwkeuriger aansluiten bij de structuur van je HTML.
Voorbeeld:
.article {
color: black;
h2 {
font-size: 2rem;
}
p {
line-height: 1.6;
}
& .highlight {
background-color: yellow;
}
}
Deze benadering bespaart tijd, reduceert herhaling en zorgt ervoor dat stijlen overzichtelijk blijven, zelfs in grotere projecten.
Zie https://stackblitz.com/edit/cloudrepublic-css-nesting?file=styles.css voor een compleet voorbeeld
Conclusie
CSS blijft zich ontwikkelen en biedt steeds meer mogelijkheden om efficiënter en overzichtelijker te werken. Met functies zoals Container Queries, Relative Color Syntax en CSS Nesting krijgen ontwikkelaars meer controle en flexibiliteit bij het ontwerpen van moderne websites. Door deze tools te gebruiken, kun je niet alleen je code vereenvoudigen, maar ook je workflow verbeteren. Probeer ze uit en ontdek hoe ze jouw projecten naar een hoger niveau kunnen tillen.