grid
Baseline
Widely available
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 une valeur booléenne (0 ou 1) (type <mq-boolean>) qui indique si l'appareil d'affichage fonctionne selon une grille.
Exemples
HTML
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
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
| Specification |
|---|
| Media Queries Level 4 # grid |
Compatibilité des navigateurs
Chargement…