I pixel sono morti: perché dovresti smettere di usare i pixel in CSS

Vuoi progettare siti web come se fosse di nuovo il 1999? I pixel sono la strada da percorrere. Vai retro, sostieni le norme perché ciò che sai funziona già e finché funziona stai sul tuo prato e scuoti vigorosamente il pugno vigorously

Questo articolo non riguarda i piccoli pixel rossi verdi e blu che vedi sullo schermo, non preoccuparti che stiano bene. Si tratta dell’uso dei pixel all’interno di HTML & CSS. Non c’è bisogno di teoria, nei pixel CSS non # f-ing scala, roll crediti!

Ci Deve Essere Una Buona Ragione Perché…

Il web è basato su 21+ anni standard non è stato progettato per il mondo di oggi

Esodo 12:8

La stessa sera sono a mangiare la carne arrostita sul fuoco

La Bibbia suggerimenti che si dovrebbe mangiare la carne di un animale, il giorno della strage. Ma ora abbiamo frigoriferi, congelatori e cibo in scatola come soluzioni per nuovi e vecchi problemi.

CSS1 dice:

I display hanno all’incirca tutte le stesse dimensioni, quindi usa i font statici

Le nostre richieste sono cambiate dal 1996. Ora abbiamo una varietà molto più ampia di dispositivi, risoluzioni e rapporti di visualizzazione da considerare. Nonostante l’introduzione di nuove funzionalità, a differenza dell’industria alimentare, la tecnologia sottostante non è cambiata a causa di:

Retrocompatibilità

E giustamente perché ora tutti possiamo sopportare la miseria di Internet.

Le incomprensioni di Font-Size

In passato ho discusso il tema delle idee sbagliate di font-size con diversi colleghi di sviluppatori e designer.

La reazione che di solito danno è come se io sto dicendo loro che Babbo Natale non è reale, per la prima volta…

Font-size non specificamente correlate alla dimensione dei pixel sullo schermo

  • Uno font-family a 16px potrebbe avere “Un” char 24px alta, un altro font-family a 16px potrebbe avere “Un” char 26 pixel di altezza.
  • Non tenendo conto del modo in cui browser e sistemi operativi gestiscono la crenatura, la levigatura e, soprattutto, i rapporti dei pixel del dispositivo in modi diversi.
  • Gli user-agent hanno ciascuno un diverso set di valori predefiniti.

Quindi per favore chiudi qualsiasi discorso su “pixel perfect” sul web, non è possibile a meno che non miri a progettare una pagina statica per un singolo browser su una singola dimensione dello schermo per un singolo tipo di dispositivo.

NON UTILIZZARE MAI PIÙ I PIXEL PER IMPLEMENTARE I SITI WEB!

io non sono il primo né sarà l’ultimo a vomitare questo modo non controllare gli altri peccatori prima di lanciare la prima pietra. Fai un respiro profondo…

  • PRECISIONE IN VIRGOLA MOBILE: Tutte le unità di font in CSS (incluso px) sono in grado di gestire float nei browser moderni. Comunemente se 1px è “assunto” la dimensione equivalente di un pixel dello schermo (che non è corretto) può sembrare inutile usare decimali quando si progetta per un dispositivo con un rapporto pixel di 1. Se si visualizzano tali metriche su un dispositivo con un DPR di 2/ 3 o 4, si perde una quantità apparente di precisione a causa dell’evitamento dei decimali. REM ed EM “incoraggiano” una maggiore precisione tramite l’utilizzo decimale.
  • È UN’ILLUSIONE: i pixel in CSS NON sono pixel di dimensioni reali dello schermo. In realtà sono unità di riferimento ottico. Questa confusione a volte spinge gli sviluppatori web” professionisti ” ed esperti a fare cose stupide come creare mix di conversione pixel-to-em per i pre-processori CSS. Questo potrebbe essere il motivo per cui alcuni trascorrono così tanto tempo a litigare con i designer UX per piccole differenze di margine/ imbottitura. Il rapporto pixel del dispositivo rappresenta la dimensione dell’unità di riferimento ottico e dipende solo dal dispositivo o dal livello di zoom del desktop impostato dall’utente.
  • PX SI TRADUCE IN PIÙ MANUTENZIONE: non dire nulla di nuovo qui, ma è generalmente molto più facile mantenere percentuali rispetto ai contenitori di dimensioni pixel.
  • SCALA DELLE DIMENSIONI RELATIVE CON FONT-SIZE: utilizzare sempre le unità REM o EM in luoghi in cui di solito è necessario impostare una larghezza o un’altezza fissa. I contenitori con dimensioni EM sono relativi alla dimensione del carattere. Con le unità EM se si aggiorna la dimensione del carattere di un contenitore di testo, la larghezza o l’altezza (impostata in EMs) verranno ridimensionate proporzionalmente, il che significa che si modifica solo 1 valore anziché 3 quando si utilizzano i pixel. Con REM questo è vero se si modifica la dimensione del carattere principale del documento.

