M

MLOG

Deutsch

Entdecken Sie die CSS @when-Regel, ein mächtiges Feature für bedingte Stilanwendung basierend auf Browser-Unterstützung, Viewport-Größe und mehr. Lernen Sie mit praktischen Beispielen.

Die CSS @when-Regel: Meisterhafte Anwendung bedingter Stile

Die Welt von CSS entwickelt sich ständig weiter und bietet Entwicklern leistungsfähigere und flexiblere Möglichkeiten, Webseiten zu gestalten. Eine solche Funktion, die an Bedeutung gewinnt, ist die @when-Regel, auch bekannt als CSS Conditional Rules Module Level 1. Diese Regel ermöglicht es Ihnen, CSS-Stile bedingt anzuwenden, basierend auf der Erfüllung bestimmter Bedingungen. Sie ist ein mächtiges Werkzeug für responsives Design, Feature-Erkennung und die Erstellung robusterer und anpassungsfähigerer Stylesheets.

Was ist die CSS @when-Regel?

Die @when-Regel ist eine bedingte At-Regel in CSS, die es Ihnen ermöglicht, Stile zu definieren, die nur dann angewendet werden, wenn bestimmte Bedingungen wahr sind. Stellen Sie sie sich wie eine if-Anweisung für Ihr CSS vor. Im Gegensatz zu Media-Queries, die sich hauptsächlich auf Viewport-Eigenschaften (Bildschirmgröße, Ausrichtung usw.) konzentrieren, bietet @when eine allgemeinere und erweiterbare Möglichkeit, bedingtes Styling zu handhaben. Sie erweitert bestehende bedingte At-Regeln wie @supports und @media.

Wichtige Vorteile der Verwendung von @when

Syntax der @when-Regel

Die grundlegende Syntax der @when-Regel lautet wie folgt: 
@when <condition> {
  /* CSS-Regeln, die angewendet werden, wenn die Bedingung wahr ist */
}

Die <condition> kann jeder gültige boolesche Ausdruck sein, der zu wahr oder falsch ausgewertet wird. Dieser Ausdruck beinhaltet oft:

Praktische Anwendungsbeispiele für @when

Lassen Sie uns einige praktische Beispiele untersuchen, um die Leistungsfähigkeit und Vielseitigkeit der @when-Regel zu veranschaulichen.

1. Responsives Design mit @when und Media-Queries

Der häufigste Anwendungsfall für @when ist das responsive Design, bei dem Sie Stile basierend auf der Bildschirmgröße anpassen. Obwohl Media-Queries dies allein erreichen können, bietet @when einen strukturierteren und lesbareren Ansatz, insbesondere bei komplexen Bedingungen.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

In diesem Beispiel werden die Stile innerhalb des @when-Blocks nur angewendet, wenn die Bildschirmbreite zwischen 768px und 1023px liegt (typische Tablet-Größe). Dies bietet eine klare und prägnante Möglichkeit, Stile für bestimmte Viewport-Bereiche zu definieren.

Hinweis zur Internationalisierung: Responsives Design ist für ein globales Publikum entscheidend. Berücksichtigen Sie unterschiedliche Bildschirmgrößen in verschiedenen Regionen. In einigen Ländern ist beispielsweise die mobile Nutzung höher, was ein Mobile-First-Design noch wichtiger macht.

2. Feature-Erkennung mit @when und @supports

@when kann mit @supports kombiniert werden, um Stile nur dann anzuwenden, wenn eine bestimmte CSS-Funktion vom Browser unterstützt wird. Dies ermöglicht es Ihnen, Ihre Website progressiv zu verbessern, indem Sie Benutzern mit modernen Browsern eine bessere Erfahrung bieten und gleichzeitig die Kompatibilität mit älteren Browsern aufrechterhalten.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback-Stile für Browser, die Grid nicht unterstützen */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Breite für ältere Browser anpassen */
  }
}

Hier verwenden wir @supports, um zu prüfen, ob der Browser das CSS Grid Layout unterstützt. Wenn ja, wenden wir Grid-basierte Stile auf den .container an. Wenn nicht, stellen wir Fallback-Stile mit Flexbox bereit, um sicherzustellen, dass in älteren Browsern ein ähnliches Layout erreicht wird.

Globaler Hinweis zur Barrierefreiheit: Die Feature-Erkennung ist wichtig für die Barrierefreiheit. Älteren Browsern fehlt möglicherweise die Unterstützung für neuere ARIA-Attribute oder semantische HTML5-Elemente. Stellen Sie geeignete Fallbacks bereit, um sicherzustellen, dass der Inhalt zugänglich bleibt.

3. Kombination von Media-Queries und Feature-Abfragen

Die wahre Stärke von @when liegt in seiner Fähigkeit, Media-Queries und Feature-Abfragen zu kombinieren, um komplexere und differenziertere bedingte Stilregeln zu erstellen.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

