Le type de donnée CSS <resolution>, utilisé dans les media queries, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution. Une valeur de ce type sera composé d'un nombre (une valeur de type <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é.

Les dimensions font référence aux unités CSS et non aux dimensions physiques.

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 <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. 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. 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 image-resolution.

Exemples

Voici quelques exemples d'utilisation correcte de données de type <resolution> :

96dpi                                              Usage correct : un <number> (ici un <integer>) suivi d'une unité.
@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une media query.

Voici quelques usages incorrects :

72 dpi    Incorrect : les espaces ne sont pas acceptés entre le <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 <length>.

Exemple appliqué

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

<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

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 3
La définition de '<resolution>' dans cette spécification.
Candidat au statut de recommandation Intégration du type dans une spécification plus générale. Pas de modification.
CSS Image Values and Replaced Content Module Level 3
La définition de '<resolution>' dans cette spécification.
Candidat au statut de recommandation Ajout de l'unité dppx.
Media Queries
La définition de '<resolution>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 29.0 3.5 (1.9.1)  [2] 9 9.5 Pas de support [1]
dppx 29.0 16.0 (16.0) ? 12.10 ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support [*] (Oui) ? (Oui) Pas de support [1]
dppx ? 16.0 (16.0) ? 12.10 ?

[1] Webkit ne supporte pas les media queries s'appuyant sur la résolution de manière conforme à la spécification. L'utilisation de la propriété non-standard device-pixel-ratio est nécessaire pour les navigateurs tels que Safari, voir le bug 16832.

[2] Avant Firefox 8 (Gecko 8.0), seules les valeurs <integer> suivies d'une unité étaient acceptées. Depuis lors, les dimensions composées d'un <number> suivies d'une unité sont acceptées.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, Prinz_Rana, fscholz, J.DMB, louuis, teoli, FredB
 Dernière mise à jour par : SphinxKnight,