CSS-voorwaarden met de nieuwe if()-functie

Una Kravets

Gepubliceerd: 1 juli 2025

Vanuit Chrome 137 kunt u CSS inline-voorwaarden uitproberen met de if() functie. if() zorgt voor een overzichtelijkere ontwikkelaarsinterface voor dynamische stijlen zoals stijlquery's en mediaquery's, met enkele belangrijke verschillen. Deze kunt u in dit bericht lezen.

De CSS if() -functie werkt met een reeks voorwaarde-waardeparen, die als volgt zijn gestructureerd:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

U kunt een else instructie opgeven, die wordt gebruikt als aan geen van de andere voorwaarden is voldaan:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Op dit moment werkt if() met drie verschillende typen query's:

• style() : Stijlquery's
• media() : Media query's
• supports() : Ondersteunt query's

Laten we dit in context plaatsen met enkele voorbeelden:

Demo: Inline media queries

Het gebruik van if() is een geweldige manier om inline media queries in uw stijlen op te nemen. U kunt bijvoorbeeld de themavoorkeur van een gebruiker controleren (licht of donker) of inline media queries uitvoeren voor de viewportbreedte. Het volgende voorbeeld toont de media query voor pointer devices. De standaardgrootte van de knop is 30 px op een apparaat met een fijne pointer, zoals een muis, maar voor touchscreen-apparaten, zoals apparaten met een grove pointer, is de aanbevolen minimale grootte van de knop 44 px voor een geschikte aanraakafstand voor gemakkelijkere toegang.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

De voorgaande code geeft hetzelfde resultaat als de volgende media query:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

Met de if() -indeling kunt u de logica inline plaatsen, zonder dat de stylinglogica op twee verschillende plaatsen nodig is.

Demo: Inline-ondersteuningsvragen

Een andere manier om if() te gebruiken is door inline ondersteuningsquery's te maken. Om bijvoorbeeld te controleren op ondersteuning voor brede kleurgamma's, zoals OKLCH, kunt u het volgende gebruiken:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Met deze code zal de gebruiker, als de browser de oklch -kleurruimte ondersteunt, de levendigere kleur zien en ook de melding "Uw browser ondersteunt OKLCH" in ::after pseudo-inhoud krijgen.

Voor meer informatie en om het verschil te zien tussen RGB en meer geavanceerde kleurruimten, kunt u de kleurenkiezer en de bronnen op oklch.com raadplegen.

Demo: Visualiseren van UI-status

Je kunt if() ook gebruiken voor statusgebaseerde styling. Bijvoorbeeld om voortgangskaarten te stylen op basis van hun gebruikersinterfacestatus (in behandeling of voltooid). Sla de status rechtstreeks op in een data-attribuut of een aangepaste eigenschap en pas vervolgens stijlen inline toe op de eigenschap met behulp van if() .

<div class="card" data-status=>"c<ompl>ete"
  ...
/div

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Met style() in een if() functie kunt u het element waarop u mikt direct stylen. Er is geen bovenliggend element nodig zoals dat bij CSS-stijlquery's wel nodig is.

Deze demo toont een basisvoorbeeld van hoe je if() kunt gebruiken om een ​​nieuwe architectuurbenadering van CSS te ondersteunen. Een voordeel van het gebruik van aangepaste CSS-eigenschappen ten opzichte van klassen is het gemak waarmee je ze in CSS kunt bijwerken. Ze kunnen bijvoorbeeld worden bijgewerkt met mediaquery's of pseudo-states zoals :hover .

Wat volgt er?

De toevoeging van if() biedt CSS-ontwikkelaars een nieuwe architectuurmogelijkheid. Naarmate technologieën zoals stijlquery's zich ontwikkelen, zal het waarschijnlijk mogelijk zijn om binnen if() functies bereikquery's te gebruiken. Bovendien zullen ze nuttig zijn in combinatie met het aankomende voorstel voor aangepaste functies (CSS @function ).

Voor meer informatie over deze functies kunt u het volgende bekijken:

• 3 minuten durende video-walkthrough van Demo #3
• Artikel van Lea Verou