Pixel de référence CSS

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

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!

Avant Migrer un projet Django de MySQL à PostgreSQL Après Réflexions sur le Viewport

Tag Kemar Joint