Imbrication des règles @media en CSS
La prise en charge semble être différente d'un navigateur à l'autre.
Vérifiez le lien
Firefox: noir avec texte blanc.
Opera, Chrome, IE9: bleu avec texte noir.
Laquelle est correcte et comment pourrais-je la rendre cohérente?
Le code
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
La
Chose intéressante, il semble que l'imbrication de requêtes multimédias dans un @import Conditionnel semble fonctionner.
par exemple:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css
@import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
Pour ceux qui recherchent simplement une réponse à "Quels navigateurs prennent en charge l'imbrication des règles @media?", La réponse courte est que tous les navigateurs modernes, y compris Firefox, Safari, Chrome (et ses dérivés) et Microsoft Edge prennent désormais en charge l'imbrication de @media règles at comme décrit dans CSS conditionnel . Le code de la question avec le @media imbriqué dans -les règles devraient maintenant fonctionner correctement partout, à l'exception d'Internet Explorer (qui est n'est plus mis à jour avec de nouvelles fonctionnalités , ce qui signifie qu'aucune version de IE ne le supportera jamais) fonctionnalité).
Cette fonctionnalité n'existait pas dans CSS2.1 , car il n'existait à l'époque que des types de médias que vous pouviez simplement regrouper avec une virgule, ce qui explique pourquoi le support de cette fonctionnalité était très faible au moment où cette question a été posée pour la première fois. a demandé.
Ce qui suit est une analyse de la question originale avec ces limitations historiques à l'esprit.
Il y a un peu de confusion terminologique qui doit être clarifiée afin que nous puissions comprendre ce qui se passe exactement.
Le code que vous avez fait référence aux règles @media, Et non pas tant aux requêtes multimédias - la requête multimédia elle-même est le composant qui suit le jeton @media, Tandis que la règle est le bloc de code complet composé de @media, La requête multimédia et les règles imbriquées dans son ensemble d'accolades.
Cela peut provoquer de la confusion parmi de nombreuses personnes lorsqu'il s'agit d'utiliser des requêtes multimédias en CSS, ainsi que dans votre cas spécifique où une règle @media Dans une feuille de style importée fonctionne correctement même lorsque le @import Est accompagné d'un autre requête média. Notez que les requêtes multimédias peuvent se produire dans les règles @media Et @import. C'est la même chose, mais ils sont utilisés pour appliquer de manière restrictive les règles de style de différentes manières.
Maintenant, le problème réel ici est que les règles imbriquées @media Sont non valides dans CSS2.1 parce que vous n'êtes pas autorisé à imbriquer tout at-rules dans les règles de @media. Cependant, les choses semblent assez différentes dans CSS3. À savoir, le module Règles conditionnelles indique très clairement que les règles @media peuvent être imbriquées, fournissant même un exemple :
Par exemple, avec cet ensemble de règles imbriquées:
@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }la condition de la règle marquée (1) est vraie pour les supports d'impression, et la condition de la règle marquée (2) est vraie lorsque la largeur de la zone d'affichage (qui pour les supports d'impression est la zone de page) est inférieure ou égale à 12cm. Ainsi, la règle '#navigation {display: none}' s'applique chaque fois que cette feuille de style est appliquée aux supports d'impression, et la règle '.note {float: none}' est appliquée uniquement lorsque la feuille de style est appliquée aux supports d'impression et la largeur de la zone de page est inférieure ou égale à 12 centimètres.
De plus, il semble que Firefox suive cette spécification et traite les règles en conséquence, tandis que les autres navigateurs la traitent toujours de la manière CSS2.1.
La grammaire du module de syntaxe n'a pas encore été mise à jour pour refléter cela, cependant; il interdit toujours l'imbrication des règles at dans les règles @media comme avec CSS2.1. Cette spécification est de toute façon prévue pour une réécriture, donc je suppose que cela n'a pas d'importance.
Fondamentalement, CSS3 le permet (en attendant la réécriture du module de syntaxe), mais pas CSS2.1 (car il ne définit ni les requêtes de médias ni les blocs de règles imbriqués @media). Et même si au moins un navigateur a commencé à prendre en charge la nouvelle spécification, je n'appellerais pas un buggy d'autres navigateurs; au lieu de cela, je dirai qu'ils n'ont tout simplement pas encore rattrapé car ils se conforment vraiment à une spécification plus ancienne et plus stable.
Enfin, la raison pour laquelle votre @import Fonctionne est que @import Est capable de fonctionner de manière conditionnelle à l'aide d'une requête multimédia. Cependant, cela n'a aucun rapport avec la règle @media Dans votre feuille de style importée. Ce sont en fait deux choses distinctes et sont traitées comme telles par tous les navigateurs.
Pour que votre code fonctionne de manière cohérente sur tous les navigateurs, vous pouvez soit utiliser votre instruction @import, Soit, puisque vos deux règles utilisent min-width, Supprimez simplement l'imbrication de vos règles @media :
@media screen and (min-width: 480px) {
body {
background-color: #6aa6cc;
color: #000;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #000;
color: #fff;
}
}