Le ultime versioni di Safari e Chrome includono il supporto per una specifica proposta che rende più facile per i siti supportare display ad alta risoluzione.
La funzione "image-set ()" era proposto a febbraio dall'ingegnere di Safari Edward O'Connor e, sebbene rimanga non ufficiale, è supportato dalle ultime versioni di entrambi i browser.
La questione di come supportare al meglio la crescente gamma di densità di pixel sul mercato è stata portata al culmine con l'introduzione del display Retina su MacBook Pro di Apple gamma a giugno.
Apple tratta ancora il web come un cittadino di seconda classe su iOS e Mac OS X
Sviluppatore Mozilla Robert Accettura si è lamentato dopo il lancio dei dispositivi Retina che Apple "tratta ancora il web come un cittadino di seconda classe su iOS e Mac OS X".
A meno che tu non crei un'app nativa, è difficile fare un uso corretto dei nuovi display di Apple, ha affermato. "Perché non è stata inclusa una soluzione per gli autori web quando l'iPad 3 è stato spedito? Sembra sciocco che non ci sia un'API per interfacciarsi correttamente con una delle funzionalità più pubblicizzate del nuovo dispositivo."
Il supporto per i display Retina è stato lento a venire da alcuni dei più grandi sviluppatori. Adobe ha mostrato una build inedita ottimizzata per Retina di Photoshop al lancio di Apple, ma il rilascio non è previsto fino a "entro la fine dell'anno". Microsoft ha affermato che Outlook 2011 per Mac supporta i display Retina, ma non sono stati annunciati piani per Word, Excel o PowerPoint e qualsiasi versione di Office 2013 per Mac saranno probabilmente diversi mesi dopo il PC lancio.
Retina in rete
Sul Web, la Guida ai contenuti Web di Safari di Apple consiglia di utilizzare le media query CSS3 per indirizzare i dispositivi ad alta densità. Viene rilevato il rapporto di densità dei pixel e vengono caricate le risorse a bassa o alta risoluzione per ottenere i migliori risultati.
Ora sia Safari 6 che Chrome 21 sono stati forniti con il supporto sperimentale per a nuova specifica del set di immagini proposta per CSS4, si dice che arriverà in iOS6. Qui, invece di dire al browser quale asset caricare su un particolare dispositivo, lo sviluppatore fornisce le opzioni e lascia che il browser decida quale sia il più appropriato nelle circostanze:
selettore {
sfondo: set di immagini (url (foo-lowres.png) 1x,
url (foo-highres.png) 2x) centro;
}
Nell'esempio sopra, "l'autore sta dicendo che foo-highres.png è
il doppio della risoluzione di foo-lowres.png", ha spiegato Edward O'Connor. I browser che supportano image-set() "potrebbero quindi utilizzare l'immagine 2x su un display ad alta risoluzione e l'immagine 1x su un display a bassa risoluzione". Le risorse non devono essere recuperate per determinare quale sia la migliore, quindi viene utilizzata meno larghezza di banda.
Supporto a bassa risoluzione
Tali opzioni potrebbero estendersi oltre i semplici controlli di risoluzione, ha affermato Jason Grigsby degli sviluppatori web mobili Nuvola Quattro.
"In futuro, spero che qualcuno che utilizza un dispositivo ad alta densità su una connessione lenta possa essere in grado di dire al browser che desidera solo immagini a bassa risoluzione", ha affermato. "Sarebbe ancora meglio se il browser potesse essere intelligente su quale immagine utilizzare in base all'attuale velocità della rete."
La specifica del set di immagini non è ancora ufficiale e Grigsby ha messo in guardia dall'usarla su siti live, poiché potrebbe cambiare in futuro. "Quindi, se hai un modo per cambiarlo facilmente in futuro, allora potrebbe avere senso gettare al vento la prudenza e iniziare a usarlo", ha spiegato. "Altrimenti, considera di usarlo in luoghi meno critici dove puoi sperimentare nuove tecnologie."