In diesem Beispiel erhält das .modal-Element nur dann einen verschwommenen Hintergrund, wenn die Bildschirmbreite mindestens 768px beträgt und der Browser die backdrop-filter-Eigenschaft unterstützt. Dies ermöglicht es Ihnen, visuell ansprechende Effekte in modernen Browsern zu erstellen und gleichzeitig potenzielle Leistungsprobleme oder Darstellungsfehler in älteren zu vermeiden.

4. Styling basierend auf Custom Properties (CSS-Variablen)

@when kann auch in Verbindung mit CSS Custom Properties (auch als CSS-Variablen bekannt) verwendet werden, um dynamisches und zustandsbasiertes Styling zu erstellen. Sie können JavaScript verwenden, um den Wert einer Custom Property zu aktualisieren, und dann @when nutzen, um je nach diesem Wert unterschiedliche Stile anzuwenden.

Definieren Sie zuerst eine Custom Property:

:root {
  --theme-color: #007bff; /* Standard-Themenfarbe */
  --is-dark-mode: false;
}

Verwenden Sie dann @when, um Stile basierend auf dem Wert der Custom Property anzuwenden:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Verwenden Sie schließlich JavaScript, um den Wert der --is-dark-mode Custom Property umzuschalten:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Dies ermöglicht es Benutzern, zwischen hellen und dunklen Themes zu wechseln, wobei das CSS basierend auf dem Wert der Custom Property dynamisch aktualisiert wird. Beachten Sie, dass der direkte Vergleich von CSS-Variablen in `@when` möglicherweise nicht von allen Browsern universell unterstützt wird. Stattdessen müssen Sie möglicherweise einen Workaround mit einer Media-Query verwenden, die auf einen Wert ungleich Null prüft: 

@when ( --is-dark-mode > 0 ) { ... }

Stellen Sie jedoch sicher, dass die Custom Property einen numerischen Wert hat, damit dies korrekt funktioniert.

Hinweis zur Barrierefreiheit: Das Anbieten alternativer Themes (z. B. Dark Mode) ist für die Barrierefreiheit entscheidend. Benutzer mit Sehbehinderungen können von kontrastreichen Themes profitieren. Stellen Sie sicher, dass Ihr Theme-Wechsler per Tastatur und Screenreader zugänglich ist.

5. Styling basierend auf Datenattributen

Sie können @when auch mit Datenattributen verwenden, um Elemente basierend auf ihren Datenwerten zu gestalten. Dies kann nützlich sein, um dynamische Oberflächen zu erstellen, bei denen Elemente ihr Aussehen je nach Benutzerinteraktion oder Datenaktualisierungen ändern.

Nehmen wir zum Beispiel an, Sie haben eine Liste von Aufgaben, und jede Aufgabe hat ein data-status-Attribut, das ihren Status anzeigt (z. B. „todo“, „in-progress“, „completed“). Sie können @when verwenden, um jede Aufgabe je nach ihrem Status unterschiedlich zu gestalten.

[data-status="todo"] {
  /* Standardstile für Todo-Aufgaben */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Hinweis: Die Unterstützung für die attribute()-Testbedingung ist möglicherweise in allen Browsern derzeit eingeschränkt oder nicht vollständig implementiert. Testen Sie immer gründlich.

Browser-Kompatibilität und Polyfills

Stand Ende 2024 befindet sich die Browser-Unterstützung für die @when-Regel noch in der Entwicklung. Während viele moderne Browser die Kernfunktionalität unterstützen, tun dies einige ältere Browser möglicherweise nicht. Daher ist es entscheidend, Kompatibilitätstabellen zu prüfen und bei Bedarf geeignete Fallbacks oder Polyfills zu verwenden.

Konsultieren Sie immer Ressourcen wie Can I use..., um den aktuellen Stand der Browser-Unterstützung für @when und verwandte Funktionen zu überprüfen.

Best Practices für die Verwendung von @when

Fazit

Die @when-Regel ist eine leistungsstarke Ergänzung des CSS-Werkzeugkastens und bietet Entwicklern eine flexiblere und ausdrucksstärkere Möglichkeit, Stile bedingt anzuwenden. Durch die Kombination mit Media-Queries, Feature-Abfragen und CSS Custom Properties können Sie robustere, anpassungsfähigere und wartbarere Stylesheets erstellen. Obwohl die Browser-Unterstützung sich noch entwickelt, ist @when eine Funktion, die es wert ist, erkundet und in Ihren modernen Webentwicklungs-Workflow integriert zu werden.

Während sich das Web weiterentwickelt, wird die Beherrschung von Funktionen wie @when unerlässlich sein, um ansprechende, zugängliche und performante Erlebnisse für Benutzer auf der ganzen Welt zu schaffen. Nutzen Sie die Kraft des bedingten Stylings und erschließen Sie neue Möglichkeiten in Ihrer CSS-Entwicklung.