Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Caractéristique média CSS grid
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La caractéristique média CSS grid permet de tester si le périphérique de sortie utilise un écran basé sur une grille.
La plupart des ordinateurs et smartphones modernes disposent d'écrans matriciels. Les appareils à grille incluent par exemple les terminaux texte uniquement et les téléphones basiques avec une seule police fixe.
Syntaxe
La caractéristique grid est définie comme une valeur représentant si le périphérique de sortie est basé sur une grille — 1 si c'est le cas, sinon 0.
Exemples
HTML
<p class="unknown">
Impossible de savoir si l'affichage fonctionne sur une grille. :-(
</p>
<p class="bitmap">L'appareil dispose d'un affichage matriciel.</p>
<p class="grid">L'appareil utilise une grille pour l'affichage !</p>
CSS
:not(.unknown) {
color: lightgray;
}
@media (grid: 0) {
.unknown {
color: lightgray;
}
.bitmap {
color: red;
text-transform: uppercase;
}
}
@media (grid: 1) {
.unknown {
color: lightgray;
}
.grid {
color: black;
text-transform: uppercase;
}
}
Résultat
Spécifications
| Spécification |
|---|
| Media Queries Level 4 # grid |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- Utiliser les requêtes média
- La règle
@media
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.