Come sapete, c'è molto di più nella realizzazione di siti Web reattivi che in larghezza. Sono necessari sensori che forniscono feedback per regolare i siti in base ad altri fattori.
Il modo migliore per migliorare il nostro feedback dal sensore o browser dell'utente è utilizzare una libreria JavaScript chiamata Modernizr. In questo articolo spiegherò perché, quando si va oltre la larghezza, Modernizr è uno strumento inestimabile.
Nello sviluppo front-end, gli sviluppatori hanno utilizzato un sito per adattare i vincoli del motore di layout utilizzato da un determinato browser. Nel 2003 c'erano solo tre browser: Netscape, Internet Explorer e Opera. Firefox, Safari e il primo browser mobile, Opera Mini, sono stati rilasciati entro il 2005. Chrome non è stato rilasciato fino al 2008.
Attualmente ci sono cinque principali browser, ognuno con la propria versione mobile. In tutta la gamma di browser, ci sono anche versioni precedenti che gli utenti non hanno aggiornato. Nello stesso modo in cui la creazione di più layout per più dimensioni dello schermo diventa un gioco a somma zero, così come la creazione di più front-end per più browser.
Utilizziamo un design web reattivo per ospitare nuovi browser mobili all'avanguardia. Ma, mentre si adattano i nuovi browser, è importante non farlo a scapito dei browser più vecchi.
Storicamente, l'ottimizzazione è arrivata come un prodotto della costruzione di un sito per i browser più popolari e quindi la messa a punto per garantire che il sito abbia lo stesso aspetto su una serie di browser popolari. I disegni dovrebbero accogliere le funzionalità di tutti i browser.
Il miglioramento progressivo è una strategia per far fronte al fallimento dei browser nel supportare funzionalità moderne. C'è la tentazione di costruire per le funzionalità più aggiornate, ma, in un web reattivo, il design di un sito è contestuale al frame attraverso il quale viene visualizzato. Il web design reattivo è diventato popolare perché risolve il contesto di cambiamento più ovvio - la dimensione del frame - ma il contesto di un browser è molto più profondo della dimensione del viewport.
SVG rappresenta un'ottima soluzione per i display ad alta risoluzione, ma per quanto riguarda il supporto nei browser più vecchi? Non è supportato in IE 8 o versioni precedenti, quindi è necessario creare un fallback se si supporta quel browser. È possibile identificare il browser e servire stili alternativi rispetto a quel browser, ma in tal caso si dovranno utilizzare gli stessi stili alternativi per tutti i browser che non supportano SVG.
Non sarebbe più semplice se potessi semplicemente scrivere uno stile che verrebbe utilizzato contro tutti i browser che non supportano SVG? In questo modo, non dovresti tenere il passo con le segnalazioni di bug degli utenti di versioni precedenti. Potresti semplicemente impostare il fallback una volta e dimenticarlo.
Tradizionalmente, il rilevamento delle caratteristiche è stato ottenuto rilevando l'agente utente del browser. Questo viene fatto tramite JavaScript, usando l'oggetto navigator. L'oggetto del navigatore risale ai giorni di Netscape ed era il migliore strumento per sviluppatori nella compatibilità cross-browser.
Se disponi di Chrome e hai abilitato DevTools, apri l'ispettore web del browser facendo clic con il pulsante destro del mouse su una pagina e selezionando Ispeziona elemento. Quindi, fare clic su Console e, dopo il cursore, digitare "navigator.userAgent" e premere Invio. Ciò restituirà l'agente utente del browser corrente, che è una stringa di testo utilizzata per identificare il browser in uso. Chrome restituisce quanto segue:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35In molti modi, l'oggetto navigator è uno dei migliori sensori che abbiamo a disposizione per informare il nostro sistema su ciò di cui il nostro utente è capace; tuttavia, non è molto amichevole per il futuro. Basa gli attuatori del tuo sito su molte ipotesi su ciò che il browser fa e non supporta. Inoltre, non è affidabile perché gli utenti possono configurarlo per accedere a siti che il browser potrebbe non essere in grado di supportare.
Modernizr è una libreria JavaScript utilizzata per rilevare le funzionalità nel browser. È caricato all'inizio della pagina e viene eseguito durante il caricamento di una pagina. Aggiungerlo al tuo sito è semplice come aggiungere qualsiasi altra libreria JavaScript, come jQuery, ma, una volta aggiunto, Modernizer ti offre un'incredibile quantità di controllo nel rendering della tua pagina e assicurando che a ogni utente venga offerta un'esperienza di qualità.
Essendo stato caricato, Modernizr esegue una serie di controlli contro il browser dell'utente per determinare quali funzionalità supporta il browser e crea un oggetto JavaScript che è possibile utilizzare per testare contro. Modernizr non crea supporto per queste funzionalità; ti dà semplicemente un modo per fornire supporto fallback per le funzionalità moderne. Ad esempio, nel caso di SVG, Modernizr ci consente di fornire un'immagine di riserva per i browser privi del supporto SVG.
Modernizr applica anche una serie di classi al tag HTML, dandoti la possibilità di modificare il CSS della pagina usando le corrispondenti classi CSS. Queste classi CSS consentono di utilizzare i sistemi CSS per creare attuatori che regolano le pagine per consentire i miglioramenti progressivi disponibili per una pagina.
Al contrario di utilizzare l'agente utente, Modernizr rileva le funzionalità direttamente eseguendo una serie di test JavaScript che restituiscono valori booleani (veri o falsi). Questo determina le classi impostate sul tag html e ti dà la possibilità di utilizzare JavaScript per rilevare se una funzionalità è disponibile.
L'installazione di Modernizr è semplice come il collegamento alla libreria JavaScript nella parte superiore della pagina, ma dove la procedura di installazione diventa complicata sta creando la versione di cui hai bisogno. Modernizr è disponibile per il download in due versioni, la versione di sviluppo e la versione di produzione.
La versione di sviluppo è un file completo di 42 KB, non compresso. Questa versione è ottima se sei esperto di JavaScript e vuoi apportare alcune modifiche ai test che esegue. Poiché non è compresso, è facile da leggere e aumentare, ma è meglio lasciare agli sviluppatori con una solida comprensione di JavaScript.
Per quelli di voi che potrebbero non essere completamente abili in JavaScript, o che desiderano creare rapidamente una versione personalizzata di Modernizr, è qui che entra in gioco la versione di produzione della libreria. Lo strumento di creazione della versione di produzione sul sito ti dà la possibilità di creare una versione con solo i test richiesti.
Questo è utile quando sai che hai bisogno solo di un certo insieme di test. Ad esempio, il tuo sito potrebbe non sfruttare le ombre delle caselle CSS, ma potrebbe essere necessario supportare i gradienti CSS. Utilizzando lo strumento di creazione, puoi includere i test necessari ed escludere quelli che non ti servono, mantenendo il codice sorgente tagliato e il tempo di caricamento totale dell'utente.
Per il nostro esempio, lavorerò alla versione di sviluppo. Trovo che quando sto costruendo un sito, è meglio lavorare con la versione completa e quindi una volta che sai quali funzionalità utilizzerai nel tuo sito, abbassa la versione.
Facciamo alcune semplici funzioni di rilevamento con Modernizr. Inizieremo con un sito di esempio grezzo.
Usiamo questo piccolo test per rilevare se il nostro browser è in grado di supportare o meno SVG. Per semplicità, aggiungeremo solo due tag span alla pagina per rilevare il supporto.
Huzzah! You have SVG support.BOO! You don't have SVG support.Se provi questo in un browser che supporta SVG, vedrai il messaggio "Huzzah! Hai il supporto SVG. "Mentre se hai un browser che non supporta SVG, troverai il" BOO! Non hai il supporto per SVG. "Messaggio.
Questo esempio è piuttosto rudimentale, ma mostra l'idea centrale dell'uso di Modernizr per risolvere i problemi relativi ai browser. Se stessimo facendo la stessa correzione usando il vecchio metodo user agent, dovremmo avere un foglio di stile per ogni browser che non supporta SVG e cambiare il nostro CSS per ognuno. (Per chiunque sia interessato, gli unici browser principali privi del supporto SVG sono Internet Explorer 7 e versioni successive.)
Aggiungendo la classe svg / no-svg all'html nella pagina, il tuo CSS ora ha un selettore che può essere usato per sovrascrivere le regole CSS esistenti. Poiché si trova sul tag principale del genitore, può essere usato per sovrascrivere le altre classi sulla pagina.
Quindi, in questo caso, entrambi i tag span vengono visualizzati: nessuno ;. Se non c'è supporto SVG, la visualizzazione: dichiarazione in linea sul tag span con la classe .no sovrascrive la visualizzazione: nascosta grazie alla regola no-svg sul tag html.
Proviamo un esempio più utile della stessa idea. Potremmo voler avere un'immagine di sfondo SVG sulla pagina, che ricade su un PNG se il browser non supporta SVG. Per impostazione predefinita useremo l'immagine PNG. In questo modo, SVG non viene pubblicato a meno che non sia necessario e diventa un miglioramento progressivo.
Ora abbiamo un fantastico teschio SVG che apparirà fantastico e nitido per gli utenti con display ad alta risoluzione, e sembra ancora buono per gli utenti con browser più vecchi.
C'è una grande ricchezza di informazioni da apprendere su Modernizr. Ti abbiamo mostrato come funziona il cross-browser senza dover ricordare o mantenere un elenco in esecuzione di quali browser supportano SVG.
Funziona eccezionalmente come un sistema con cui servire gli attuatori dell'utente per creare siti Web veloci e altamente funzionali.
Usi Modernizr nei tuoi progetti? Quali altri metodi hai usato per offrire contenuti reattivi? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di linee divergenti via Shutterstock.