Ente accreditato Regione Veneto n.4271

Come rendere compatibili le proprietà CSS3

Attraverso la libreria Modernzr

Pubblicato da Gianni // 28 settembre 2017 // 92 visualizzazioni

Il CSS è un linguaggio in continua evoluzione, inserendo nuove proprietà che migliorano lo sviluppo di siti web. Con la versione 3 ad esempio, possiamo limitare il caricamento di elementi di sfondo per riprodurre pulsanti arrotondati, sfumature e molto altro. Tutte queste aggiunte ci permettono di creare layout sempre più originali e moderni.

Il problema, come sempre in questo settore, è la compatibilità nei diversi browser. Infatti, se è utile avere un layout originale, moderno e innovativo, è anche più importante che il sito sia fruibile su tutti i browser.

Per fortuna oggi la situazione è decisamente più rosea di un tempo: i browser sono in costante aggiornamento, aggiungendo velocemente il supporto alle nuove funzionalità. Rimane però ancora qualche browser che fatica a mettersi in pari.

Per avere un quadro preciso delle proprietà CSS3 compatibili nei diversi browser potete affidarvi al sito caniuse.com, un must per chi sviluppa siti web. Esso permette di analizzare ogni singola proprietà CSS3 e capire il suo supporto nei diversi browser, comprese le versioni precedenti.

Una volta analizzata e scoperta una proprietà CSS3 non pienamente comapitibile, abbiamo 3 possibilità:

  • Abbandonare l’uso di quella proprietà
  • Non considerare il browser con mancato supporto (cercando di mantenere comunque un alto grado di fruizione dei contenuti)
  • Usare Modernizr

In questo articolo voglio spiegarvi proprio come lavorare con il terzo punto.

Modernizr è una libreria Javascript (non richiede jQuery) che ha un semplicissimo quanto potentissimo compito: verificare se una proprietà CSS3 è supportata dal browser dell’utente che sta navigando sul sito.

Questo vi permette quindi di applicare delle strategie differenti solamente per gli utenti che non supportano la proprietà senza abbandonarne a priori l’utilizzo.

Come Installare Modernizr

Per usare Modernizr dovete prima di tutto scaricare la sua libreria andando al sito che trovate a questo link. Qui potete scaricare l’intera libreria (cliccando su “Development build”), ma io vi consiglio di crearvi la vostra libreria, cliccando “Add your detects”. Qui infatti potete decidere quali features CSS3 analizzare, riducendo di molto il peso del file da includere nel sito.

Una volta scaricato il file, dovrete includerlo in tutte le vostre pagine HTML, all’interno del tag <head>.

Includere la libreria Modernizr nell’head della pagina

Così facendo attiverete le funzionalità di tracciamento di Modernizr per le proprietà CSS3 che avete selezionato in fase di download della libreria.

Come usare Modernizr

Per usare Modernizr, avete due possibili approcci: Potete sfruttare le classi CSS che automaticamente applica la libreria al tag <boby>, O sfruttando le funzionalità Javascript.

Attraverso il CSS

Modernizr applica una serie di classi al tag <body> indicando il supporto o meno alle proprietà CSS3. Voi dovete limitarvi solo a indicare i comportamenti da tenere nel caso sia presente la classe di supporto o no della proprietà. Qui sotto un esempio con i grandienti CSS3: Se presente il supporto sarà applicato al <body> la classe “.cssgradients”, altrimenti avremo “.no-cssgradients” e in questo caso saremo costretti a caricare un pattern .png come sfondo.

Come usare Modernizr tramite CSS

Questa di sicuro è il suo uso più semplice e non richiede grosse conoscenze di Javascript. Ovviamente non sempre può bastare come soluzione.

Attraverso Javascript

L’uso di Javascript è meno alla portata di tutti, perché richiede una conoscenza minima del linugaggio JS, ma permette di apportare modifiche al codice HTML nel caso non sia supportata una precisa proprietà CSS3.

Come usare Modernizr tramite JS

Soluzione di sicuro meno immediata della precedente ma che permette un controllo maggiore sul codice, come possiamo apprezzare nell’esempio qui sotto.

Caso di studio: la proprietà “object-fit”

Per spiegare meglio il suo funzionamento, andiamo a vedere un esempio pratico di proprietà CSS3 non pienamente compatibile: “object-fit”.

Questa proprietà viene utilizzata su <img> o <iframe> e permette di definire come deve “adattarsi” alle dimensioni di larghezza e altezza definite a priori. Praticamente è simile alla proprietà “background-size” ma applicata alle immagini.

Questo strumento risulta molto utile quando avete necessità di impostare un box di dimensioni precise, al cui interno inserire un <img> che deve riempirlo tutto, a costo di ritagliare parte dell’immagine.

La proprietà ha un buon supporto su quasi tutti i browser. Il problema di compatibilità si presenta, ad oggi, solo sui browser di casa Microsoft: IE ed Edge. Come potete vedere infatti dall’estratto di caniuse.com qui sotto, il supporto sui browser Microsoft sarà disponibile solo sulla prossima versione di Edge.

Compatibilità attuale per la proprietà object-fit

Ed è qui che entra in gioco Modernizr: possiamo sviluppare il nostro sito considerando pienamente compatibile la proprietà “object-fit”.  Successivamente svilupperemo un “escamotage” solo per i browser che non la supportano.

Innanzitutto definisco HTML e CSS per gestire la proprietà inserendo l’<img> all’interno di un contenitore “.cont-immagine” (servirà per l’escamotage) e impostando un’altezza e larghezza prefissata all’immagine stessa, oltre al nostro “object-fit:cover;”.

Lo scopo dell’esempio è quello di avere un’immagine quadrata, anche se quella caricata ha un rapporto larghezza/altezza differente. Il tutto senza stirare o schiacciare l’immagine stessa.

Il risultato finale è gradevole su tutti i browser, tranne che su Edge, dove risulta schiacciata l’immagine. Per risolvere questo problema, entra in gioco la classe “.compat-object-fit” che inizialmente non è presente in HTML ma che viene inserita tramite JS quando Modernizr rileva che la proprietà “object-fit” non è supportata dal browser.

In questo caso, oltre ad applicare la classe, andiamo a prelevare il valore dell’attributo “src” dell’immagine, così da usarlo come background del contenitore “.cont-immagine”. Infine, tramite il foglio di stile vado a nascondere l’<img> schiacciata così da mostrare il nuovo sfondo, caricato tramite Javascript precedentemente.

Di seguito trovate il link per scaricare la demo. Per comprenderla al meglio è consigliata una minima conoscenza dei linguaggi di programmazione, in particolare Javascript. Ma nessuna paura: il codice è pronto all’uso e applicabile senza particolari modifiche anche ai vostri progetti. Quindi fatene buon uso.

Scarica tutorial

Topic: , , , , ,

Send this to a friend