Pixel CSS principali per i display Retina

Contenuto

• 01. Il nocciolo grintoso
• 02. Imballaggio nei pixel
• 03. Progettare con stile
• 04. Impostazione della risoluzione
• Questo mi piaceva? Leggi questo!

• Conoscenza necessaria: HTML5 e CSS di base
• Richiede: Editor di testo, processore di immagini, smartphone o tablet HD
• Tempo del progetto: 1 ora

Sopra c'è uno screenshot di un intero desktop Windows 98, circa 1999, su un moderno iMac 24 pollici con OS X Lion; sembra un francobollo. I cambiamenti nella risoluzione dello schermo cambiano gli effetti nel web design. I designer possono ora implementare una raffica di tecniche inaudite negli anni '90. Utilizziamo caratteri compatibili con TFT ben accennati e ritmi verticali per la tipografia, e creiamo layout a griglia contro metriche duodecimali per un'organizzazione pulita. Fondali ben bilanciati e loghi sbalorditivi scaturiscono dalle nostre tavolozze basate sulla ruota dei colori a 24 bit e dalle tecniche di sfumatura sempre più complesse.

Le risoluzioni aumentano man mano che le dimensioni dello schermo, in molti punti, si riducono. Display, smartphone e tablet ad altissima densità di pixel forniscono un nuovo ambiente in cui promuovere nuove tecniche. Ma i principi su cui si basano le tecniche di densità dei pixel sono più antichi di quanto molti sviluppatori web contemporanei possano realizzare.

Torna indietro di 16 anni: un gruppo di grandi designer si è seduto per elaborare un piano rivoluzionario. CSS era una nuova tecnologia nel 1996, non lo standard collaudato e affidabile per lo styling delle pagine web che è oggi. Il piano degli autori CSS era di separare le istruzioni di stile dalla dipendenza dai dispositivi. Oltre a consentire ai CSS di applicare lo stile alle pagine Web su uno schermo, ad esempio, volevano essere in grado di applicare lo stile anche alle pagine Web stampate. A tal fine, hanno inserito la seguente clausola nella loro definizione di pixel:

“Se la densità dei pixel del dispositivo di output è molto diversa da quella di un tipico display di un computer, l'UA dovrebbe ridimensionare i valori dei pixel. Il pixel di riferimento suggerito è l'angolo visivo di un pixel su un dispositivo con una densità di pixel di 90 dpi e una distanza dal lettore della lunghezza di un braccio. Per una lunghezza nominale del braccio di 28 pollici, l'angolo visivo è di circa 0,0227 gradi ".

Ciò significa che un "px" in CSS non ha mai significato un pixel del dispositivo. Né è un'unità di lunghezza. Il CSS px è definito come una misura angolare.

Ciò sorprende alcuni sviluppatori, che naturalmente presumono che un pixel CSS sia solo un pixel del dispositivo. In pratica questo può essere vero, ma i dettagli sono più complessi.

01. Il nocciolo grintoso

