Oltre alla parte relativa ai display retina, vedremo una breve introduzione della proprietà image-set, facciamo un po’ di chiarezza su questa proprietà del set CSS4 ( per il momento la proprietà viene supportata solo da Safari 6 e Chrome 21 ).

Display Retina

Devo dire che nemmeno io ho subito capito come funzionano i display retina e come ci dobbiamo comportare noi Frontend Developer quando usiamo le immagini ( che siano con il tag <img o che siano messe come sfondo via css ). Non è stato subito chiaro, ma ormai abbiamo raggiunto un buon livello di maturità in quanto a conoscenza e case history, quindi possiamo “mettere giù” qualche regola base per lavorare al meglio.

Non entrerò nei dettagli hardware perché non ci interessano, parliamo della parte software, cioè il nostro codice css.

Cosa succede quando voglio mostrare un’immagine su un display retina, in modo che questa non si veda sfocata?

Il caso delle immagini di sfondo via CSS

Nel caso in cui vogliamo inserire una immagine di sfondo ( pratica ormai sempre più sconsigliata, ad esempio per le icone è diventata obsoleta ), ci basterà utilizzare le media query che verificano la densità di pixel. La media query sarà:

[syntax type=”css”]@media
only screen and ( -webkit-min-device-pixel-ratio: 2),
only screen and( min–moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1)
/* Inserisci qui le tue regole CSS specifiche per i display retina */
}[/syntax]

In pratica stiamo dicendo al browser, che se il display è retina e ha un rapporto di 2 a 1, applicheremo delle regole CSS diverse rispetto a quando questa condizione non viene rispettata.

Possiamo fare di meglio, possiamo specificare un’immagine di sfondo anche in base alla risoluzione dello schermo, per poter, ad esempio, dividere il caso in cui l’utente si trova su un display retina tablet o smartphone.

Il codice che dovresti ottenere, sarà qualcosa di simile a questo:

Per i display retina con schermi piccoli:

[syntax type=”css”]@media
only screen and ( -webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min–moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Inserisci qui le tue regole CSS specifiche per i display retina di piccole dimensioni */
}[/syntax]

Per i display retina con schermi di medie dimensioni:

[syntax type=”css”]@media
only screen and ( -webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min–moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Inserisci qui le tue regole CSS specifiche per i display retina di medie dimensioni */
}[/syntax]

Per utilizzare correttamente queste regole, quindi, dovremo inserire un’immagine di sfondo grande il doppio di quella normale per display non retina. Ad esempio, se abbiamo un’icona che deve essere visualizzata 100×100 pixel, dovremo crearla 100×100 pixel per i display non retina e 200×200 pixel per quelli retina, andando ad agire sulla proprietà “background-size” per ottenere la “grandezza” corretta.

[syntax type=”css”]

/* Non retina */
#selettore {
background: url(’img-1x.png’);
background-size: 100px 100px;
}

/* Retina */
#selettore {
background: url(’img-2x.png’);
background-size: 100px 100px;
}

[/syntax]

 

Capito? molto semplice.

Il futuro sarà di image-set?

Esiste una proprietà css che permette, tramite una semplicissima riga css, di specificare varie immagini di sfondo per diverse risoluzioni. Non la vedremo in modo più approfondito di così, perché la proprietà è così poco supportata da essere ancora abbastanza inutile, ma è interessante vedere come funziona.

Esempio:

[syntax type=”css”]#selettore {
background-image: -webkit-image-set(url(‘image-1x.jpg’) 1x, url(‘image-2x.jpg’) 2x);
}[/syntax]

In pratica, gli passiamo path dell’immagine e aspect-ratio a cui è associata e in cui verrà mostrata. Molto semplice e immediata.

Ma torniamo un attimo alla tecnica delle immagini di sfondo con le media query.

Il problema della tecnica Responsive standard ( la tecnica cioè che conoscono e applicano tutti )

Come al solito, le media query “pure”, prese così come vengono rilasciate, sono davvero uno strumento ottimo se non hai alternative, ma su Magento diventano presto obsolete.

Se stai usando, come me, la tecnica Smith, stai di fatto realizzando 2 fogli di stile diversi: uno per smartphone e uno per desktop ( lasciamo per il momento da parte il discorso tablet, che va affrontato a parte ).

Con la tecnica Smith, puoi “banalmente” servire solo il foglio di stile che ti serve, quando stai mostrando il sito ad uno smartphone.

C’è quindi bisogno di inserire TUTTE le regole css nello stesso foglio di stile, quindi caricarlo sempre su tutti i browser e, poi, lasciare all’aspect-ratio e ad altre proprietà il compito di utilizzare la regola più adatta che rispetti le condizioni da noi impostate?

