web-dev-qa-db-fra.com

Imbrication des requêtes CSS @supports et @media

J'ai essayé de déterminer s'il est possible d'imbriquer des requêtes de fonctionnalités CSS (également appelées "CSS @supports ”) Et les requêtes régulières des médias, et quelle serait la bonne façon de procéder.

Exemple A montre la requête de fonctionnalité à l'intérieur de la requête média .
Exemple B affiche la requête de média à l'intérieur de la requête de fonctionnalité .

Est-il même possible de les imbriquer? Si oui, existe-t-il un style d'imbrication préféré? A ou B?

.foo {
    background: red;
}

/* EXAMPLE A */
@media (min-width: 50em) {
    .foo {
        background: green;
    }

    @supports (flex-wrap: wrap) {
        .foo {
            background: blue;
        }
    }
}

/* EXAMPLE B */
@supports (flex-wrap: wrap) {
    .foo {
        background: green;
    }

    @media (min-width: 50em) {
        .foo {
            background: blue;
        }
    }
}
cssmedia-queriesfeature-detection
19
oelna

Les deux exemples sont des CSS valides selon section 3 de la spécification , et pour le moment, ils semblent être systématiquement pris en charge par les navigateurs qui comprennent les deux @supports règles et imbriquées @media règles ( également nouveau dans CSS ).

Bien que les deux exemples appliquent uniquement le background: blue déclaration lorsque les deux les @media et @supports les conditions sont remplies,

  • A s'appliquera soit background: green ou background: blue si et seulement si le (min-width: 50em) la requête média est satisfaite;
  • B appliquera l'une ou l'autre déclaration si et seulement si le navigateur comprend @supports et prend en charge flex-wrap: wrap.

Étant donné que vos deux exemples signifient des choses subtilement différentes, celle que vous choisirez dépendra de votre cas d'utilisation:

  • Si vous ne voulez pas de navigateurs qui ne prennent pas en charge @supports ou flex-wrap: wrap pour voir soit déclaration, et pour toujours appliquer background: red, choisissez B.
  • Sinon, si vous souhaitez que n'importe quel navigateur (qui comprend quand même les requêtes multimédias) applique background: green à la largeur de fenêtre spécifiée, même si elle ne s'appliquera jamais background: blue en raison de l'absence de prise en charge @supports ou flex-wrap: wrap, choisis un.
19
BoltClock