Règle en pixels

Mesurer en pixels, exactement

C'est le seul outil du site qui ne demande aucun étalonnage, et la raison mérite d'être comprise. Toutes les autres tuiles convertissent des pixels en unités physiques, et cette conversion suppose de connaître la densité réelle de votre écran. Une règle en pixels saute la conversion : elle mesure des pixels en pixels, si bien que la réponse est exacte sur n'importe quel écran, à n'importe quelle densité, sans rien préparer.

Les règles des bords haut et gauche sont graduées tous les 10 px avec un chiffre tous les 100, et une sélection prolonge des lignes de repère dans les deux gouttières, ce qui permet de lire une distance directement sur la graduation.

Pixels CSS, pixels de l'appareil, et pourquoi les deux comptent

Un pixel CSS est une unité de mise en page, pas un point physique. Sur un écran standard, les deux coïncident. Sur tout écran haute densité, un seul pixel CSS est peint à l'aide de plusieurs pixels de l'appareil : quatre à 2×, neuf à 3×. Le rapport qui les relie est affiché sous la surface, pour l'écran sur lequel vous lisez ceci.

Pour le développement front-end, la conséquence est simple : on met en page en pixels CSS et on exporte les images à la taille en pixels de l'appareil. Une icône occupant 24 pixels CSS réclame 48 px de données réelles pour rester nette sur un écran 2×, ce qui est toute la raison d'être de srcset et des fichiers @2x. Les deux chiffres figurent côte à côte ici, pour éviter de faire cette multiplication de tête.

Les pourcentages de la zone d'affichage servent un objectif voisin. Quand on convertit une maquette de largeur fixe en CSS adaptatif, savoir qu'un élément occupe 20 % de la largeur est plus directement utile que savoir qu'il fait 240 px, puisque cela se traduit immédiatement en vw et vh.

À quoi sert vraiment une règle en pixels

Presque toujours à la même poignée de tâches, et ce sont des comparaisons plutôt que des mesures absolues :

• Vérifier la régularité des espacements. Les systèmes de design reposent sur une échelle, en général des multiples de 4 ou de 8. Un écart de 14 px dans une mise en page construite sur des huitièmes est une erreur, bien plus facile à voir avec une règle posée dessus qu'en lisant le code.
• Comparer une intégration à sa maquette. Mesurez le même élément dans les deux. Un titre censé se trouver à 32 px du bord et posé à 28 est exactement le genre de dérive qui s'accumule discrètement dans une page.
• Dimensionner une image avant export. Mesurez l'espace qu'elle occupera, puis exportez à cette taille multipliée par le rapport de pixels visé.
• Trancher une discussion sur une capture d'écran. Posez un repère sur une arête et la question de savoir si deux choses sont alignées cesse d'être une affaire d'opinion.

Ce qu'une règle en pixels ne peut pas faire

Elle ne mesure qu'à l'intérieur de sa propre page. Une page web ne voit ni les autres fenêtres, ni les autres onglets, ni votre bureau. Cette isolation est une frontière de sécurité délibérée et importante, non une limitation à contourner. Mesurer l'interface d'un logiciel natif, ou quoi que ce soit hors du navigateur, réclame une application de bureau disposant des autorisations adéquates.

Le zoom du navigateur mérite aussi une explication. Il n'agrandit pas la page finie comme le ferait une loupe : il change ce que vaut un pixel CSS, et la page est ensuite remise en page à la nouvelle taille. À 125 %, un pixel CSS est peint avec 1,25 pixel de l'appareil, si bien que cette surface continue d'annoncer d'honnêtes pixels CSS pendant que tout paraît physiquement plus grand. C'est le comportement correct, puisque le pixel CSS est l'unité dans laquelle on écrit les styles.

Reste le clavier, que l'on oublie souvent. Sélectionnez la surface et les flèches redimensionnent la sélection d'un pixel à la fois, ou de dix avec Maj enfoncée. La souris sert à s'approcher ; les flèches servent à tomber sur un chiffre exact, et elles ne dérapent pas au dernier moment comme le fait un pavé tactile.

Le piège des captures d'écran

Une capture prise sur un écran 2× contient deux fois plus de pixels que la mise en page qu'elle montre. Un bouton de 200 px CSS ressort à 400 px dans le fichier. C'est la source de confusion la plus fréquente quand deux personnes comparent des mesures : l'une lit des pixels CSS dans son navigateur, l'autre lit des pixels d'image dans un éditeur, et les deux ont raison sans le savoir.

Trois habitudes évitent la discussion. Précisez toujours l'unité en donnant un chiffre, « 200 px CSS » plutôt que « 200 px ». Notez le rapport de pixels de la machine sur laquelle la capture a été prise, puisque c'est le facteur de conversion. Et quand la comparaison compte vraiment, mesurez les deux côtés au même endroit : cette surface pour la page vivante, les règles de votre éditeur pour le fichier, en divisant ces dernières par le rapport de pixels.

Le même raisonnement explique pourquoi une image exportée à la taille CSS paraît floue sur un écran haute densité. Elle n'est pas floue : elle manque simplement de données, étirée sur quatre fois plus de points qu'elle n'en contient.