In che modo Modernizr può aiutarti a implementare i fallback CSS

Pubblicato: 2021-04-05

In qualità di web designer, siamo spesso incoraggiati a utilizzare le funzionalità più recenti e migliori che i CSS hanno da offrire. E ci sono molte valide ragioni per farlo. Tecniche come CSS Grid e Flexbox rendono veloce il lavoro di layout comuni, mentre le animazioni CSS aggiungono movimento e interattività. Questa è solo la punta dell'iceberg.

Tuttavia, l'implementazione di queste funzionalità a volte può essere a scapito della compatibilità del browser. Per i siti Web che hanno ancora un numero significativo di utenti con browser meno recenti o per funzionalità molto nuove, c'è il rischio di escludere alcune persone.

Filosoficamente parlando, alcuni designer stanno bene con questo – e va bene. Ma l'implementazione di fallback per queste funzionalità potrebbe essere più semplice di quanto pensi. Queste misure di sicurezza offrono un ragionevole facsimile di un particolare layout o elemento di design e sono compatibili con i browser Web legacy.

Oggi ti mostreremo come utilizzare la libreria di rilevamento delle funzionalità di Modernizr per questo scopo. Eccoci qui!

Cos'è Modernizr?

Modernizr è uno di quegli strumenti utili su cui i web designer fanno affidamento da anni. È una libreria che può essere personalizzata per "rilevare" (in realtà, sta eseguendo dei test) funzionalità specifiche durante il caricamento di una pagina web. Da lì, aggiunge classi CSS all'elemento <HTML> della pagina, consentendo ai progettisti di indirizzare il proprio codice in base a ciò che trova la libreria.

Nel nostro caso, lo useremo per rilevare CSS Flexbox. Tuttavia, è anche in grado di cercare funzionalità relative a HTML e JavaScript. Ad esempio, puoi usarlo per determinare se un browser supporta HTML5. In caso contrario, lo script shiv HTML5 disponibile può essere utilizzato per portarlo al codice, per così dire.

La cosa veramente bella è che puoi personalizzare Modernizr per soddisfare le esigenze del tuo progetto. L'interfaccia utente del loro sito Web ti consentirà di selezionare e scegliere solo gli elementi che desideri rilevare. Dopo aver effettuato le selezioni, fai clic sul pulsante "Crea" per generare un pacchetto scaricabile personalizzato.

La nostra costruzione

Per i nostri scopi (e per semplificare le cose), stiamo costruendo il nostro pacchetto Modernizr per rilevare Flexbox. Sceglieremo anche di minimizzare il codice e aggiungere anche classi CSS .

Il sito Modernizr.

Passaggio 1: configurazione della demo

Per dimostrare come funziona tutto ciò richiederà un paio di file, entrambi disponibili su GitHub:

  • flexgrid.css – Questo è il nostro semplice sistema a griglia CSS Flexbox. Noterai che ha classi per diversi allineamenti e larghezze di colonna. Inoltre, esiste un insieme speciale di classi .no-flexbox che utilizzano anche float CSS della vecchia scuola. Questo ci aiuterà a creare uno stile di layout simile nei browser legacy.
  • modernizr-custom.js – Lo script di cui sopra rileverà se CSS Flexbox è supportato o meno dal browser corrente.

Successivamente, vorremo creare un nuovo documento HTML che richiami entrambi i file sopra nell'area <head> . Inoltre, il documento avrà bisogno di un layout CSS Flexbox di esempio e di alcuni contenuti.

Puoi sentirti libero di utilizzare il file demo di seguito per la sperimentazione. Contiene un semplice layout a 3 colonne, insieme ad alcuni miglioramenti visivi minori (ne parleremo tra poco).

Passaggio 2: visualizza il documento HTML in un browser moderno

Ora è il momento di vedere come appare la nostra demo in un browser. Per iniziare, utilizziamo un browser Web moderno che supporta Flexbox.

Un layout CSS a 3 colonne.

Almeno, sospettiamo che supporti Flexbox. Come possiamo dirlo con certezza? Questo è ciò che Modernizr è qui per fare.

Nel nostro caso, vorremo guardare la fonte della nostra pagina demo, in particolare l'elemento <HTML> . Se è stata aggiunta una classe di flexbox all'elemento, sappiamo che il nostro browser supporta la funzione. Vai avanti e visualizza l'origine della pagina nel tuo browser: aspetteremo.

