Wie funktionieren verschachtelte @media-Regeln in CSS und welche Browserunterstützung gibt es?

Verschachteln von @media-Regeln in CSS

Bei der Arbeit mit CSS-Medienabfragen können Entwickler beim Versuch, @media-Regeln zu verschachteln, auf Inkonsistenzen zwischen den Browsern stoßen innerhalb eines bedingten @import. Dieser Artikel befasst sich mit den Nuancen der Verschachtelung von @media-Regeln, untersucht die Browserunterstützung und die zugrunde liegenden Gründe für unterschiedliche Verhaltensweisen.

Browserunterstützung

Historisch gesehen wurde die Unterstützung für die Verschachtelung von @ Medienregeln waren aufgrund des Fehlens einer solchen Funktion in CSS2.1 eingeschränkt. Mit der Einführung des CSS3-Moduls „Conditional Rules“ wurde jedoch die Möglichkeit eingeführt, @media-Regeln zu verschachteln, was eine detailliertere Kontrolle über Stile basierend auf Medienbedingungen ermöglicht.

Derzeit sind alle modernen Browser, einschließlich Firefox, Safari, Chrome (und seine Derivate) und Microsoft Edge unterstützen die Verschachtelung von @media-Regeln, wie in CSS Conditional 3 beschrieben. Dies bedeutet, dass der betreffende Code mit den verschachtelten @media at-Regeln jetzt überall korrekt funktionieren sollte, mit Ausnahme von Internet Explorer (der sich nicht mehr in der Entwicklung befindet).

Klärung der Terminologie

Es ist wichtig zu beachten, dass sich der Begriff „@media-Regeln“ auf den gesamten Codeblock bezieht bestehend aus @media, der Medienabfrage und den in den geschweiften Klammern verschachtelten Regeln. „@media query“ bezieht sich speziell auf den Medienbedingungsteil der Regel.

Verschachtelung vs. bedingter @import

Verwirrenderweise können Medienabfragen auch in @ verwendet werden. Importregeln, was Fragen zu deren Interaktion aufwirft. Der wichtigste zu beachtende Unterschied besteht darin, dass @import mit einer Medienabfrage die Anwendung des importierten Stylesheets einschränkt, während @media-Regeln die Anwendung von Stilen innerhalb eines Stylesheets einschränken.

Im bereitgestellten Beispiel ist das @media Die Regel innerhalb des importierten Stylesheets funktioniert in Firefox korrekt, trotz der Verwendung einer Medienabfrage in der @import-Anweisung. Dies liegt daran, dass es sich um zwei separate Mechanismen zum bedingten Anwenden von Stilen handelt.

Konsistenz erzwingen

Um konsistentes Verhalten über alle Browser hinweg sicherzustellen, können Entwickler entweder die bedingte @import-Anweisung verwenden oder Entfernen Sie die Verschachtelung der @media-Regeln. Die letztere Option wird empfohlen, da beide Regeln im Beispiel Medienbedingungen mit minimaler Breite verwenden.

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