CSS-voorwaarden met de nieuwe functie if()

Una Kravets

Gepubliceerd: 1 juli 2025

Vanaf Chrome 137 kun je CSS-inlinevoorwaarden uitproberen met de functie if(). if() biedt een schonere ontwikkelaarsinterface voor dynamische stijlen zoals stijlquery's en mediaquery's, met enkele belangrijke verschillen. Meer informatie hierover vind je in dit bericht.

De CSS-functie if() werkt met een reeks voorwaarde/waarde-paren die zo zijn gestructureerd:

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

U kunt een else-statement verstrekken dat wordt gebruikt als aan geen van de andere voorwaarden wordt voldaan:

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

Op dit moment werkt if() met 3 verschillende typen zoekopdrachten:

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

We geven een paar voorbeelden om dit in context te plaatsen:

Demo: Inline mediaquery's

if() is een geweldige manier om inline mediaquery's in uw stijlen op te nemen. Je kunt bijvoorbeeld de themavoorkeur van een gebruiker (licht of donker) checken of inline mediaquery's uitvoeren voor de breedte van het viewport. Het volgende voorbeeld toont de mediaquery voor aanwijsapparaten. De standaardgrootte van de knop is 30 px op een apparaat met een fijne aanwijzer, zoals een muis. Voor touchscreenapparaten, zoals apparaten met een grove aanwijzer, is de grootte van de knop de minimaal aanbevolen 44 px voor een geschikte aanraakafstand voor makkelijkere toegang.

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

De voorgaande code geeft hetzelfde resultaat als de volgende mediaquery:

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

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

Als je de indeling if() gebruikt, kun je de logica inline hebben zonder dat je de stijllogica op 2 verschillende plaatsen nodig hebt.

Demo: Inline supportvragen

Je kunt if() ook gebruiken om inline supportvragen te maken. Als je bijvoorbeeld wilt checken of een brede kleuromvang wordt ondersteund, zoals OKLCH, gebruik je het volgende:

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";
    );
  }
}

Als de browser het kleurruimte oklch ondersteunt, ziet de gebruiker met deze code de levendigere kleur en krijgt die ook het bericht 'Je browser ondersteunt OKLCH' in ::after pseudocontent.

Ga naar oklch.com voor meer informatie en het verschil tussen rgb en geavanceerdere kleurruimten.

Demo: UI-status visualiseren

Je kunt ook if() gebruiken voor op status gebaseerde stijlen. Je kunt bijvoorbeeld voortgangskaarten opmaken op basis van hun UI-status (in behandeling of voltooid). Sla de status rechtstreeks op in een gegevenskenmerk of een aangepaste eigenschap en pas de stijlen inline toe op de eigenschap met if().

<div class="card" data-status="complete">
  ...
</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 zich richt rechtstreeks opmaken. U heeft geen bovenliggend element nodig, zoals bij CSS-stijlquery's.

Deze demo toont een basisvoorbeeld van hoe je if() kunt gebruiken om een nieuwe architectuurbenadering voor CSS te ondersteunen. Een voordeel van het gebruik van aangepaste CSS-property's ten opzichte van klassen is dat u ze makkelijk kunt updaten in CSS. Je kunt ze bijvoorbeeld updaten met mediaquery's of pseudostaten zoals :hover.

Volgende stap

De toevoeging van if() biedt CSS-ontwikkelaars een nieuwe architecturale mogelijkheid. Naarmate technologieën zoals stijlquery's zich verder ontwikkelen, is het waarschijnlijk mogelijk om bereikquery's te gebruiken in if()-functies. Deze zijn ook nuttig in combinatie met het aankomende voorstel voor aangepaste functies (CSS @function).

Ga voor meer informatie over deze functies naar:

• Video van 3 minuten met een rondleiding door demo 3
• Artikel van Lea Verou