Innovation für das: Conditional CSS mit if()!

Als Content Creator, SEO- und Frontend-Experte freue ich mich über eine spannende Neuerungen, die gerade im Chrome Origin Trial getestet werden:

👉 Was ist if() in CSS?

Mit der neuen if()-Funktion lassen sich Styles konditional anwenden, ähnlich wie in Programmiersprachen. Je nach Media Query oder Bedingung erhält ein Element automatisch die passende Eigenschaft – Schluss mit verschachtelten Media Queries!

Für mich als Frontend-Entwickler ist das eine echte Erleichterung: Klarerer Code, weniger Redundanz, responsive Designs werden wartbarer und smarter.

Praxisbeispiel:

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

Hier wird die Button-Breite je nach Eingabegerät dynamisch gesetzt:

• 30px bei Maus & Co
• 44px für Touch – optimal für Accessibility & UX!

Mehr dazu im Chrome Developer Blog