Ouvrir la navigation secondaire

Ce billet a plus de deux ans. S'il contient des informations techniques elles sont peut être obsolètes.

Précédent Migrer un projet Django de MySQL à PostgreSQL
Suivant Réflexions sur le Viewport

Pixel de référence CSS

Le pixel CSS est qualifié d'unité magique par Bert Bos.

En CSS, le ratio entre les unités de longueur absolues est constant : 1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px.

Une règle de 3 nous donne la valeur d'1px en mm : 1px = (1px * 25.4mm) / 96px = 0,26458333333333mm (soit 0,265mm).

Mais on parle ici de mm au sens CSS du terme par opposition aux mm de la vraie vie.

En effet, les valeurs CSS exprimées en longueur absolue s'entendent soit (i) relativement à la résolution de l'appareil de visualisation, soit (ii) relativement au pixel de référence.

Cela signifie que l'agent utilisateur (le navigateur) est libre de choisir une taille précise pour le px (le pixel de référence) puis de dimensionner les autres unités en fonction de la valeur choisie.

La valeur du pixel de référence dépend du type de matériel et de son usage courant. La spécification recommande :

une valeur pour le pixel de référence qui soit égale à l'angle visuel d'un pixel sur un appareil de densité de 96ppp situé à une longueur de bras du spectateur.

Notons que l'emploi des termes "égale à l'angle visuel" est probablement mal choisi c.f. In CSS, “px” is not an angular measurement and it is not non-linear.

En clair, la valeur du pixel de référence doit correspondre à la taille d'un pixel physique d'un moniteur de 96ppp vu par un spectateur positionné à une distance d'un bras du moniteur. Une configuration typique des années 1990 quand le problème se posait en termes de résolution de 72ppp sous Mac et de 96ppp sous Windows :

A Reference Pixel is from the 90's, but it scales!