Tous les navigateurs prennent-ils en charge les règles @media imbriquées dans CSS, et comment pouvons-nous garantir un style cohérent ?

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

Les règles @media imbriquées en CSS ont été un sujet de confusion concernant la prise en charge des navigateurs . La question se pose : « Quels navigateurs prennent en charge cette fonctionnalité et comment pouvons-nous garantir la cohérence ? CSS2.1. Cependant, CSS3 a introduit cette fonctionnalité, comme indiqué dans le module Règles conditionnelles. Les navigateurs modernes prennent désormais universellement en charge l'imbrication des règles at @media, Microsoft Edge étant la seule exception.

Cohérence

Le code fourni dans la question présente des @media imbriqués règles :

En CSS3, ce code devrait fonctionner comme prévu, les styles appropriés étant appliqués en fonction des requêtes multimédias spécifiées. La différence entre Firefox et les autres navigateurs est due au fait que Firefox a implémenté la spécification CSS3, tandis que les autres navigateurs sont toujours conformes à l'ancienne norme CSS2.1, qui n'autorise pas les règles @media imbriquées.

Solution de contournement

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

Pour garantir la cohérence sur tous les navigateurs, envisagez d'utiliser l'approche suivante :

En supprimant le imbriqué, le code se comportera de manière cohérente dans tous les navigateurs jusqu'à la mise en œuvre complète de CSS3 par tous les principaux navigateurs.

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!