blob: bff694bf348422ad278e13927b6aa628b0ef96d4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: any-pointer
slug: Web/CSS/@media/any-pointer
tags:
- CSS
- Caractéristique média
- Reference
translation_of: Web/CSS/@media/any-pointer
---
{{CSSRef}}
**`any-pointer`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.
> **Note :** Si on souhaite tester la précision du mécanisme de pointage _principal_, on pourra utiliser la caractéristique [`pointer`](/fr/docs/Web/CSS/@media/pointer) à la place.
## Syntaxe
La caractéristique `any-pointer` est définie comme un mot-clé parmi ceux de la liste ci-après.
- `none`
- : L'appareil ne dispose d'aucun dispositif de pointage.
- `coarse`
- : Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.
- `fine`
- : Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.
> **Note :** Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur `none` ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.
## 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
```html
<input id="test" type="checkbox" />
<label for="test">Coucou !</label>
```
### CSS
```css
input[type="checkbox"]:checked {
background: gray;
}
@media (any-pointer: fine) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
```
### Résultat
{{EmbedLiveSample("Exemples")}}
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
| {{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("css.at-rules.media.any-pointer")}}
## Voir aussi
- [La caractéristique média `pointer`](/fr/docs/Web/CSS/@media/pointer)
|