Assolutamente no!

Come ti mostravo nello schema responsive standard vs Smith in questa pagina, quando Magento si accorge che il dispositivo è uno smartphone, include in pagina SOLO il file che davvero gli serve, con SOLO le regole che servono alla renderizzazione del sito per mobile.

Immagina questo meccanismo su siti di media grandezza e capisci che stiamo facendo fare una bella cura dimagrante ai file e alle risorse che vengono caricate dal browser.

Il problema è di concetto: nel responsive “tradizionale”, il browser carica tutti i fogli di stile per poi decidere quali regole applicare.

Con Smith, prima decidi quali regole css effettivamente servono, le metti in un foglio di stile dedicato al dispositivo e il browser deve caricare SOLO quello, una pratica che è decisamente ottimale rispetto al “carico tutto, poi si vede”.

E per quanto riguarda le immagini inserite con il tag <img> ?

Qui si apre un altro mondo, che, se possibile, è pure molto peggio delle immagini di sfondo. Si perché il “nuovo” trend è “Mobile First”. Questa cosa fa apparire il designer o il frontend developer “un tipo avanti”, uno che sa il fatto suo. Invece non sa proprio un bel niente.

“Mobile first” non è che una dicitura, per indicare che devi pensare prima agli schermi mobile, quando progetti un sito, poi pensi agli altri dispositivi. Dispositivi mobile, però, significa immagini ad alta risoluzione.

Immagina lo scenario ( lasciamo perdere, per ora, tutti i problemi di performance legati all’utilizzo dei javascript nel responsive tradizionale ):

Hai un HTML generato che è lo stesso per tutti i dispositivi. Quindi tu stai caricando l’immagine “mobile first” ( ad alta risoluzione ) per fare in modo che si veda bene sui display retina.

Cosa succede, ad esempio, se abbiamo un’immagine 400×400 per retina? Che in realtà è un’immagine 800×800. Su retina tutto ok, si vedrà bene. Ma sui display non retina?

Si vedrà un’immagine 800×800, e questo non va bene, ovviamente, se vogliamo averne una che sia 400×400.

Quindi cosa si fa, in genere? Si scala l’immagine via CSS, con le proprietà width e height.

Cosa comporta, questa pratica?

Che io sto costringendo l’utente che ha un monitor non retina a scaricare un’immagine grossa ( e quindi pesante ) il doppio rispetto a quello che davvero gli servirebbe.

Nel prossimo futuro, chissà quanto ancora lontano ( speriamo non troppo! ) questo scenario diventa meno cupo grazie alla proprietà “srcset”. Purtroppo il supporto è ancora molto scarso, infatti questo attributo viene supportato da:

  • Edge ( solo in parte )
  • Firefox 38+
  • Chrome 42+
  • Safari 9 ( completo ) e 8 ( parziale )
  • iOS Safari 8.4 parziale e 9 completo
  • Android Browser 40
  • Chrome for Android 42

Tutti gli altri rimangono fuori, e sono davvero una fetta ampia di mercato per ignorarla, almeno per ora.

Il suo utilizzo è piuttosto semplice, facciamo un esempio:

[syntax type=”html”]<img src=“img-1x.jpg” srcset=“img-2x.jpg 2x, img-65x.jpg 6.5x”>[/syntax]

Quindi, l’attributo srcset accetta vari parametri separati da virgola, ogni parametro è composto da 2 valori:

  • nome dell’immagine
  • risoluzione a cui è associata

Possiamo anche passare larghezza e altezza, come parametri e la cosa comincia leggermente a complicarsi.

Ma quindi, non esiste una soluzione semplice e già supportata al 100%?

Ovviamente si, altrimenti non saremmo qui: io a spiegare e tu a leggere.
La tecnologia Smith, permette di “servire” l’immagine corrispondente in base al tipo di dispositivo:

  • desktop
  • tablet
  • smartphone

Quindi, semplicemente, ogni dispositivo avrà un HTML generato diverso e iper-ottimizzato, come nell’esempio seguente:

Codice Desktop
[syntax type=”html”]<img src=“desktop.jpg” />[/syntax]

Codice Smartphone
[syntax type=”html”]<img src=“smartphone.jpg” />[/syntax]

Codice Tablet
[syntax type=”html”]<img src=“tablet.jpg” />[/syntax]

Così non hai problemi di performance, e scusa se è poco 🙂

Che ne dici, pensi sia utile imparare la tecnologia Smith?
Mi sa che ti conviene iscriverti subito alla newsletter, oppure rimani pure indietro, insieme a quelli che non si aggiornano e non sfruttano le nuove tecnologie già supportate perfettamente.

A te la scelta, spero di esserti stato utile!