pointer
pointer est une caractéristique média CSS (cf. @media) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.
Note : Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique any-pointer.
Syntaxe
Cette caractéristique est définie avec un mot-clé parmi les suivants :
none- Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.
coarse- Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.
fine- Le mécanisme de saisie principal inclut un dispositif de pointage précis.
Exemples
Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.
HTML
<input id="test" type="checkbox" />
<label for="test">Coucou !</label>CSS
input[type="checkbox"]:checked {
background: gray;
}
@media (pointer: fine) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (pointer: coarse) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| Media Queries Level 4 La définition de 'pointer' dans cette spécification. |
Candidat au statut de recommandation | Ajout dans la spécification de niveau 4 pour les requêtes média. |
Compatibilité des navigateurs
BCD tables only load in the browser