Nu există așa ceva ca o unitate absolută CSS

Publicat: 2022-03-10
Rezumat rapid ↬ Ce sunt unitățile absolute? Care sunt diferențele dintre unitățile relative și absolute și cum creăm dimensiuni precise pe web? În acest articol, Elad Shechter explică de ce unitățile absolute CSS nu sunt atât de absolute.

Când începem să învățăm CSS, constatăm că unitățile de măsură CSS sunt clasificate ca relative sau absolute. Unitățile absolute sunt înrădăcinate în unități fizice, cum ar fi pixeli, centimetri și inci. Dar de-a lungul anilor, toate unitățile absolute din CSS și-au pierdut legătura cu lumea fizică și au devenit diferite tipuri de unități relative, cel puțin din perspectiva web.

Este important să rețineți că există încă diferențe semnificative între unitățile relative și absolute . Unitățile relative CSS sunt dimensionate conform altor definiții de stil definite de elementele părinte sau sunt afectate de dimensiunea unui container părinte. În ceea ce privește unitățile absolute, ne vom scufunda și vom vedea cum sunt afectate de alte lucruri, cum ar fi ecranul și sistemul de operare al dispozitivului.

Unitățile relative includ unități precum % , em , rem , unități de vizualizare ( vw și vh ) și multe altele. Cea mai comună unitate absolută este pixelul ( px ). Pe lângă asta, avem unitatea de centimetri ( cm ) și unitatea de inci ( in ).

Acum, să explorăm de ce unitățile absolute CSS nu sunt atât de absolute.

Pixeli CSS

Pixelii au fost cea mai comună unitate de CSS, datând de la începutul webului. În vechea lume a ecranelor desktop, înainte de a avea vreun smartphone, pixelii ecranului erau întotdeauna echivalenti cu pixelii CSS.

În 2007, de exemplu, cea mai comună rezoluție pentru desktop a fost 1024 × 768 pixeli. Pe atunci, în mod normal, dăm paginilor noastre web o lățime fixă ​​de 1000 de pixeli pentru a se potrivi întregii pagini, iar pixelii rămași ar fi salvați pentru bara de defilare a browserului.

Ecran de desktop vechi
Monitoarele obișnuiau să arate destul de diferit pe vremea aceea! (Credit imagine: Shutterstock) (Previzualizare mare)

Ecrane pentru smartphone

Smartphone-urile au adus o altă evoluție liniștită, începând epoca ecranelor cu densitate mare. Dacă luăm în considerare un iPhone 12 Pro, al cărui ecran are 1170 pixeli lățime, am număra fiecare 3 pixeli de pe dispozitiv ca 1 pixel în CSS.

Densitatea ecranelor iPhone de-a lungul anilor
Ecranele de înaltă densitate au cauzat prima separare între pixelii dispozitivului și pixelii CSS. (Credit imagine: Wikipedia) (Previzualizare mare)

Când dimensionăm în mobil, măsurăm în funcție de pixeli CSS, nu în funcție de pixelii dispozitivului. În concluzie:

  • Pixeli CSS sunt pixeli logici .
  • Pixelii dispozitivului sunt pixeli fizici reali.
Comparație ecrane de înaltă densitate
1 pixel CSS poate fi mai mult de 1 pixel de dispozitiv. (Previzualizare mare)

Bine, dar cum rămâne cu dispozitivele desktop? Mai funcționează cu același calcul vechi de pixeli? Să vorbim despre asta.

Ecrane desktop în 2021

Ecranele de înaltă densitate au venit pe laptopuri câțiva ani mai târziu. MacBook-urile din 2014 au primit primele ecrane „retină” (retina fiind sinonimă cu densitate mare).

În zilele noastre, majoritatea laptopurilor au un ecran de înaltă densitate.

Să luăm în considerare MacBook -urile:

  • MacBook Pro de 13,3 inchi are un ecran care are 2560 pixeli lățime, dar care se comportă ca 1440 pixeli. Aceasta înseamnă că fiecare 1.778 de pixeli fizici acționează ca 1 pixel logic.
  • MacBook Pro de 16 inchi are un ecran cu o lățime de 3072 pixeli, dar care se comportă ca 1792 pixeli. Aceasta înseamnă că fiecare 1.714 pixeli fizici acționează ca 1 pixel logic.
