Tester rapidement les replies CSS

Un truc de test CSS pratique!

La compatibilité du navigateur n'est pas toujours garantie. Supposons que vous ayez besoin d'un secours pour les navigateurs dépourvus de support CSS Grid (moins courant maintenant, mais utile pour l'illustration).

Vous pouvez utiliser @supports Blocks:

 @Supports (affichage: grille) {
  .blocks {
    Affichage: grille;
    Grid-Template-Colonnes: répéter (remplissage automatique, Minmax (min (100px, 100%), 1FR));
    Écart: 1rem;
  }
}

Pour tester rapidement le secours, modifiez temporairement @supports (display: grid) en quelque chose d'invalide, comme @supports (display: gridx) . Cela fournit un simple interrupteur ON / OFF pour les tests.

L'exemple ci-dessus manque de secours robustes. Une meilleure approche peut impliquer Flexbox (pour les navigateurs prenant en charge Flexbox mais pas la grille). Alternativement, un secours basé sur une colonne plus simple pourrait assurer une présentation raisonnable.

Si vous êtes convaincu que le navigateur prend en charge @supports Queries (un peu ironique, je sais!), Vous pouvez l'utiliser:

 @Supports (affichage: grille) {
  / * styles de grille * /
}

@Supports pas (affichage: grille) {
  / * Espacement de base de base * /
  .block {marge: 10px}
}

Cette hypothèse devient de plus en plus valable car les navigateurs plus âgés sont supprimés (surtout si vous avez abandonné le support IE).

Cela met en évidence l'opportunité d'une syntaxe @when :

 @when supports (affichage: grid) {
  / * styles de grille * /
} @autre {
  / * Styles de secours * /
}

Cette syntaxe plus propre améliorerait considérablement la lisibilité et la maintenabilité.

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!