Il piano originale per i CSS era di supportare sia le stampanti che i monitor, ma divenne presto chiaro che anche i monitor avrebbero cambiato le loro capacità. Se i pixel CSS fossero semplicemente pixel del dispositivo, tutto sarebbe visualizzato sempre più piccolo nel tempo all'aumentare della risoluzione dello schermo. Il design della misurazione angolare si adattava bene non solo alla stampa, ma all'idea di indipendenza dalla risoluzione. Questo spiega perché le versioni successive dei CSS, incluso il CSS3 contemporaneo in fase di sviluppo da parte dei fornitori, definirono il px come una misura angolare. (L'unico cambiamento è stato aumentare la densità dei pixel di riferimento da 90 dpi a 96 dpi, rendendo il pixel di riferimento CSS un angolo leggermente più acuto, 0,0213 gradi.)

Poiché i px sono angoli non lineari, qualsiasi cosa con una misura angolare inferiore a 180 gradi può essere misurata in CSS px. Jeremy Clarkson è alto 6 piedi e 5 pollici. Da una distanza di sicurezza di 100 iarde, sembra essere di 57,5 ​​px di altezza. La luna terrestre è larga 24,3 px quando è piena, circa la metà di un Clarkson. Poiché l'unità non è lineare, le cose non si scalano sempre come ci si potrebbe aspettare. 1000px è 21,075 gradi, ad esempio, ma 2000px è 40,813 gradi, leggermente inferiore al doppio.

Le conversioni vengono eseguite utilizzando la figura magica 5376 e qualche semplice trigonometria. La figura magica deriva dalla moltiplicazione dei seguenti valori:

• La densità dei pixel di riferimento, 96ppi. I punti per pollice possono e spesso sono anche chiamati ppi, pixel per pollice, per scopi di risoluzione dello schermo.
• La distanza tra l'utente e il display, 28 pollici. Questa distanza una volta era chiamata ell fiamminga, inne e oldyn steill mysurementes. Un ell è la distanza che una persona può raggiungere.
• La quantità adimensionale, o numero senza unità, 2. Inseriamo questo per buona misura: la trigonometria coinvolta utilizza un angolo raddoppiato e dobbiamo dimezzare la distanza dei pixel prima di raddoppiare l'angolo.

Poiché le unità, dove utilizzate, sono in vecchi pollici imperiali, si annullano nelle formule, i cui angoli sono misurati in radianti anziché in gradi:

angolo = arctan (px / 5376) × 2
px = 5376 × tan (angolo / 2)

02. Imballaggio nei pixel

CSS 2.1 ha reso 96ppi la nuova risoluzione di riferimento. I display, tuttavia, non sono rimasti a 96 ppi. La schermata di iMac all'inizio di questo articolo è stata scattata su un display che utilizza circa 109 ppi. Se il pixel di riferimento fosse rispettato su questo dispositivo, sarebbero necessari 1,1354 (109ppi / 96ppi) pixel del dispositivo per visualizzare il pixel di riferimento alle stesse dimensioni angolari apparenti di 1px su un dispositivo a 96ppi. Poiché ciò non è fisicamente possibile, poiché il pixel è la più piccola unità di visualizzazione indivisibile, dovrebbe essere anti-alias. Per la maggior parte delle applicazioni, ciò comporterebbe un rendering sfocato e poco attraente.

Per questo motivo, CSS 2.1 - che è diventato una raccomandazione del W3C solo nel giugno 2011, ma era in bozza per molti anni prima - ha introdotto del testo che ha chiarito che il pixel di riferimento doveva essere utilizzato solo come un'ancora su cui basare il valore attuale. Si raccomanda che l'unità px si riferisca al "numero intero di pixel del dispositivo che si avvicina al meglio al pixel di riferimento". In altre parole, quando un dispositivo da utilizzare a una distanza dall'utente di 28 pollici supera 144ppi (96ppi × 1,5), allora dovrebbe ridimensionare un CSS CSS per indicare due pixel del dispositivo. Quando supera 240ppi (96ppi × 2,5), dovrebbe ridimensionare un CSS px per indicare tre pixel del dispositivo; e così via, et sequentia.

In pratica, questo era stato comunque discutibile, poiché non esistevano schermi di risoluzione adeguata per rendere la mancanza di ridimensionamento dei pixel un problema per i fornitori. Ciò significava che, almeno al di fuori della grafica vettoriale, il pixel di riferimento era considerato isomorfo con un pixel del dispositivo.

La comune (errata) concezione di un CSS px come pixel del dispositivo è stata messa in discussione nel giugno 2010, quando l'iPhone 4 è stato rilasciato con uno schermo da 326ppi. Il discorso di marketing di Apple lo ha bollato come "risolutivo". Ovviamente un iPhone viene utilizzato raramente con lo standard CSS a 28 pollici di distanza dall'utente e un utilizzo più ravvicinato significa che i pixel appaiono più grandi e la densità di pixel percepita diminuisce. CSS 2.1 consigliava una soglia di alto livello di 144ppi a 28 pollici. Per i 326ppi dell'iPhone 4, questa stessa densità di pixel percepita apparente viene raggiunta a 12,368 pollici (28 pollici × 144ppi / 326ppi) di distanza e oltre, molto vicino alla distanza nell'uso effettivo. Quindi è stata raggiunta la soglia di alto livello.

Nonostante Apple affermi, inoltre, di raggiungere il più alto livello percepibile di densità di pixel con lo schermo del suo iPhone 4 a 326ppi, i produttori continuano ad aumentare la loro densità. L'HTC Rezound (novembre 2011), ad esempio, ha un display da 342ppi e persino RIM ha sviluppato un Blackberry con uno schermo da 356ppi. Sui dispositivi mobili in cui la potenza è scarsa, è sorprendente che RIM non abbia abbandonato quei 30ppi extra per prolungare la durata della batteria. In precedenza erano i produttori di fotocamere ad avere una guerra di risoluzione: forse i produttori di cellulari stanno ora trovando la risoluzione un nuovo fattore di forma vendibile.

Qualunque sia la ragione, le densità e le risoluzioni dei pixel continuano ad aumentare. Con la soglia di upscaling CSS 2.1 raggiunta, l'upscaling doveva avvenire. Il modo in cui i fornitori hanno fatto questo varia Apple ha deciso di eseguire l'upscaling delle immagini sul Web per l'iPad di terza generazione, ad esempio, con un semplice rapporto 2x. Un'immagine a pixel singolo (1 × 1) verrebbe visualizzata su quel dispositivo utilizzando quattro (2 × 2) pixel del dispositivo fisico. Altri, come quelli che utilizzano Android, eseguono l'upscaling utilizzando rapporti diversi, spesso intorno a 1,5x o 1,6x. Gli utenti possono anche ridimensionare le pagine su alcuni dispositivi ingrandendo i livelli personalizzati. Su uno qualsiasi di questi dispositivi, a causa di questi fattori, le immagini possono apparire sfocate.

03. Progettare con stile

Una soluzione è usare i CSS. Qui vorremmo tornare al punto di partenza dell'idea inerente al design originale del CSS px come unità indipendente dalla risoluzione. Ma poiché la caratteristica di misurazione angolare del CSS px è ora mitigata dall'ancora di alto livello, la capacità di gestire la risoluzione doveva essere inserita altrove. Il posto più ragionevole per affrontarlo era come una nuova media query. Una media query è una condizione che consente l'utilizzo di determinate regole del foglio di stile solo se la condizione è soddisfatta dall'agente utente di rendering.

Dal momento che i fornitori di browser in questi giorni hanno la costante abitudine di innovare in direzioni completamente diverse tra loro, per dirla in modo educato, ce ne sono almeno quattro diversi @media soluzioni. Gli sviluppatori potrebbero aver bisogno di usare anche di più solo per essere sicuri. Uno è utilizzato da WebKit, un altro da Mozilla e un terzo da Opera. Non sembra ancora esserci una soluzione pubblicata per IE10. L'altra soluzione è quella fornita nella specifica CSS3, che è quasi una raccomandazione del W3C. La specifica CSS3 utilizza uno schema diverso da Mozilla, nonostante sia stata modificata da un dipendente Mozilla!

@media (-webkit-min-device-pixel-ratio: 1,5) {/ * WebKit * /}
@media (min - rapporto pixel-dispositivo-moz: 1,5) {/ * Mozilla * /}
@media (-o-min-device-pixel-ratio: 3/2) {/ * Opera * /}
@media (risoluzione minima: 1.5dppx) {/ * CSS3 * /}

La variante Mozilla non lo è -moz-min-rapporto-pixel-dispositivo Come ci si può aspettare. Per la massima compatibilità cross-browser, dovresti usare qualcosa del genere:

intestazione {
sfondo: url ([email protected]);
}
@media only screen e (-webkit-min-device-pixel-ratio: 2),
solo schermo e (-moz-min-device-pixel-ratio: 2),
solo schermo e (-o-min-device-pixel-ratio: 2/1),
solo schermo e (rapporto pixel-dispositivo minimo: 2),
solo schermo e (risoluzione minima: 2dppx) {
intestazione {
sfondo: url ([email protected]);
dimensione dello sfondo: 50%;
}
}

Questo esempio imposterebbe l'immagine di sfondo di un elemento di intestazione per utilizzare un pixel del dispositivo su schermi 1dppx e 2dppx, ma causerebbe comunque un upscaling basato sul ricampionamento potenzialmente sfocato sui dispositivi che utilizzano una densità di pixel tra questi valori. Dobbiamo usare rapporto pixel-dispositivo minimo anche nel caso in cui CSS3 si accontenti di quello invece che, o anche, del presente risoluzione minima. Quando un browser ha più pixel a disposizione di quelli che normalmente potrebbero essere renderizzati con quattro punti per area di pixel, utilizza semplicemente un punto per area di pixel o ricampiona l'immagine. Questa soluzione si rivolge solo ai browser moderni che supportano queste funzionalità, ma ci aspettiamo comunque di trovare browser moderni sui moderni dispositivi con pixel ad alta densità.

Il ridimensionamento è stato eseguito impostando la dimensione dell'immagine al 50%. Per le immagini standard, puoi anche impostare gli attributi di altezza e larghezza in modo appropriato per ridimensionare il contenuto. La specifica HTML5 mette in guardia contro questa tecnica, dicendo che "gli attributi di dimensione non sono destinati ad essere utilizzati per allungare l'immagine", ma la pratica è comune. In CSS3, potresti ancora usare ancora un'altra tecnica.

04. Impostazione della risoluzione

In combinazione con il @media tecnica, CSS3 introduce una nuova proprietà chiamata risoluzione dell'immagine, che può modificare la risoluzione di immagini specifiche. Può essere pensato come una sorta di ridimensionamento personalizzato dell'immagine. Sfortunatamente per gli sviluppatori che ora devono scegliere come target dispositivi a 1–2 dppx e tra 1 e 2 dpi, il risoluzione dell'immagine la proprietà non è semplicemente adattiva: non fa nulla in proporzione all'upscaling dei pixel del dispositivo. Ciò significa che questa tecnica deve ancora essere utilizzata all'interno delle media query. Da risoluzione dell'immagine si applica correttamente alle immagini di sfondo e al contenuto principale, questo è il modo in cui la parte della regola dell'intestazione specifica dell'esempio di media query sopra potrebbe essere scritta utilizzando la nuova proprietà:

intestazione {
sfondo: url ([email protected]);
risoluzione dell'immagine: 2dppx;
}

Avremmo anche potuto usare 192dpi invece di 2dppx: hanno un rapporto fisso a causa della definizione della densità dei pixel di riferimento di 96 dpi del CSS. Ma poiché uno dei principali vantaggi di questa sintassi è rendere chiaro a cosa si rivolge gli sviluppatori, l'uso di 2dppx è una best practice più ragionevole in questo caso.

Da risoluzione dell'immagine è solo una caratteristica prevista di CSS3, è improbabile che abbia un ampio supporto per i browser a breve termine e i fornitori possono scegliere di implementare una miriade di sintassi alternative comunque come hanno fatto con il risoluzione minima proprietà.

L'utilizzo dei CSS non è l'unico modo per accogliere nuove densità di pixel. Esistono una miriade di soluzioni lato client e server, shim e polyfill per raggiungere lo stesso obiettivo. Alcuni usano JavaScript e ispezionano window.devicePixelRatio per eseguire la loro magia. Ma questo problema era stato previsto in CSS in una certa misura nel 1996. L'innovazione basata sulle specifiche e sull'implementazione si è surriscaldata alla luce delle sfide poste dalle più recenti tecnologie di visualizzazione, ma i CSS rimangono una soluzione praticabile, se non ottimamente elegante, per l'indipendenza dalla risoluzione.

Questo articolo è apparso per la prima volta nel numero 230 della rivista .net.

Sean B. Palmer inamidst.com è uno storico della prima età moderna, con un background in informatica. È stato editore delle specifiche EARL 1.0 e XML Accessibility Guidelines del W3C e ha contribuito a libri su HTML, JavaScript e web semantico.

Questo mi piaceva? Leggi questo!

• Software di progettazione grafica gratuito a tua disposizione adesso!
• Brillante selezione di tutorial su Wordpress
• Crea un moodboard perfetto con questi suggerimenti professionali