Ecran retină încorporat care arată 16 inchi cu 3072 ori 1920 pixeli
(Previzualizare mare)

Printre laptopurile PC , am testat două ecrane de 15,6 inchi, unul cu rezoluție full HD și celălalt cu rezoluție 4K. Rezultatele au fost interesante:

  • Ecranul full-HD de 15,6 inchi are o lățime de 1920 pixeli, dar se comportă ca 1536 pixeli. Aceasta înseamnă că fiecare 1.25 pixeli fizici acționează ca 1 pixel logic.
  • Ecranul 4K de 15,6 inchi are o lățime de 3840 pixeli, dar se comportă, din nou, ca 1536 pixeli. Aceasta înseamnă că fiecare 2.5 pixeli fizici acționează ca 1 pixel logic.
Două ecrane de 15,6 inchi în comparație cu Full HD în stânga și 4K în dreapta, ambele având o rezoluție CSS de 1536 ori 864 pixeli
Aceste dispozitive PC au rezoluții diferite, dar acționează la fel pentru rezoluția CSS. (Credit imagine: Elad Shechter) (Previzualizare mare)

După cum puteți vedea, conexiunea dintre pixelii fizici reali (adică dispozitivul) și pixelii CSS (adică logici) aproape a dispărut.

Ecranele au devenit mai dense de-a lungul anilor

În trecut, dacă te uitai cu atenție la un ecran, puteai să-i vezi de fapt pixelii. Când tehnologia ecranelor s-a îmbunătățit, producătorii au început să creeze ecrane cu densitate mai mare.

Un prim-plan al unei imagini de pe un ecran care arată pixelii dispozitivului
În trecut, dacă te apropiai suficient de ecran, puteai vedea pixelii dispozitivului. (Previzualizare mare)

Lectură recomandată : Ce înseamnă de fapt un Web pliabil?

De ce calculăm pixelii logici diferit?

De-a lungul anilor, pe măsură ce ecranele au devenit mai dense, nu am putut încadra mai mult conținut în aceeași dimensiune a ecranului doar pentru că ecranul are mai mulți pixeli.

Gândește-te o clipă. Luați în considerare Samsung Galaxy S21 Ultra . Dimensiunea sa mai îngustă este de 1440 de pixeli fizici. L-am putea încadra cu ușurință într-un ecran de desktop obișnuit. Dar dacă am face-o, textul ar fi mic până la punctul de a fi ilizibil. Din această cauză, separăm pixelii fizici de pixelii logici.

Dimensiunile în CSS (adică lățimea și înălțimea), apoi, sunt calculate conform pixelilor logici CSS. Desigur, putem folosi pixeli fizici pentru a încărca conținut de înaltă densitate , cum ar fi imagini și videoclipuri, astfel:

 <img src="image-size-1200px.jpg" width="300" >

OK, pixelii CSS nu sunt egali cu pixelii fizici ai dispozitivului. Dar avem centimetri și inci. Acestea sunt unități fizice conectate la lumea fizică, nu? Să le verificăm.

Mai multe după săritură! Continuați să citiți mai jos ↓

CSS inci și centimetri CSS

Oriunde folosim unități fizice precum inci și centimetri, știm că acestea sunt unități absolute.

M-am gândit că, dacă pixelii CSS nu sunt egali cu pixelii dispozitivului, atunci poate că ar fi o idee bună să folosiți unități fizice, cum ar fi inci și centimetri, pe web. Sunt unități absolute, nu?

Ca să fiu sigur, l-am testat. Am creat o cutie cu lățimea și înălțimea de 1 centimetru și i-am dat o culoare de fundal de roșu. Am luat o bandă de măsură adevărată și am primit o surpriză:

Un centimetru CSS nu este egal cu un centimetru fizic.

Aici testez o unitate de centimetri CSS cu o bandă de măsurare pe un MacBook de 13 inci de la jumătatea anului 2019:

