Ogni web designer, sicuramente, è a conoscenza del supporto che offre il sito CanIUse.
È una risorsa sorprendente che cataloga tutte le ultime specifiche HTML, CSS e JavaScript, in quanto vengono adottate dal W3C. Inoltre spiega quali browser supportano attualmente le funzionalità richieste per valutare se implementarle o meno nel proprio sito.
Nel presente articolo vedremo come fare per importare uno o più dati nel proprio sito web.
Da ora in poi sarà possibile inserire una tabella di una determinata specifica nel proprio sito attraverso uno script. Il tutto funziona alla perfezione, ed è anche responsive.
Servizio completamente gratuito e funziona veramente bene. È di gran lunga il modo migliore per includere tutti i dati di supporto per i primi 10 browser principali.
Tutti gli attributi CSS3, selettori ed istruzioni, sono supportati. Lo stesso vale per gli elementi HTML5 e le funzionalità JavaScript come l'API audio.
Prelevare lo script da incorporare
Per la precisione va detto che il codice non lo si preleva direttamente dal sito Can I Use, bensì da The CanIUse Embed.
Una volta entrati nella pagina, possiamo vedere una serie di esempi messi a disposizione e di cui potremmo avvalerci.
L'inclusione può essere utilizzata in diverse forme:
- Interattiva: aggiornata in tempo reale
- Immagini live: per pagine in cui Javascript non è supportato o disabilitato. L'immagine viene aggiornata quotidianamente.
- Immagini statiche: se si vuole includere uno o più dati per un periodo di tempo specifico
Come si può notare, un servizio molto molto interessante e completo. Per l'articolo in oggetto, ho pensato di includere dei dati in tempo reale o, come scritto nella pagina, Interactive Embed.
Creare l'oggetto da incorporare
- Al termine della serie di esempi, fermarsi a metà pagina dove è scritto: Create your Embed
- Dalla
selectselezionare "quale caratteristica vogliamo visualizzare". Scegliere CSS Flexible Box Layout Module
- Selezionare il tipo di incorporamento. Di default è già impostato Interactive Embed. Lasciarlo così.
- Altre impostazioni: per quali versioni di browser impostare la creazione del codice. Personalmente scelgo sempre Future Version
- Colore di default: lasciamo impostato quello già selezionato
- Cliccare su Generate
Immediatamente appare lo script da includere nella pagina:
<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>
Subito dopo viene generato lo snippet. Copiarlo ed incollarlo nel punto della pagina in cui si desidera che venga visualizzato l'incorporamento.
In ultimo, viene generata anche un'anteprima di quanto generato.
Per concludere, ho preparato una pagina di esempio con il supporto dei browser al CSS Flexible Box Layout Module.