Dov'è la classe?

Se hai provato a visualizzare il sorgente completo della pagina, potresti aver notato che l'elemento <HTML> non contiene una classe. Non preoccuparti: è normale.

Questo perché la classe viene aggiunta in fase di esecuzione, dopo i test di Modernizr per la funzionalità selezionata. Pertanto, non verrà visualizzato nel codice sorgente completo.

Usa gli strumenti per sviluppatori del tuo browser

Invece, apri gli strumenti di sviluppo del tuo browser web (premi il pulsante F12 sulla tastiera). Ciò fornirà uno sguardo accurato all'elemento <HTML> .

Qui stiamo usando l'ultima versione di Firefox Developer Edition. Secondo Modernizr, supporta CSS Flexbox. Sìì!

Strumenti per sviluppatori di Firefox che mostrano il supporto CSS Flexbox.

Passaggio 3: testare il CSS di riserva in un browser legacy

Sembra tutto molto bello nel nostro browser moderno. Ma che ne dici del software legacy?

I nostri stili sono impostati per utilizzare i float CSS nei browser che non supportano Flexbox. Questo fallback dovrebbe permetterci di creare un layout multicolonna, anche su configurazioni antiche.

Secondo Can I use, Flexbox ha un supporto parziale fin da Internet Explorer 10, Firefox 2, Chrome 4 e Safari 3.1. Sono passati molti anni da quando questi browser erano ampiamente utilizzati. Tuttavia, IE in particolare è ancora sospeso qua e là.

Modernizr può essere configurato per testare un supporto parziale, ma diventa disordinato. Porta a scrivere più fallback CSS che tengono conto di una serie di situazioni diverse. Non è molto efficiente. Pertanto, stiamo cercando un supporto tutto o niente nei nostri test.

Diamo un'occhiata alla nostra demo in IE 10 (tramite un servizio di test del browser) e vediamo cosa succede.

Un layout CSS a 3 colonne, con la terza colonna spostata su una nuova riga.

Non troppo malandato. La nostra terza colonna viene spostata alla riga successiva, che può essere modificata. Ma per quanto riguarda il supporto Flexbox?

Una rapida panoramica degli strumenti di sviluppo di IE mostra che il nostro elemento <HTML> mostra una classe di no-flexbox . Ciò significa che Flexbox non è supportato qui e viene utilizzato il fallback CSS.

Strumenti per sviluppatori di Internet Explorer non mostra il supporto per CSS Flexbox.

Correzione del layout per i CSS float

I nostri float CSS di riserva non coopereranno con i miglioramenti visivi che abbiamo apportato. La terza colonna viene spostata su una seconda riga, il che non sembra molto bello.

Questo perché i float aggiungono spaziatura interna e bordi alla larghezza della colonna che abbiamo precedentemente impostato nel foglio di stile. Flexbox, d'altra parte, può adattarsi a questi elementi senza aumentare la larghezza complessiva della colonna. Da qui la differenza nei risultati.

Ci sono alcune cose diverse che potremmo fare per correggere la situazione. Potremmo tagliare la larghezza delle colonne o addirittura ridurre il margine tra le colonne. Proviamo a tagliare la larghezza della colonna dal 30.66% al 28.66% .

Confronto: layout CSS Flexbox (in alto) e CSS float fallback (in basso).

Ha funzionato! Le nostre colonne sono ora ben visualizzate e ragionevolmente simili alle versioni Flexbox. A parte alcune differenze di spaziatura, questo è almeno utilizzabile all'interno di un vecchio browser. Potremmo entrare e apportare ulteriori modifiche per avvicinarci ancora di più all'originale.

Rileva le funzionalità del browser e regola di conseguenza

Mentre la nostra dimostrazione si è concentrata sul rilevamento di CSS Flexbox, Modernizr può fare molto di più. Può cercare altre funzionalità comuni come HTML Canvas, supporto SVG, CSS Grid e una serie di altre utili curiosità.

L'idea è che, una volta che sai di cosa è capace il browser di un utente, puoi modificare il tuo codice per seguirne l'esempio. Questo rende l'adozione di nuove specifiche CSS, ad esempio, un processo molto meno preoccupante.

Forse non sarà necessario utilizzare i fallback in ogni caso. Ma è bello sapere che implementarli è facile da fare, con l'aiuto di Modernizr.