Dans quelle mesure la prise en charge par le navigateur des règles @media imbriquées dans CSS est-elle cohérente ?

Règles @media imbriquées dans CSS : prise en charge et compatibilité des navigateurs

Question :

Comment La prise en charge des règles @media imbriquées dans différents navigateurs est-elle cohérente ? Pourquoi le code fourni s'affiche-t-il différemment selon les navigateurs, et quelle est la raison de cette incohérence ? Ce problème peut-il être résolu pour obtenir un style cohérent ?

Réponse :

Prise en charge du navigateur

L'imbrication des règles @media n'était pas une solution pratique valable dans CSS2.1, c'est pourquoi la prise en charge de cette fonctionnalité variait considérablement selon les navigateurs. Cependant, avec l'introduction de CSS Conditional 3, les règles d'imbrication @media sont devenues une fonctionnalité prise en charge dans tous les navigateurs modernes, notamment Firefox, Safari, Chrome et Microsoft Edge.

Compatibilité d'imbrication

Le code fourni dans la question implique l'imbrication des règles @media. Bien que les règles @media puissent s'imbriquer dans d'autres règles @media dans CSS3, cette imbrication n'était pas autorisée dans CSS2.1. Par conséquent, les navigateurs qui adhèrent toujours à CSS2.1, comme les anciennes versions d'Internet Explorer, ne gèrent pas correctement les règles @media imbriquées.

Raison de l'incohérence

Firefox a implémenté la nouvelle spécification CSS Conditional 3, lui permettant d'interpréter et d'appliquer les règles @media imbriquées comme prévu. D'un autre côté, d'autres navigateurs, comme Opera, Chrome et IE9, suivent l'ancienne spécification CSS2.1, qui ne prend pas en charge les règles @media imbriquées. En conséquence, ils se contentent d'appliquer les styles définis dans la règle la plus interne de @media, ce qui entraîne des divergences de style.

Atteindre la cohérence

Pour garantir un style cohérent dans l'ensemble tous les navigateurs, il est recommandé de supprimer les règles @media imbriquées. Cela peut être fait en supprimant la deuxième règle @media dans la première règle @media :

@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;
        }
    }
}

Après avoir supprimé la règle imbriquée, le style doit s'appliquer de manière cohérente dans tous les navigateurs modernes prenant en charge CSS Conditional 3 et CSS2. 1.

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!