Les règles CSS @media imbriquées fonctionnent-elles de manière cohérente sur tous les navigateurs ?

Règles @media imbriquées dans CSS, revisitées

La question initiale explorait le rendu incohérent d'un extrait de code CSS impliquant des règles @media imbriquées dans divers navigateurs. Voici une analyse mise à jour basée sur l'état actuel de la prise en charge du navigateur :

Règles @media imbriquées dans CSS3

Selon le module Règles conditionnelles CSS dans CSS3, l'imbrication de @media les règles sont désormais entièrement prises en charge. La syntaxe suivante est valide :

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

Prise en charge des navigateurs

Les navigateurs modernes, notamment Firefox, Safari, Chrome, Microsoft Edge et Opera, prennent désormais en charge les @media imbriqués. règles telles que définies dans CSS Conditional 3. Internet Explorer ne prend pas en charge cette fonctionnalité.

L'original Problème

Le code de la question d'origine démontrait des règles @media imbriquées qui ne fonctionnaient pas de manière cohérente sur tous les navigateurs. Cela était dû au manque de prise en charge de l'imbrication dans CSS2.1, la spécification prise en charge par les anciennes versions des navigateurs à l'époque.

Résolution

Pour les navigateurs qui le font ne prend pas en charge les règles @media imbriquées, une solution de contournement consiste à supprimer l'imbrication et à écrire plusieurs règles @media séparément :

@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 avec conditions de média

La raison pour laquelle l'instruction @import avec une condition de média fonctionnait de manière cohérente était qu'elle applique une feuille de style de manière conditionnelle, et non car il permet l'imbrication dans les règles @media.

Conclusion

Imbriqué Les règles @media sont désormais largement prises en charge dans les navigateurs modernes, conformément à la spécification CSS Conditional 3. Pour les navigateurs existants qui ne prennent pas en charge cette fonctionnalité, une solution simple consiste à utiliser des règles @media distinctes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!