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
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet 41 | Edge Support complet 12 | Firefox Support complet 64 | IE ? | Opera Support complet 28 | Safari Support complet 9 | WebView Android ? | Chrome Android Support complet 50 | Edge Mobile Support complet 12 | Firefox Android Support complet 64 | Opera Android Support complet 28 | Safari iOS Support complet 9.2 | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue