Na jaren van frustratie bij ontwikkelaars en vragen op online fora komt het er dan toch van; CSS krijgt een if()-functie om bepaalde styling enkel uit te voeren als aan een conditie wordt voldaan. Voor het eerst kunnen ontwikkelaars logische beslissingen direct in stylesheets maken, zonder aparte codeblocks. Dit opent hele nieuwe mogelijkheden voor webdesigners.
CSS is een volwassen styling taal die verantwoordelijk is hoe webpagina’s eruit zien. Welke kleuren er gebruikt worden, hoe breed een blok, tabel of afbeelding is of mag zijn. Doordat CSS inmiddels al jarenlang bestaat en op veel fronten is doorontwikkeld verschijnen er niet zo vaak updates meer. Eens per jaar publiceert het W3C een update met de laatste ontwikkelingen. De editie van 2025 verscheen vorige maand. Het is nu aan de software-ontwikkelaars achter de populaire browsers om die updates te implementeren.
Jarenlang gemiste if-functionaliteit nu beschikbaar
Jaren hebben ontwikkelaars en designers op online forums gevraagd of CSS ondersteuning biedt voor if() en else() statements. Er waren weliswaar workarounds beschikbaar, maar goed werkt het niet. Dat gaat nu veranderen met de laatste update, want eindelijk heeft het W3C de if()- en else()-functie toegevoegd aan de CSS-standaard.
De functie bouwt voort op eerder werk dat ontwikkelaars in staat stelde om variabelen te defineren.
Hoe werkt de if()-functie?
De if()-functie is gebaseerd op de JavaScript if…else functie. Ontwikkelaars kunnen de if en else vergelijken met de waarde in een variabelen. De functie accepteert een geordende lijst met statements, elk bestaande uit een conditie of variabelen en een waarde, gescheiden door een dubbele punt.
De conditie kan gebaseerd zijn op een style query, media query of feature query. De syntax bestaat uit een if-test of het else keyword, gevolgd door de gewenste waardes.
Enkele voorbeelden:
//enkele if achtergrondkleur pagina
body {
background-color: if(style(--scheme: dark): #eeeeee;)}
//uitlijning van website content
div#content {
margin: if(media(width > 700px): 0 auto;)}
//meerdere ifs om achtergrond in te stellen
div {
background: if(
style(--scheme: ice): linear-gradient(#caf0f8, white, #caf0f8);
style(--scheme: fire): linear-gradient(#ffc971, white, #ffc971);
else: none;
);
}De if is dus op vele manieren toepasbaar in een stylesheet en dat biedt een hele hoop nieuwe mogelijkheden. Al moet men nog wel even geduld hebben.
Browsersupport nog beperkt
De if()-functie wordt momenteel enkel ondersteunt door Chromium en alle browsers die daarop gebaseerd zijn. Meest belangrijke zijn Chrome en Edge. Ondersteuning in Safari en Firefox is nog in ontwikkeling en het is onduidelijk hoelang dat nog gaat duren. Op op smartphones is de ondersteuning beperkt, enkel Chrome voor Android biedt ondersteuning.
Ontwikkelaars kunnnen hierdoor nog niet volledig aan de slag met de if()-functie. Hopelijk komt daar snel verandering in.
Lees ook: Welke browser is eigenlijk het veiligst?