Categorie
CSS JavaScript Tips Web development

Controllare il supporto dei browser per CSS e JavaScript

Il mondo del web development è in costante evoluzione, per questo motivo è importante controllare il supporto tra i browser del codice CSS / JavaScript utilizzato.

Perché è importante controllare il supporto dei browser


Esistono principalmente due contesti in cui è fondamentale controllare il supporto del codice CSS o JavaScript usato nel contesto di una web application.

Supporto a browser obsoleti

Dover supportare browser obsoleti (come Internet Explorer) impedisce l’utilizzo di regole CSS ed funzioni JavaScript ormai consolidate, a meno di utilizzare dei polyfill.

Per fare qualche esempio concreto, la versione più recente di Internet Explorer (IE 11) non supporta le Promises, né l’unità di misura vmax, utilizzata nel CSS.

Utilizzo di tecnologie molto recenti

Essendo il web development un ambiente dinamico, esistono numerose tecnologie recenti, che sono utilizzabili solo su alcuni browser.

Un esempio di tecnologia sperimentale non ancora largamente supportata è il caso delle Network Information API.

Controllare il supporto dei browser: due soluzioni gratuite

Il problema della compatibilità tra browser diversi è noto da molti anni nel settore dello sviluppo web.

Per questo motivo, esistono diverse risorse dove è possibile controllare il supporto browser CSS / JavaScript.

Nel seguito dell’articolo, approfondirò le due risorse più utilizzate: caniuse.com e MDN web docs.

Can I Use … ?

caniuse.com è dedicato esclusivamente alla verifica del supporto browser delle tecnologie CSS / JavaScript.
supporto browser javascript
Nell’immagine in figura è mostrata la tabella di compatibilità per le Promises.

Come è possibile vedere, tale tecnologia non è supportata da Internet Explorer, né da Opera Mini. In alto a destra è riportata la percentuale di utenti che avrà un browser compatibile con questa tecnologia.

Can I Use può essere usato anche per verificare il supporto cross browser di tecnologie CSS, come il Flexible Box Layout.

MDN web docs

MDN web docs è lo strumento di riferimento riguardo alla documentazione ed esempi pratici legati al web development.

Prendendo ad esempio la pagina di MDN dedicata alle Promises, potrai vedere che è riportata la definizione, una descrizione dettagliata, alcuni esempi e la tabella di compatibilità dei browser.
supporto browser css

Conclusioni

Can I Use è una risorsa fondamentale per controllare velocemente la compatibilità del codice usato rispetto a vari browser, mentre MDN web docs può essere usato anche per approfondire la materia e consolidare le proprie conoscenze nell’ambito dello sviluppo web.