Compararea unui centimetru CSS cu un centimetru fizic folosind o bandă pe un ecran MacBook de 13 inchi
După cum puteți vedea, un centimetru CSS nu este în mod evident egal cu unul fizic. (Credit imagine: Elad Shechter) (Previzualizare mare)

Rezultatul este același pentru inchi CSS:

Un inch CSS nu este egal cu un inch fizic.

Același lucru este valabil și pentru unitățile pica ( pc ) și milimetri ( mm ). Acestea corespund fie unei părți a unui inch CSS, fie a unui centimetru CSS, niciunul dintre acestea nu este conectat la un inch real sau un centimetru real.

De ce inci și centimetri CSS nu sunt inci și centimetri reali

Începând cu anii 1980, piața PC-urilor a determinat ca un inch CSS să fie echivalent cu 96 de pixeli. Acest calcul al pixelilor era direct legat de standardul DPI/PPI (pixeli pe inch) al sistemului de operare Windows al Microsoft pentru monitoare la acea vreme, cel mai comun dintre acestea având un standard de 96 DPI.

Aceasta însemna că 1 inch CSS ar fi întotdeauna echivalent cu 96 de pixeli CSS.

În ceea ce privește centimetrii CSS, fiecare centimetru este calculat direct din inci, ceea ce înseamnă că 1 inch este echivalent cu 2.54 centimetri. Aceasta înseamnă că fiecare centimetru CSS va fi întotdeauna egal cu 1 37.7952756 CSS.

Cu alte cuvinte: 1cm = 37.7952756px (96px / 2.54) .

