pointer
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since décembre 2018.
La caractéristique média CSS pointer permet de tester si l'utilisateur·ice dispose d'un dispositif de pointage (comme une souris) et, le cas échéant, d'évaluer la précision du dispositif de pointage principal.
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 :
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
| Specification |
|---|
| Media Queries Level 4 # pointer |
Compatibilité des navigateurs
Loading…