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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
---
title: <resolution>
slug: Web/CSS/resolution
tags:
- CSS
- Reference
- Type
translation_of: Web/CSS/resolution
---
{{CSSRef}}
Le type de donnée CSS **`<resolution>`**, utilisé dans les _[media queries](/fr/docs/Web/CSS/Media_Queries)_, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.
Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.
## Syntaxe
Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("<number>")}}) immédiatement suivi d'une unité de résolution (`dpi`, `dpcm`, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.
Bien que toutes les unités représentent la même chose pour la valeur `0`, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("<length>")}} : `0` est invalide et ne représente pas `0dpi`, `0dpcm`, ni `0dppx`.
### Unités
- `dpi`
- : Cette unité représente le nombre de [points par pouce](https://fr.wikipedia.org/wiki/Point_par_pouce). Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, `1 dpi ≈ 0,39 dpcm`.
- `dpcm`
- : Cette unité représente le nombre de [points par centimètre](https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion). Puisque 1 pouce équivaut à 2.54 cm, `1dpcm ≈ 2,54 dpi`.
- `dppx`
- : Cette unité représente le nombre de points par unité CSS `px`. Puisque le ratio entre les unités CSS `in` et CSS `px` vaut 1:96, `1 dppx` est équivalent à `96 dpi`, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.
- `x`
- : Un alias pour `dppx`.
> **Note :** Bien que le nombre `0` représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, `0` est invalide et ne représente pas `0dpi`, `0dpcm` ou `0dppx`.
## Exemples
### Usage correct
Voici quelques exemples d'utilisation correcte de données de type `<resolution>` :
```css
96dpi Usage correct : un {{cssxref("<number>")}} (ici un {{cssxref("<integer>")}}) suivi d'une unité.
@media print and (min-resolution: 300dpi) { ... } Usage correct dans le contexte d'une media query.
```
### Usages incorrects
```css
72 dpi Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("<number>")}} et l'unité.
ten dpi Incorrect : seules des expressions numériques sont acceptées.
0 Incorrect : l'unité ne peut être omise que pour l'expression de la valeur 0 de type {{cssxref("<length>")}}.
```
### Exemple appliqué
#### CSS
```css
/* Saurez-vous trouver votre résolution en dpi */
/* via l'exemple live ? */
@media screen and (min-resolution: 100dpi) {
.exemple {
background-color: palegreen;
}
}
@media screen and (max-resolution: 99dpi) {
.exemple {
background-color: orange;
}
}
```
#### HTML
```html
<p class="exemple">
À ces mots le Chapelier ouvrit de grands yeux ; mais
il se contenta de dire : « Pourquoi une pie
ressemble-t-elle à un pupitre ? »
</p>
```
#### Résultat
{{EmbedLiveSample("Exemple_appliqué","200","200")}}
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------ |
| {{SpecName('CSS4 Values', '#resolution', '<resolution>')}} | {{Spec2('CSS4 Values')}} | Ajout de l'unité `x`. |
| {{SpecName('CSS3 Values', '#resolution', '<resolution>')}} | {{Spec2('CSS3 Values')}} | Ajout de l'unité `dppx`. |
| {{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("css.types.resolution")}}
## Voir aussi
- [Les _media queries_ CSS](/fr/docs/Web/CSS/Media_Queries)
- [La caractéristique média `resolution`](/fr/docs/Web/CSS/@media/resolution)
|
