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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 41Edge Support complet 12Firefox Support complet 64IE ? Opera Support complet 28Safari Support complet 9WebView Android ? Chrome Android Support complet 50Edge Mobile Support complet 12Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,