CSS/Funktionen/if()

Browserunterstützung
caniuse.com

Die CSS-Funktion if() ermöglicht es, je nach Ergebnis einer Bedingungsprüfung unterschiedliche Werte für eine Eigenschaft festzulegen.

Die Prüfung kann auf einer Stilabfrage, einer Medienabfrage oder einer Funktionsabfrage basieren

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

Sie können eine else-Anweisung bereitstellen, die verwendet wird, wenn keine der anderen Bedingungen erfüllt ist:

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

Beispiel

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

Diese Fallunterscheidung ergibt das gleiche Ergebnis wie dieser umständlichere Code:

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

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

Siehe auch

W3C: if() function
MDN: if() (MDN)
CSS conditionals with the new if() function von Una Kravets (developer.chrome.com)
Browser-Support: caniuse.com

CSS-Funktionen