Questo sarà l'articolo finale della nostra serie su HTML5. Andando avanti, daremo una breve occhiata a quali nuove tecnologie HTML5 supportano ufficialmente i principali browser e analizzeremo alcune tecniche che è possibile utilizzare per sfruttare i nuovi elementi nella codifica oggi. Infine, discuteremo di come dovresti iniziare a preparare il supporto per HTML5 in tutti i siti che crei da qui in avanti.
Quali funzionalità sostengono ufficialmente i principali browser?
Ai fini di questo articolo, definiremo il supporto ufficiale? come elencato nella documentazione dallo sviluppatore del browser. Ciò assicurerà che non siano necessari hack o trucchi per utilizzare le nuove funzionalità e si concentrerà invece sull'implementazione nativa direttamente dalla fonte (sentiti libero di aggiungere il tuo commento basato sui risultati dei tuoi test!). Con questo in mente, diamo un'occhiata alle attuali iterazioni di alcuni dei principali browser.
Firefox 3.5
Vai alla pagina degli sviluppatori di Firefox e vedrai una breve descrizione sul supporto HTML5. Ecco un elenco di funzionalità supportate:
- elemento audio
- elemento video
- elemento di tela
- Specifica della risorsa offline
- Trascina e rilascia API
Safari 4
L'elenco delle funzionalità di Safari 4 menziona il supporto per le seguenti funzionalità:
- elementi audio e video (e API associata)
- elemento canvas (effettivamente creato da Apple per Dashboard)
- Supporto per l'applicazione offline
Internet Explorer 8
Sebbene il Centro per sviluppatori di Internet Explorer rivendichi un forte supporto? per HTML5, non sembra esserci alcun supporto per l'elemento canvas (probabilmente a causa di Silverlight), elementi audio / video o l'API dell'applicazione offline. Ecco una lista completa degli elementi supportati di IE 8, nessuno dei quali sembra essere esclusivamente da HTML5. Tuttavia, ho trovato menzione del supporto della nuova API di messaggistica incrociata. Sentiti libero di condividere le risorse che hai sul supporto HTML5 in IE 8 usando i commenti qui sotto.
Opera 10
Il sito degli sviluppatori di Opera ha pubblicato un articolo su HTML5 a gennaio contenente il supporto esistente. Ecco le funzionalità elencate dagli articoli come attualmente supportate da Opera 10:
- elemento video
- elemento di tela
- Messaggistica tra documenti
- Eventi inviati dal server
- Web Forms 2.0
Inoltre, ecco una relazione sulle attuali specifiche web supportate in Opera Presto 2.3 (il motore di rendering di Opera).
Google Chrome
Incapace di trovare un elenco ufficiale direttamente da Google, sono stato costretto a rivolgermi a un articolo di O'reilly che delineava un discorso pronunciato dal VP di Google sull'ingegneria su HTML5 e il futuro delle tecnologie web. Nel suo discorso, Vic Gundotra ha elencato queste funzionalità come supportate da Google Chrome (oltre a Firefox, Safari e Opera):
- elemento video
- elemento di tela
- API di geolocalizzazione
- Cache delle app (API dell'app wep offline)
- API del database
- Web Workers (elaborazione thread in background)
Imbrogliare
Come puoi vedere, anche i browser che hanno il maggior supporto per HTML5 non supportano ancora in modo nativo nemmeno la metà delle nuove funzionalità ed elementi di cui abbiamo parlato negli articoli recenti. Il che significa che l'utilizzo di HTML5 oggi non sarà facile come semplicemente lanciando le modifiche semantiche che hai imparato. Ciò di cui abbiamo bisogno è un modo per creare nuovi elementi in HTML5 utilizzando solo le tecnologie web ampiamente utilizzate e supportate di oggi. Come risulta, JavaScript offre un metodo semplice e nativo per fare esattamente questo! Usando document.createElement, possiamo creare i nostri elementi personalizzati conformi alle specifiche di quelli supportati in HTML5. Certo è un po 'un trucco, ma è la cosa più vicina che avrai a mettere le mani su tutti i nuovi elementi nel prossimo futuro. Usiamo l'esempio del nostro precedente articolo per vedere come sarebbe questo.
Come puoi vedere, questa pagina usa l'intestazione, il piè di pagina, l'articolo, il lato, il nav e la sezione degli elementi solo HTML5. Tutto ciò che dobbiamo fare per farlo funzionare è creare quegli elementi in JavaScript:
Ecco! Ora puoi indirizzare questi elementi nei CSS come se fossero elementi nativi. Avvertimento: questo metodo può produrre risultati molto diversi e si dovrebbe usare a proprio rischio. Se qualcuno visita il tuo sito con JavaScript disattivato, il tuo CSS non prenderà piede e il tuo bel sito HTML5 sembrerà essere stato attaccato da Godzilla. Tuttavia, questo metodo è ottimo per la tua sperimentazione e dovrebbe funzionare con tutti i principali browser.
Ulteriori test
Nei miei test, sia Safari che Firefox sembravano gestire tutti i nuovi elementi elencati sopra senza alcun tipo di JavaScript. Se date un'occhiata al codice, potete vedere che la pagina Safari 4 di Apple sulla pagina utilizza diversi nuovi elementi HTML5 e implementa JavaScript solo nel caso di Internet Explorer. Prova questo sul tuo browser e facci sapere cosa ti viene in mente!
Preparazione per HTML5
Sul suo sito, Jon Tangerine suggerisce che dovremmo iniziare a prepararci per HTML5 utilizzando la struttura inerente alle modifiche semantiche. Ciò che questo significa praticamente è abbastanza semplice, usa le classi per imitare la struttura di una pagina HTML5.Questo metodo non è specifico per il browser, aderisce a tutti gli standard attualmente popolari, non si basa su script ed è semplicissimo da implementare. Ad esempio, prenderemo tutti i tag di intestazione nel codice sopra e li convertiremo in
Ora, se vuoi davvero prepararti bene per HTML5, non limitarti a lanciare i termini header, footer, section, ecc. Impegnati a usare questi termini semanticamente, come se fossero gli effettivi elementi HTML5. Prima di tutto, questo significa usare classe invece di id ove applicabile. Significa anche aderire alle rigide linee guida HTML5 in vigore per ciascun elemento (delineato nell'articolo precedente). Un esempio di questo sarebbe utilizzare solo a nav classe sulle principali aree di navigazione di una pagina e non per i link di navigazione minori come quelli trovati in un piè di pagina.
5 siti che utilizzano HTML5
Nonostante il mio consiglio ufficiale sia che HTML5 non sarà pronto per l'uso popolare per qualche tempo, devo ammirare siti che stanno prendendo l'iniziativa per inaugurare il futuro dello sviluppo web usando HTML5 oggi. Qui ci sono cinque siti che fanno proprio questo. Basta cliccare su una foto per vedere il sito. Assicurati di dare un'occhiata al codice utilizzato da ogni sviluppatore per avere un'idea della struttura di alcuni esempi reali di HTML5. Inoltre, se hai sviluppato un sito in HTML5, vogliamo vederlo! Lascia un URL nei commenti in modo che possiamo verificarlo.
Conclusione
Bene, questo conclude la nostra serie in quattro parti su HTML5. Abbiamo esaminato le nozioni di base, come utilizzare alcuni nuovi elementi, le principali modifiche semantiche e come implementare HTML5 al momento. Spero che tu abbia imparato tantissimo e ora sei più eccitato e meno preoccupato del futuro dell'HTML. Il tuo feedback è determinante in quali articoli scegliamo di scrivere, quindi dicci cosa hai pensato della serie e cosa vorresti vederci andare in futuro.