Vezi stiloul [CSS Real Dimensions!](https://codepen.io/smashingmag/pen/BaRJvWj) de Elad Shechter.

Vedeți Pen CSS Real Dimensions! de Elad Shechter.

Acea decizie, care părea a fi o idee bună la începutul industriei PC-urilor (care avea un fel de standard), s-a dovedit a fi o decizie proastă care ar face CSS-ul inch și centimetru învechit și inutil (cel puțin din perspectiva internetul).

Rețineți că în anii 1980, Apple avea un standard diferit de 72 DPI pentru ecrane.

Pixelii ecranului devin mai denși

După cum am menționat, DPI-ul ecranelor a devenit mai dens de-a lungul anilor și am văzut ecrane de 120 până la 160 DPI. Și pentru că 1 inch CSS este întotdeauna egal cu 96 de pixeli CSS, înseamnă că acum un inch CSS nu este egal cu un inch fizic real.

Un tabel care compară densitatea pixelilor de bază în trei categorii de dispozitive: un PC din secolul XX cu afișaj CRT, laptop modern cu LCD și smartphone-uri și tablete
(Credit imagine: „CSS Length Explained”, Mozilla Hacks) (Previzualizare mare)

Deoarece un inch CSS și un centimetru CSS sunt convertiți direct din pixeli CSS și pentru că ecranele au primit mai multe DPI-uri de-a lungul anilor, am ajuns la punctul în care aceste unități nu reprezintă ceea ce ar trebui să reprezinte pe ecrane .

Unitate punct CSS

Unitatea punct ( pt ) este una dintre unitățile mai puțin recunoscute ale CSS. După cum spune Wikipedia:

„În tipografie, punctul este cea mai mică unitate de măsură. Este folosit pentru măsurarea dimensiunii fontului, a interioarelor și a altor elemente dintr-o pagină tipărită.”

Pagina Wikipedia arată o riglă cu scara de puncte în partea de jos și scara în inci în partea de sus:

Riglă afișată pe pagina Wikipedia
(Credit imagine: Wikipedia) (Previzualizare mare)

Înainte de a înțelege de ce această unitate nu este cu adevărat o unitate absolută pentru web, să trecem peste unitățile de bază ale ecranelor și imprimantelor.

PPI și DPI

Am menționat deja DPI și s-ar putea să fi auzit acești termeni în trecut, dar dacă nu ați înțeles niciodată despre ce este vorba exact, iată o instrucție rapidă:

  • PPI
    Ecranele sunt construite dintr-o mulțime de puncte mici de lumină, numite pixeli. Pentru a măsura densitatea pixelilor, numărăm numărul de pixeli care se potrivesc cu 1 inch, numiți pixeli per inch (PPI).
  • DPI
    Imprimantele imprimă puncte color. Pentru a reprezenta densitatea punctelor imprimantei, numărăm numărul de puncte care se potrivesc cu 1 inch de hârtie, numite puncte per inch (DPI).
PPI vs DPI: PPI se referă la rezoluția afișajului, în timp ce DPI se referă la rezoluția imprimantei
(Credit imagine: Shutterstock) (Previzualizare mare)

Pe scurt, acestea sunt două moduri de a măsura densitatea informațiilor vizuale pe care le putem încadra în 1 inch.

  • PPI : pixeli pe inch (pentru ecrane)
  • DPI : puncte pe inch (pentru imprimante)

Este important de menționat că numărul de pixeli și puncte CSS în 1 inch este atât pentru lățime, cât și pentru înălțime. Aceasta înseamnă că pe un ecran de 96 PPI, o cutie cu o înălțime și lățime de 1 inch va avea o dimensiune totală de 9216 pixeli ( 96 × 96 px = 9216 px).

Iată o demonstrație vizuală de 1 inch cu un ecran de 10 PPI:

O demonstrație de 1 inch cu un ecran de 10 PPI
(Credit imagine: Shutterstock) (Previzualizare mare)

Iată câteva exemple de calcule reale ale CSS PPI:

Rezoluție CSS
(Pixeli)		 CSS PPI CSS inci
(latime si inaltime)
96x96 96 1×1
141×141 141 1×1

„DPI” pentru ecrane

Producătorii de dispozitive mobile și desktop preferă să-și exprime măsurătorile ecranului în DPI, nu în PPI. Dar nu lăsați asta să vă încurce: este întotdeauna PPI pentru ecrane și DPI pentru imprimante .

Standarde DPI/PPI

Pentru a reprezenta toate acele puncte și pixeli, avem unitatea punct ( pt ).

Dar unitatea de puncte a CSS derivă din DPI implicit al imprimantei, care, din nou, a fost decis în anii 1980 și este egal cu 72 DPI. Aceasta înseamnă că 1 inch de CSS este întotdeauna egal cu 72 de puncte.

  • 1 inch = 72 de puncte
  • 1 punct = 1/72 din 1 inch

Pixeli pentru web, puncte pentru imprimante

Pentru web, unitatea DPI nu are sens. Web DPI este definit după un alt standard ( 96 DPI), despre care am vorbit deja când am calculat un inch CSS și un centimetru CSS. Din acest motiv, nu există niciun motiv pentru a utiliza unitatea de puncte pe web.

Notă : 1 punct nu este egal cu pixeli (CSS).

  • 1 punct = 1.333 pixeli
  • 72 de puncte = 1 inch
  • 72 puncte = 96 pixeli

Imprimante

În acest articol, am vrut în principal să demonstrez de ce nu există unități absolute pentru web. Dar cum rămâne cu utilizarea lor pentru imprimante? Există un motiv pentru a folosi CSS inci sau centimetri sau unități de puncte pentru imprimante?

Testul meu de imprimare

Am efectuat un mic test pentru a verifica dacă standardul DPI din anii 1980 funcționează corect pe imprimante. Am creat două cutii: una cu lățimea și înălțimea de 72 de puncte, iar a doua cu lățimea și înălțimea de 1 inch.

Am imprimat aceste două cutii pe o imprimantă laser pe care o am în birou. Iată Codepen-ul meu pentru puncte de testare și inci pentru imprimante:

Vedeți Pen [1 inch](https://codepen.io/smashingmag/pen/ZEKxMMy) de Elad Shechter.

Vedeți Pen 1 inch de Elad Shechter.

Rezultat

Am imprimat această demonstrație pe o imprimantă laser. Spre surprinderea mea, dacă folosesc 72 puncte (sau 1 inch), obțin exact 1 inch. Aceasta înseamnă că, pentru imprimante, există încă, poate, un motiv bun pentru a utiliza unități CSS, cum ar fi puncte, inci și centimetri.

În stânga, imprimanta. În dreapta, testul tipărit.
(Credit imagine: Elad Shechter) (Previzualizare mare)

Imprimantele pot imprima mai multe DPI-uri, dar dacă lucrăm la 100% zoom pe imprimantă, atunci 72 puncte (sau 1 inch) de CSS vor echivala cu un inch fizic real.

Memento : Acest articol se referă mai mult la conectarea unităților absolute la web decât la imprimante. Desigur, rezultatele se pot schimba pe diferite tipuri de imprimante.

Lectură recomandată : Utilizarea culorilor HSL în CSS

Încercarea de a crea dimensiuni precise pe web

Dacă ne uităm la MacBook Pro de 16 inci, care are 1 raport de 1.714 pixeli fizici la fiecare pixel CSS, nu putem prezice cu exactitate dimensiunile pe web.

Dacă încercăm să ghicim raportul real de pixeli ai dispozitivului pe MacBook Pro de 16 inchi folosind window.devicePixelRatio , acesta va returna un raport incorect de 2 , în loc de 1.714 . (Și asta fără a ține cont de starea de zoom a browserului web și a sistemului de operare.)

O ilustrație a unei benzi de măsurat
(Credit imagine: Shutterstock) (Previzualizare mare)

De ce avem nevoie de unități CSS absolute reale

Când dorim să definim o dimensiune fixă ​​pentru un element din bara laterală, vom folosi pixeli CSS. Dar dacă te gândești bine, pixelii CSS nu au nicio semnificație în zilele noastre. După cum am văzut mai sus, pe majoritatea smartphone-urilor și desktopurilor, pixelii CSS nu mai descriu pixelii dispozitivului.

Pe baza acestui fapt, cred că avem nevoie de unități fizice reale pentru CSS (cum ar fi o unitate reală de centimetru sau inch), deoarece pixelii CSS nu mai au nicio semnificație adevărată pe web.

Merită menționat că Firefox a implementat o unitate milimetrică fizică reală ( mozmm ​​), dar a eliminat-o în versiunea 59. Nu știu de ce au eliminat-o. Poate pentru că atât de multe lucruri depind deja de pixelii CSS, cum ar fi imaginile receptive și unitățile em și rem . Dacă am încerca să adăugăm o nouă măsurătoare fizică, poate că ar cauza mai multe probleme decât rezolvă.

Se pare că oamenii de pe internet s-au obișnuit atât de mult să gândească în pixeli încât, deși unitatea de pixeli CSS și-a pierdut conexiunea cu pixelii dispozitivului, vom continua să folosim unitatea.

Și în cazul în care încă credeți că pixelii CSS sunt o unitate de măsură excelentă, încercați să explicați unui nou dezvoltator web ce măsoară de fapt această unitate.

Deocamdată, nu avem nicio modalitate reală de a descrie dimensiunile fizice în CSS.

Deci, pixelul CSS este cel mai prost tip de unitate absolută - cu excepția tuturor celorlalte.

A rezuma

La începutul acestui articol, am spus că unitățile CSS absolute au devenit ca noi tipuri de unități relative. Am început cu pixeli CSS și am văzut diferența dintre pixelii CSS și pixelii dispozitivului.

Apoi, am descoperit că inci și centimetri CSS sunt convertiți direct din pixeli CSS și nu sunt conectați la inci și centimetri reali. În cele din urmă, am vorbit despre unitatea de puncte și, din nou, despre modul în care această unitate nu are o semnificație absolută pentru web.

Cuvinte finale

Asta e tot. Sper că ți-a plăcut acest articol și ai învățat din experiența mea. Dacă vă place această postare, aș aprecia să aud despre ea și să o distribui.

Referințe

  • „Lungimea CSS explicată”, Tim Chien, Robert Nyman, Mozilla Hacks
  • „Puncte pe inch”, Wikipedia
  • „Punctul (Tipografie)”, Wikipedia
  • „Valori și unități CSS”, W3C