<resolution>

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.

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 <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 <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.
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> :

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.

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 4
La définition de '<resolution>' dans cette spécification.
Brouillon de l'éditeur Ajout de l'unité x.
CSS Values and Units 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
<resolution>Chrome Support complet 29Edge Support complet 12Firefox Support complet 8
Support complet 8
Support partiel 3.5
Notes
Notes Supports <integer> values only.
IE Support complet 9Opera Support complet 9.5Safari Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 78087.
WebView Android Support complet ≤37Chrome Android Support complet 29Firefox Android Support complet 8
Support complet 8
Support partiel 4
Notes
Notes Supports <integer> values only.
Opera Android Support complet OuiSafari iOS Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 78087.
Samsung Internet Android Support complet 2.0
dpcm unitChrome Support complet 29Edge Support complet 12Firefox Support complet 8IE Support complet 9Opera Support complet 16
Support complet 16
Aucun support 10 — 15
Safari Aucun support NonWebView Android Support complet ≤37Chrome Android Support complet 29Firefox Android Support complet 8Opera Android Support complet 16
Support complet 16
Aucun support 10.1 — 14
Safari iOS Aucun support NonSamsung Internet Android Support complet 2.0
dpi unitChrome Support complet 29Edge Support complet 12Firefox Support complet 8IE Support complet 9Opera Support complet 16
Support complet 16
Aucun support 10 — 15
Safari Aucun support NonWebView Android Support complet ≤37Chrome Android Support complet 29Firefox Android Support complet 8Opera Android Support complet 16
Support complet 16
Aucun support 10.1 — 14
Safari iOS Aucun support NonSamsung Internet Android Support complet 2.0
dppx unitChrome Support complet 29Edge Support complet 12Firefox Support complet 16IE Aucun support NonOpera Support complet 12.1Safari Aucun support NonWebView Android Support complet ≤37Chrome Android Support complet 29Firefox Android Support complet 16Opera Android Support complet 12.1Safari iOS Aucun support NonSamsung Internet Android Support complet 2.0
x unitChrome Support complet 68Edge Aucun support NonFirefox Support complet 62IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Support complet 68Chrome Android Support complet 68Firefox Android Support complet 62Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet 10.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi