it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


10 nuove funzionalità di HTML 5.1 e come utilizzarle

Le specifiche HTML hanno subito una profonda revisione un paio di settimane fa, quando W3C ha pubblicato la nuova raccomandazione HTML 5.1 a novembre 2016. Nel suo recente post sul blog, W3C ha definito la nuova versione principale lo standard d'oro, in quanto HTML 5.1 ci fornisce nuovi modi di possiamo usare 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 i miglioramenti dello sfondo JavaScript sono notevoli, come potete vedere nel registro delle modifiche ufficiali .

Nota che al momento non tutti i browser supportano tutte queste funzionalità, quindi non dimenticare di controllare il supporto del browser prima di utilizzarlo in produzione. Se sei interessato all'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 etichettare insieme all'attributo srcset per rendere possibile la selezione di immagini reattive . Il tag rappresenta un contenitore di immagini che consente agli sviluppatori di dichiarare diverse risorse di immagine per adattarsi alle dimensioni del viewport, alla densità dei pixel dello schermo, al tipo di schermo e ad altri parametri utilizzati nella progettazione reattiva .

Il il tag stesso non visualizza nulla, funziona semplicemente come contesto per le risorse di immagini multiple . Devi dichiarare la risorsa immagine predefinita come valore dell'attributo src di tag e le risorse di immagini alternative rientrano negli attributi srcset di e elementi.

Esempio di codice:

2. Mostra o nascondi informazioni extra

Con il

e i tag, è possibile aggiungere informazioni estese a un pezzo di contenuto. Le informazioni extra non sono visualizzate per impostazione predefinita, ma se gli utenti sono interessati, hanno la possibilità di dare un'occhiata . Nel tuo codice, dovresti posizionare il tag dentro
. Dopo il tag puoi aggiungere le informazioni extra che vuoi nascondere.

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 attributo type="context", è possibile aggiungere funzionalità personalizzate al menu di scelta rapida del browser . Devi assegnare come elemento figlio del

etichetta. L' id del l'elemento deve avere lo stesso valore dell'attributo contextmenu dell'elemento a cui vogliamo aggiungere il menu di scelta rapida (che è l'elemento nell'esempio seguente).

Esempio di codice:

Il il tag può avere tre diversi tipi : "checkbox", "command" (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 il supporto del browser per questa funzione non è ancora molto buono . 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 consente di nidificare intestazioni e piè di pagina se ogni livello è contenuto nel contenuto di sezioni . 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 funzionalità può essere utile se si desidera aggiungere intestazioni elaborate a elementi di sezione semantica, come ad esempio
e
. L'esempio di codice seguente crea una barra laterale all'interno dell'intestazione, il