Quelles sont les unités absolues ? Quelles sont les différences entre les unités relatives et absolues, et comment créons-nous des tailles précises sur le Web ? Dans cet article, Elad Shechter explique pourquoi les unités absolues CSS ne sont pas si absolues.
Lorsque nous commençons à apprendre le CSS, nous constatons que les unités de mesure CSS sont classées comme relatives ou absolues. Les unités absolues sont enracinées dans des unités physiques, telles que les pixels, les centimètres et les pouces. Mais au fil des ans, toutes les unités absolues du CSS ont perdu leur lien avec le monde physique et sont devenues différentes sortes d'unités relatives, du moins du point de vue du Web.
Il est important de noter qu'il existe encore des unités significatives ]différences entre les unités relatives et absolues. Les unités relatives CSS sont dimensionnées selon d'autres définitions de style définies par les éléments parents ou sont affectées par la taille d'un conteneur parent. En ce qui concerne les unités absolues, nous allons plonger et voir comment elles sont affectées par d'autres éléments, tels que l'écran et le système d'exploitation de l'appareil.
Les unités relatives incluent des unités telles que %em remunités de fenêtre (vw et vh), et plus encore. L'unité absolue la plus courante est le pixel (px). En plus de cela, nous avons l'unité centimètre (cm) et l'unité pouces (in).
Maintenant, explorons pourquoi les unités absolues CSS ne sont pas si absolues.[19659006]Les pixels CSS
Les pixels sont l'unité CSS la plus courante depuis le début du Web. Dans l'ancien monde des écrans de bureau, avant d'avoir des smartphones, les pixels de l'écran étaient toujours équivalents aux pixels CSS.
En 2007, par exemple, la résolution de bureau la plus courante était 1024× 768 pixels. À l'époque, nous donnions normalement à nos pages Web une largeur fixe de 1000 pixels pour s'adapter à toute la page, et les pixels restants étaient enregistrés pour la barre de défilement du navigateur.
Les smartphones ont apporté une autre évolution discrète, inaugurant l'ère des écrans haute densité. Si nous considérons un iPhone 12 Pro, dont l'écran mesure 1170 pixels de large, nous comptons tous les 3 pixels sur l'appareil comme 1 pixel dans le CSS.[19659013]La densité des écrans d'iPhone au fil des ans »/> Les écrans haute densité ont provoqué la première séparation entre les pixels de l'appareil et les pixels CSS. (Crédit image : Wikipédia) ( Grand aperçu)
Lorsque nous dimensionnons dans un mobile, nous mesurons en fonction des pixels CSS, et non en fonction des pixels de l'appareil. Pour résumer :
Les pixels CSS sont des pixels logiques.
Les pixels de l'appareil sont réels pixels physiques.
1 pixel CSS pourrait être plus d'un pixel d'appareil. ( Grand aperçu)
D'accord, mais qu'en est-il des appareils de bureau ? Fonctionnent-ils toujours avec le même vieux calcul de pixels ? Parlons-en.
Écrans de bureau En 2021
Les écrans haute densité sont arrivés sur les ordinateurs portables plusieurs années plus tard. Les MacBooks 2014 ont reçu les premiers écrans « rétine » (rétine étant synonyme de haute densité).
De nos jours, la plupart des ordinateurs portables ont un écran haute densité.
Considérons MacBooks :
Le MacBook Pro 13,3 pouces a un écran de 2560 pixels de large mais qui se comporte comme 1440 pixels. Cela signifie que chaque 1.778 pixels physiques agissent comme 1 pixel logique.
Le MacBook Pro 16 pouces a un écran qui est 3072 pixels de large mais qui se comporte comme 1792 pixels. Cela signifie que chaque 1.714 pixels physiques agissent comme 1 pixel logique.
Parmi PC portablesj'ai testé deux écrans de 15,6 pouces, l'un en résolution Full HD et l'autre en résolution 4K. Les résultats étaient intéressants :
L'écran 15,6 pouces Full HD fait 1920 pixels de large mais se comporte comme 1536 pixels. Cela signifie que chaque 1,25 pixel physique agit comme 1 pixel logique. mais se comporte, encore une fois, comme 1536 pixels. Cela signifie que chaque 2,5 pixels physiques agissent comme 1 pixel logique.
Ces appareils PC ont des résolutions différentes mais agissent de la même manière pour la résolution CSS. (Crédit image : Elad Shechter) ( Grand aperçu )
Comme vous pouvez le voir, la connexion entre les pixels physiques réels (c'est-à-dire de périphérique) et les pixels CSS (c'est-à-dire logiques) a presque disparu. regardé de près un écran, vous pouviez réellement voir ses pixels. Lorsque la technologie des écrans s'est améliorée, les fabricants ont commencé à créer des écrans à plus haute densité.
Pourquoi calculons-nous différemment les pixels logiques ?
Au fil des ans, les écrans devenant de plus en plus denses, nous n'avons pas pu insérer plus de contenu dans la même taille d'écran simplement parce que l'écran a plus de pixels.
Réfléchissez-y un instant. Considérez le Samsung Galaxy S21 Ultra. Sa dimension la plus étroite est 1440 pixels physiques. Nous pourrions facilement l'intégrer dans un écran de bureau ordinaire. Mais si nous le faisions, le texte serait petit au point d'être illisible. Pour cette raison, nous séparons les pixels physiques des pixels logiques.
Les tailles en CSS (c'est-à-dire la largeur et la hauteur), sont alors calculées en fonction des pixels logiques CSS. Bien sûr, nous pouvons utiliser des pixels physiques pour charger du contenu haute densitécomme des images et des vidéos, comme ceci :
OK, les pixels CSS ne sont pas égaux aux pixels physiques d'un appareil. Mais nous avons des centimètres et des pouces. Ce sont des unités physiques connectées au monde physique, n'est-ce pas ? Voyons-les.
Plus après le saut ! Continuez à lire ci-dessous ↓
CSS Inches And CSS Centimeters
Chaque fois que nous utilisons des unités physiques comme les pouces et les centimètres, nous savons qu'il s'agit d'unités absolues.
J'ai pensé que si les pixels CSS n'étaient pas égaux aux pixels de l'appareil, ce serait peut-être une bonne idée d'utiliser des unités physiques telles que les pouces et les centimètres sur le Web. Ce sont des unités absolues, non ?
Pour être sûr, je l'ai testé. J'ai créé une boîte d'une largeur et une hauteur de 1 centimètre et lui ai donné une couleur de fond rouge. J'ai attrapé un vrai ruban à mesurer et j'ai eu une surprise :
Un centimètre CSS n'est pas égal à un centimètre physique.
Ici, je teste une unité de centimètre CSS avec un ruban à mesurer sur un MacBook 13 pouces mi-2019 :
Comme vous pouvez le voir, un centimètre CSS n'est évidemment pas égal à un centimètre physique. (Crédit image : Elad Shechter) ( Grand aperçu )
Le résultat est le même pour les pouces CSS :
Un pouce CSS n'est pas égal à un pouce physique.
Il en va de même pour le pica (pc) et le millimètre (mm) unités. Ceux-ci correspondent à une partie d'un pouce CSS ou d'un centimètre CSS, dont aucun n'est connecté à un vrai pouce ou à un vrai centimètre.
Pourquoi les pouces et les centimètres CSS ne sont pas de vrais pouces et centimètres
Depuis les années 1980 , le marché des PC a déterminé qu'un pouce CSS équivaut à 96 pixels. Ce calcul de pixels était directement lié à la norme DPI/PPI (pixels par pouce) du système d'exploitation Windows de Microsoft pour les moniteurs à l'époque, dont la plus courante avait une norme de 96 DPI.
Cela signifiait que 1 pouces CSS serait toujours équivalent à 96 pixels CSS.
Comme pour les centimètres CSS, chaque centimètre est directement calculé à partir des pouces, ce qui signifie que 1 pouces équivaut à 2,54 centimètres. Cela signifie que chaque 1 centimètre CSS sera toujours égal à 37.7952756 pixels CSS.
En d'autres termes : 1cm = 37.7952756px (96px / 2.54) .
Voir le stylo [CSS Real Dimensions!](https://codepen.io/smashingmag/pen/BaRJvWj) par Elad Shechter.
Cette décision, qui semblait être une bonne idée au début de l'industrie des PC (qui avait en quelque sorte une norme), s'est avérée être une mauvaise décision qui CSS pouces et centimètre obsolètes et inutiles (du moins du point de vue du Web).
Notez que dans les années 1980, Apple avait une norme différente de 72DPI pour les écrans.
Screen Pixels Get Plus dense
Comme je l'ai mentionné, le DPI des écrans est devenu plus dense au fil des ans, et nous avons vu des écrans de 120 à 160 DPI. Et parce que 1 pouce CSS équivaut toujours à 96 pixels CSS, cela signifie maintenant qu'un pouce CSS n'est pas égal à un vrai pouce physique.
Parce qu'un pouce CSS et un centimètre CSS sont directement convertis à partir de pixels CSS, et parce que les écrans ont obtenu plus de DPI au fil des ans, nous sommes arrivés au point où ces unités ne représentent pas ce qu'elles sont censé représenter sur les écrans.
CSS Point Unit
Le point (pt) unité est l'une des unités les moins reconnues de CSS. Comme l'indique Wikipédia :
« En typographie, le point est la plus petite unité de mesure. Il est utilisé pour mesurer la taille de la police, l'interlignage et d'autres éléments sur une page imprimée. Page Wikipédia »/> (Crédit image : Wikipedia) ( Grand aperçu)
Avant d'expliquer pourquoi cette unité n'est pas vraiment une unité absolue pour le Web, passons en revue les unités de base des écrans et des imprimantes.
PPI et DPI
Nous avons déjà mentionné le DPI, et vous Vous avez peut-être entendu ces termes dans le passé, mais si vous n'avez jamais compris de quoi il s'agit exactement, voici une introduction rapide :
PPI Les écrans sont construits à partir de nombreux petits points lumineux, appelés pixels. Pour mesurer la densité des pixels, nous comptons le nombre de pixels qui correspondent à 1 pouce, appelés pixels par pouce (PPI).
DPI Les imprimantes impriment des points de couleur. Pour représenter la densité des points de l'imprimante, nous comptons le nombre de points qui correspondent à 1 pouce de papier, appelés points par pouce (DPI).
En résumé, ce sont deux façons de mesurer la densité d'informations visuelles que l'on peut faire tenir dans 1 pouce.
PPI : pixels par pouce (pour les écrans)
DPI : points par pouce (pour les imprimantes)
Il est important de mentionner que le nombre de pixels CSS et de points dans 1 pouce correspond à la fois à la largeur et à la hauteur. Cela signifie que sur un écran de 96 PPI, une boîte avec une hauteur et une largeur de 1 pouces aura une taille totale de 9216 pixels ( 96×96 px = 9216 px).
Voici une démonstration visuelle de 1 pouces avec un écran de 10 PPI :
Voici quelques exemples de calculs réels de CSS PPI :
CSS Resolution (Pixels)
CSS PPI
CSS Inches (largeur et hauteur)
96×96
96
1×1
141×141
141
1×1
« DPI » pour les écrans
Les fabricants d'appareils mobiles et de bureau préfèrent exprimer leurs mesures d'écran en DPI, pas IPP. Mais ne vous y trompez pas : Il s'agit toujours de PPI pour les écrans et de DPI pour les imprimantes.
Normes DPI/PPI
Pour représenter tous ces points et pixels, nous avons le point (pt).
Mais l'unité de point de CSS dérive du DPI par défaut de l'imprimante, qui, encore une fois, a été décidé dans les années 1980 et est égal à 72 DPI. Cela signifie que 1 pouce de CSS équivaut toujours à 72 points.
1 pouce = 72 points
1 point = 1/72nd de 1 inch
Pixels For Web, Dots For Printers
Pour le Web, l'unité DPI n'a pas sens. Le Web DPI est défini selon une norme différente (96 DPI), dont nous avons déjà parlé lorsque nous avons calculé un pouce CSS et un centimètre CSS. Pour cette raison, il n'y a aucune raison d'utiliser l'unité de point sur le Web.
Remarque : 1 point n'est pas égal aux pixels (CSS).[19659016]1 point = 1.333 pixels
72 points = 1 pouce
72 points = 96 pixels
Imprimantes
Dans cet article, je voulais principalement montrer pourquoi il n'y a pas d'unités absolues pour le web. Mais qu'en est-il de les utiliser pour les imprimantes ? Y a-t-il une raison d'utiliser des pouces, des centimètres ou des unités de points CSS pour les imprimantes ?
Mon test d'impression
J'ai effectué un petit test pour vérifier si la norme DPI des années 1980 fonctionne correctement sur les imprimantes. J'ai créé deux boîtes : une avec une largeur et une hauteur de 72 points, et la seconde avec une largeur et une hauteur de 1 pouces.
J'ai imprimé ces deux boîtes sur un imprimante laser que j'ai dans mon bureau. Voici mon Codepen pour tester les points et les pouces pour les imprimantes :
Voir le stylo [1 inch](https://codepen.io/smashingmag/pen/ZEKxMMy) par Elad Shechter.
J'ai imprimé cette démo sur une imprimante laser. À ma grande surprise, si j'utilise 72 points (ou 1 pouces), j'obtiens exactement 1 pouces. Cela signifie que, pour les imprimantes, il y a peut-être encore une bonne raison d'utiliser des unités CSS telles que les points, les pouces et les centimètres.
Les imprimantes peuvent imprimer plus de DPI, mais si nous travaillons à 100% zoom sur l'imprimante, alors 72 points (ou 1 pouces) de CSS équivaudra à un vrai pouce physique.
Rappel : Cet article concerne davantage la connexion des unités absolues au Web plutôt qu'aux imprimantes. Bien sûr, les résultats peuvent changer sur différents types d'imprimantes.
Si nous regardons le MacBook Pro 16 pouces, qui a un ratio de 1,714 pixels physiques pour chaque 1 pixel CSS, nous ne pouvons pas prédire avec précision les tailles sur le Web.[19659003]Si nous essayons de deviner le rapport de pixels réel de l'appareil sur le MacBook Pro 16 pouces à l'aide de window.devicePixelRatio de JavaScript, il renverra un rapport incorrect de 2au lieu de 1,714 . (Et c'est sans tenir compte de l'état du zoom du navigateur Web et du système d'exploitation.) )
Pourquoi avons-nous besoin de véritables unités CSS absolues
Lorsque nous voulons définir une taille fixe pour un élément de la barre latérale, nous utiliserons des pixels CSS. Mais si vous y réfléchissez, les pixels CSS n'ont plus de sens de nos jours. Comme nous l'avons vu ci-dessus, sur la plupart des smartphones et des ordinateurs de bureau, les pixels CSS ne décrivent plus les pixels de l'appareil.
Sur cette base, je pense que nous avons besoin d'unités physiques réelles pour CSS (comme un vrai centimètre ou un pouce unit) car les pixels CSS n'ont plus de véritable sens sur le Web.
Il convient de mentionner que Firefox avait implémenté une unité de millimètre physique réelle (mozmm), mais l'a supprimée dans la version 59. Je ne ' Je ne sais pas pourquoi ils l'ont enlevé. C'est peut-être parce que tant de choses dépendent déjà des pixels CSS, comme les images réactives et les unités em et rem. Si nous essayions d'ajouter une nouvelle mesure physique, cela causerait peut-être plus de problèmes qu'il n'en résoudrait.
Il semble que les internautes se soient tellement habitués à penser en pixels que, même si l'unité de pixel CSS a perdu sa connexion à l'appareil. pixels, nous continuerons à utiliser l'unité.
Et si vous pensez toujours que les pixels CSS sont une excellente unité de mesure, essayez d'expliquer à un nouveau développeur Web ce que cette unité mesure réellement.
Pour l'instant, nous n'avons aucun moyen réel de décrire les tailles physiques en CSS.
Ainsi, le pixel CSS est le pire type d'unité absolue — à l'exception de tous les autres.
Pour résumer
À la Au début de cet article, j'ai dit que les unités CSS absolues sont devenues comme de nouveaux types d'unités relatives. Nous avons commencé avec les pixels CSS et nous avons vu la différence entre les pixels CSS et les pixels de l'appareil.
Ensuite, nous avons constaté que les pouces CSS et les centimètres CSS sont directement convertis à partir des pixels CSS et ne sont pas connectés aux pouces et centimètres réels. En fin de compte, nous avons parlé de l'unité de point et, encore une fois, de la façon dont cette unité n'a pas de sens absolu pour le Web.
Final Words
C'est tout. J'espère que vous avez apprécié cet article et appris de mon expérience. Si vous aimez cet article, j'apprécierais d'en entendre parler et de le partager.
Shutterstock
Grand aperçu
Shutterstock
(vf , il, al)