Wie konsistent ist die Browserunterstützung für verschachtelte @media-Regeln in CSS?

Verschachtelung von @media-Regeln in CSS: Browserunterstützung und Kompatibilität

Frage:

Wie Ist die Unterstützung für die Verschachtelung von @media-Regeln in verschiedenen Browsern konsistent? Warum wird der bereitgestellte Code in verschiedenen Browsern unterschiedlich angezeigt und was ist der Grund für diese Inkonsistenz? Kann dies gelöst werden, um ein einheitliches Styling zu erreichen?

Antwort:

Browser-Unterstützung

Das Verschachteln von @media-Regeln war nicht möglich gültige Praxis in CSS2.1, weshalb die Unterstützung dieser Funktion von Browser zu Browser erheblich variiert. Mit der Einführung von CSS Conditional 3 wurde das Verschachteln von @media-Regeln jedoch zu einer unterstützten Funktion in allen modernen Browsern, einschließlich Firefox, Safari, Chrome und Microsoft Edge.

Verschachtelungskompatibilität

Der in der Frage bereitgestellte Code beinhaltet das Verschachteln von @media-Regeln. Während @media-Regeln in CSS3 innerhalb anderer @media-Regeln verschachtelt werden können, war diese Verschachtelung in CSS2.1 nicht zulässig. Folglich verarbeiten Browser, die noch CSS2.1 befolgen, wie z. B. ältere Versionen von Internet Explorer, verschachtelte @media-Regeln nicht korrekt.

Grund für Inkonsistenz

Firefox hat die neuere CSS Conditional 3-Spezifikation implementiert, die es ihm ermöglicht, verschachtelte @media-Regeln wie vorgesehen zu interpretieren und anzuwenden. Andere Browser wie Opera, Chrome und IE9 hingegen folgen der älteren CSS2.1-Spezifikation, die keine verschachtelten @media-Regeln unterstützt. Infolgedessen greifen sie auf die Anwendung der in der innersten @media-Regel definierten Stile zurück, was zu Diskrepanzen im Stil führt.

Konsistenz erreichen

Um einen konsistenten Stil über alle Bereiche hinweg sicherzustellen Bei allen Browsern wird empfohlen, die verschachtelten @media-Regeln zu entfernen. Dies kann durch Entfernen der zweiten @media-Regel innerhalb der ersten @media-Regel erreicht werden:

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

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

Nach dem Entfernen der verschachtelten Regel sollte der Stil in allen modernen Browsern, die CSS Conditional 3 und CSS2 unterstützen, konsistent gelten. 1.

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