Importare le tabelle Can I Use nel proprio sito
Importare le tabelle Can I Use nel proprio sito
Extrowebsite

Ogni web designer, sicuramente, è a conoscenza del supporto che offre il sito . È 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 una o più tabelle nel proprio sito web.

Da ora in poi sarà possibile inserire una tabella di una determinata specifica nel proprio sito attraverso uno script non ufficiale. Il tutto funziona alla perfezione, ed è anche responsive.

È 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 CanIUse, bensì da . Quindi portarsi in caniuse.bitsofco.de.

Step 1 - Includere lo script

Il primo passaggio è quello di inserire, nella propria pagina web, il seguente script javascript:

<script src="//cdn.jsdelivr.net/caniuse-embed/1.1.0/caniuse-embed.min.js"></script>

Lo script appena visto lo si può inserire anche prima della chiusura del tag </body> e non necessariamente tra i tag <head> e </head>.

Subito dopo, il richiamo allo script JQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Quindi avremo:

<script src="//cdn.jsdelivr.net/caniuse-embed/1.1.0/caniuse-embed.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Step 2 - Scegliere le impostazioni da importare

Come si può vedere nella pagina di The CanIUse Embed, è possibile scegliere dalla select l'impostazione desiderata. Per l'esempio in oggetto ho selezionato Flexible Box Layout Module.

Flexible Box Layout Module
Flexible Box Layout Module

Step 3 - Selezionare le versioni del browser da visualizzare

Immediatamente sotto la select con le impostazioni, ci sono una serie di checkbox che permettono di selezionare quale versione del browser inserire nella tabella CanIUse.

Versione Browser Can I Use
Versione Browser Can I Use

Dopo aver fatto tutte le scelte, premere il pulsante "Generate".

Generate

Step 4 - Ottenere il codice da incorporare

La generazione del codice la si deve inserire nel punto in cui si vuole che appaia la tabella di CanIUse.

Il codice da copiare ed incollare è riportato di seguito:

Snippet di codice Can I use da copiare ed incollare
Snippet di codice Can I use da copiare ed incollare

Nella è riportata una demo con la tabella incorporata da Can I Use, la quale mostra il supporto da parte dei browser per il Flexible Box Layout Module.