Homepage » Coding » 10 nuove funzionalità di HTML 5.1 e come utilizzarle

    10 nuove funzionalità di HTML 5.1 e come utilizzarle

    La specifica HTML ha ottenuto un revisione generale un paio di settimane fa, quando W3C ha pubblicato il suo nuova raccomandazione HTML 5.1 nel mese di novembre 2016. Nel suo recente post sul blog, W3C ha chiamato la nuova major release gold standard, come HTML 5.1 ci forniscono nuovi modi di come utilizzare l'HTML per creare esperienze web più flessibili.

    In questo articolo, daremo un'occhiata alle sue nuove funzionalità che è possibile utilizzare senza toccare JavaScript, tuttavia, anche i miglioramenti dello sfondo JavaScript sono notevoli, come si può vedere nel registro delle modifiche ufficiali.

    Nota che al momento non tutti i browser supportano tutte queste funzionalità, quindi non dimenticarti di farlo controlla il supporto del browser prima di usarli in produzione. Se sei interessato a ulteriore sviluppo dello standard HTML, puoi anche consultare la bozza di lavoro di HTML 5.2.

    1. Definire più risorse immagine per la progettazione reattiva

    In HTML 5.1, puoi usare taggare insieme al srcset attributo da fare selezione di immagini reattiva possibile. Il tag rappresenta un contenitore di immagini che consente agli sviluppatori di dichiara diverse risorse di immagine per adattarsi al UALa dimensione del viewport, la densità dei pixel dello schermo, il tipo di schermo e altri parametri utilizzati in design reattivo.

    Il il tag stesso non mostra nulla, funziona semplicemente come contesto per le risorse multiple di immagini. Devi dichiarare il risorsa immagine predefinita come il valore del src attributo del tag, e il risorse di immagini alternative andare dentro il srcset attributi del e elementi.

    Esempio di codice:

    2. Mostra o nascondi informazioni extra

    Con il

    e tag, puoi aggiungi informazioni estese a un pezzo di contenuto. Le informazioni extra non è mostrato per impostazione predefinita, ma se gli utenti sono interessati, loro avere la possibilità di dare un'occhiata. Nel tuo codice, dovresti posiziona il tag dentro
    . Dopo il tag che puoi aggiungi le informazioni extra vuoi nasconderlo.

    Esempio di codice:

     
     
    Messaggio di errore
     
     Non abbiamo potuto terminare il download di questo video. 
     
    Nome del file:
    yourfile.mp4
     
    Dimensione del file:
    100 MB
     
    Durata:
    00:05:27

    Ecco come appare questo esempio di codice in Firefox 50.0.2:

    3. Aggiungi funzionalità al menu di scelta rapida del browser

    Con il elemento e il suo type = "contesto" attributo, puoi aggiungere funzionalità personalizzate al menu di scelta rapida del browser. Devi assegnare come l'elemento figlio del

    etichetta. Il id del l'elemento deve portare lo stesso valore del menù contestuale attributo dell'elemento a cui vogliamo aggiungere il menu di scelta rapida (che è il

    Il etichetta può hanno tre diversi tipi, "Checkbox", "comando" (a cui è necessario aggiungere un'azione con JavaScript) e Radio. È possibile aggiungere più di una voce di menu a un menu di scelta rapida, tuttavia supporto per browser per questa caratteristica è non molto buono ancora. Chrome 54 non lo supporta e Firefox 50 consente solo la presenza di un menu di scelta rapida in più. Di seguito puoi vedere come funziona l'esempio di codice in Firefox 50.

    4. Intestazioni e piè di pagina Nest

    HTML 5.1 ti consente di nidificare intestazioni e piè di pagina se ogni livello è contenuto all'interno del contenuto della sezione. La nota sotto è uno screenshot dei documenti del W3C e consiglia agli sviluppatori il modo corretto di annidare l'intestazione e il piè di pagina.

    Questa funzione può essere utile se si desidera aggiungere intestazioni elaborate a elementi di sezione semantica, ad esempio

    e
    . L'esempio di codice seguente crea una barra laterale all'interno dell'intestazione, il