(Sì, EM è più avanzato di REM nonostante sia più vecchio, anche EM funziona meglio per i punti di interruzione delle query multimediali rispetto a REM tra i browser per qualche motivo).

Ci sono poche circostanze in cui i pixel sono necessari e di queste circostanze poche sono per costruire un layout effettivo.

EM vs REM

L’uso più triste di immagini mai.

Hai visto cosa ho fatto?

Una dimensione del carattere che utilizza EM è relativa alla dimensione del carattere del contenitore principale. Ma a volte la composizione è indesiderabile e più difficile da mantenere. Le unità REM sono relative al documento. In caso di dubbio utilizzare REM (IE9+) per semplicità.

Usando le unità REM

Se vieni dall’antico mondo dei pixel potresti trovare difficile iniziare improvvisamente a usare le unità REM. Ecco alcuni suggerimenti.

  1. Ovviamente 1rem è 16px in CSS: ma 16px in CSS non è una metrica reale nei pixel dello schermo, specialmente con la dimensione del carattere. Pertanto l’utilizzo di REM richiede lo stesso gioco di tentativi ed errori che hai fatto insieme ai pixel.
  2. ±0,5 poi ±0,25: Se si indovina qualsiasi tipo di lunghezza, non appena si arriva ragionevolmente in prossimità, aumentare o diminuire di 0,5, quindi di nuovo di 2,5 prima di fare ipotesi più specifiche. Questo di solito fa risparmiare tempo.
  3. Utilizzare una calcolatrice: La barra degli indirizzi è una calcolatrice in Chrome, duh!

Il futuro è cartesiano

Esempio usando MIMETIC.js utilizzando unità rem e percentuali.

CSS via HTML utilizza già un sistema di coordinate cartesiane, non è quello che sto contestando qui. Il problema è che nel complesso manca l’ingrediente chiave “proporzione”. Tutti gli elementi possono essere in proporzione rispetto alla finestra utilizzando %, vw o vh con l’eccezione della proprietà font-size. Nemmeno le unità REM possono aiutare. le unità vw e vh vengono ignorate in quanto interrompono l’accessibilità dello zoom nei browser desktop quando vengono utilizzate con la dimensione del carattere.

CSS &HTML costituiscono insieme un framework 2D impuro

Questo non è il caso di SVG. Ma SVG non presenta ancora il wrapping del testo o un modello di formattazione.

Siamo bloccati nel 1996. Per spostare il web design nel 21 ° secolo abbiamo almeno bisogno di un sistema 2D proporzionato per la dimensione del carattere.

Dobbiamo preservare tutto nell’asse x (larghezza della finestra) proporzionalmente. Ciò rende anche gli elementi della scala dell’asse y proporzionalmente, ma il ridimensionamento dell’asse y non influirà sul ridimensionamento dell’asse x.

Ci sono stati alcuni tentativi di JavaScript per rendere i font scalabili proporzionalmente nel browser, alcuni usano pixel e alcuni usano unità em/ rem. Quelli che usano i pixel sono difettosi.

Quindi perché i pixel sono morti?

  • sono statici (Ma tecnicamente così sono la maggior parte degli altri)
  • non rispettano la radice-dimensione del carattere dopo le modifiche (non sono veramente relativo alla radice font-size come REM e EM unità)
  • Proprietà come i margini, padding e line-height non scala, naturalmente, quando re-impostato in linea.
  • Sono assunti come numeri interi che di solito si traducono in implementazioni meno accurate su una varietà di rapporti di pixel diversi.
  • Apparentemente, Bootstrap 4 sta rilasciando pixel per REM.
  • I pixel creano l’illusione di essere uguali ai pixel sullo schermo, il che porta a idee sbagliate e nel lungo periodo diventa fonte di confusione per i nuovi sviluppatori.
  • È improbabile che i pixel diventino una soluzione praticabile per ridimensionare i font in futuro poiché il design riguarda in modo completo le proporzioni.

Questa è la mia opinione sul perché non ci sia un futuro serio per i pixel nel web design!

Grazie per aver tollerato ; -)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.