Funktionieren verschachtelte CSS-@media-Regeln konsistent in allen Browsern?

Verschachtelung von @media-Regeln in CSS, überarbeitet

Die ursprüngliche Frage untersuchte die inkonsistente Darstellung eines CSS-Codeausschnitts mit verschachtelten @media-Regeln in verschiedene Browser. Hier ist eine aktualisierte Analyse basierend auf dem aktuellen Stand der Browserunterstützung:

Verschachtelte @media-Regeln in CSS3

Gemäß dem CSS-Conditional-Rules-Modul in CSS3, verschachtelte @media Regeln werden jetzt vollständig unterstützt. Die folgende Syntax ist gültig:

@media print {
  #navigation { display: none }
  @media (max-width: 12cm) {
    .note { float: none }
  }
}

Browser-Unterstützung

Moderne Browser, einschließlich Firefox, Safari, Chrome, Microsoft Edge und Opera, unterstützen jetzt verschachtelte @media Regeln wie in CSS Conditional 3 definiert. Internet Explorer unterstützt diese Funktion nicht.

Das Original Problem

Der Code in der ursprünglichen Frage zeigte verschachtelte @media-Regeln, die in allen Browsern nicht konsistent funktionierten. Dies lag an der fehlenden Unterstützung für die Verschachtelung in CSS2.1, der Spezifikation, die damals von älteren Browserversionen unterstützt wurde.

Auflösung

Für Browser, die dies tun Wenn verschachtelte @media-Regeln nicht unterstützt werden, besteht eine Problemumgehung darin, die Verschachtelung zu entfernen und mehrere @media-Regeln zu schreiben separat:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}

@import mit Medienbedingungen

Der Grund, warum die @import-Anweisung mit einer Medienbedingung konsistent funktionierte, lag darin, dass sie ein Stylesheet bedingt anwendet, nicht weil es die Verschachtelung innerhalb von @media-Regeln ermöglicht.

Fazit

Verschachtelt @media-Regeln werden mittlerweile gemäß der CSS Conditional 3-Spezifikation in modernen Browsern weitgehend unterstützt. Für ältere Browser, die diese Funktion nicht unterstützen, besteht eine einfache Problemumgehung darin, separate @media-Regeln zu verwenden.

Das obige ist der detaillierte Inhalt vonFunktionieren verschachtelte CSS-@media-Regeln konsistent in allen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!