Detta blir den sista artikeln i vår serie på HTML5. Detta går och vi får en kort titt på vilka nya HTML5-teknologier som stora webbläsare stöder officiellt och går över några tekniker du kan använda för att utnyttja de nya elementen i din kodning idag. Slutligen diskuterar vi hur du bör börja förbereda för att stödja HTML5 på alla webbplatser du bygger här framåt.
Vilka funktioner är stora webbläsare som officiellt stöder?
I den här artikeln ska vi definiera? Officiellt stöd? som anges i dokumentationen från webbläsarens utvecklare. Detta kommer att se till att inga hack eller tricks krävs för att använda de nya funktionerna och kommer istället att fokusera på inbyggd implementering direkt från källan (gärna lägga till egna kommentarer baserat på resultaten från dina egna tester!). Med det i åtanke, låt oss ta en titt på nuvarande iterationer av några större webbläsare.
Firefox 3.5
Gå vidare till Firefox Developer Page och du får en kort beskrivning av HTML5-support. Här är en lista över funktioner som stöds:
- ljudelement
- videoelement
- dukelement
- Offline resurs specifikation
- Dra och släpp API
Safari 4
Safari 4-funktionerna listar stöd för följande funktioner:
- ljud- och videoelement (och tillhörande API)
- dukelement (faktiskt skapat av Apple för Dashboard)
- Offline applikationssupport
Internet Explorer 8
Även om utvecklingscentret för Internet Explorer hävdar? Starkt stöd? för HTML5 verkar det inte vara något stöd för dukelementet (förmodligen på grund av Silverlight), ljud / videoelement eller API för offlineprogram. Här är en komplett lista över IE 8-stödda element, av vilka ingen av dem verkar vara exklusiva från HTML5. Jag hittade dock omnämnande av stöd för det nya Cross-Document Messaging API. Ta del av alla resurser du har på HTML5-support i IE 8 med hjälp av kommentarerna nedan.
Opera 10
Operas utvecklingswebbplats publicerade en artikel om HTML5 i januari som innehåller befintligt stöd. Här är de funktioner som artikeln listar som stöds av Opera 10:
- videoelement
- dukelement
- Korsdokumentmeddelanden
- Server-skickade händelser
- Webformulär 2.0
Vidare är här en rapport om aktuella webbspecifikationer som stöds i Opera Presto 2.3 (Opera's rendering engine).
Google Chrome
Det gick inte att hitta en officiell lista direkt från Google, jag var tvungen att vända sig till en O'reillyartikel som beskriver ett tal som gjorts av Googles VP för teknik på HTML5 och framtiden för webbteknik. I sitt tal uppger Vic Gundotra dessa funktioner som stöds av Google Chrome (såväl som Firefox, Safari och Opera):
- videoelement
- dukelement
- geolocation API
- App cache (offline wep app API)
- Databas API
- Webarbetare (behandling av bakgrunds tråd)
Fusk
Som du kan se, även de webbläsare som har mest stöd för HTML5, stödjer fortfarande inte ens hälften av de nya funktioner och element som vi har diskuterat i de senaste artiklarna. Vilket innebär att använda HTML5 idag kommer inte vara lika enkelt som att helt enkelt kasta in de semantiska förändringarna som du har lärt dig. Vad vi behöver är ett sätt att skapa de nya elementen i HTML5, med hjälp av den idag använda och använda webbteknologin. Som det visar sig, erbjuder JavaScript en enkel, inbyggd metod för att göra exakt det här! Genom att använda document.createElement, kan vi skapa egna anpassade element som överensstämmer med specifikationerna för de som stöds i HTML5. Visst det är lite av ett hack, men det är det närmaste du kommer att få för att få händerna på alla de nya elementen inom en snar framtid. Låt oss använda exemplet från vår tidigare artikel för att se hur det skulle se ut.
Som du kan se använder den här sidan HTML5-enbart elementrubriken, sidfot, artikel, åt sidan, nav och avsnitt. Allt vi behöver göra för att få detta till jobbet är att skapa dessa element i JavaScript:
Voila! Nu kan du rikta in dessa element i CSS, precis som om de var inbyggda element. Varning: Denna metod kan ge mycket varierade resultat och du bör använda på egen risk. Om någon besöker din webbplats med JavaScript avstängd, kommer din CSS inte att ta tag i och din snygga, vackra HTML5-webbplats kommer att se ut som om den attackerades av Godzilla. Denna metod är dock utmärkt för ditt eget experiment och bör fungera med alla större webbläsare.
Ytterligare testning
I min egen test tycktes både Safari och Firefox hantera alla de nya elementen ovan, utan någon JavaScript alls. Om du tittar på koden ser du att Apples egen Safari 4-sida använder flera nya HTML5-element och endast implementerar JavaScript när det gäller Internet Explorer. Prova detta på din webbläsare och låt oss veta vad du kommer med!
Förbereder för HTML5
På hans webbplats gör Jon Tangerine förslaget att vi bör börja förbereda oss för HTML5 genom att använda den struktur som är inneboende i de semantiska förändringarna. Vad detta betyder praktiskt taget är ganska enkelt, använd klasser för att efterlikna strukturen på en HTML5-sida.Denna metod är inte webbläsarspecifik, följer alla nuvarande populära standarder, litar inte på skript och är super lätt att implementera. Till exempel skulle vi ta alla rubrikkoderna i koden ovan och konvertera dem till
Nu, om du verkligen vill förbereda dig själv för HTML5, ska du inte bara kasta villkoren header, sidfot, avsnitt etc. runt. Tvinga dig att använda dessa termer semantiskt, som om de var de faktiska HTML5-elementen. Först och främst betyder det att du använder klass istället för id i förekommande fall. Det innebär också att man följer de strikta HTML5 riktlinjerna för varje element (beskrivs i föregående artikel). Ett exempel på detta skulle vara att bara använda a nav klass på större navigeringsområden på en sida och inte för mindre navigationslänkar som de som finns i en sidfot.
5 platser med HTML5
Trots att min officiella råd är att HTML5 inte kommer att vara redo för populär användning under en tid måste jag beundra webbplatser som tar initiativ till att inleda framtiden för webbutveckling genom att använda HTML5 idag. Här är fem webbplatser som bara gör det. Klicka bara på en bild för att se webbplatsen. Var noga med att ta en titt på koden varje utvecklare brukade få en uppfattning om strukturen av några få exempel på HTML5 i realtid. Om du har utvecklat en webbplats i HTML5, vill vi också se den! Lämna en URL i kommentarerna så att vi kan kolla in det.
Slutsats
Tja, det avslutar vår fyra delserier på HTML5. Vi har gått över grunderna, hur man använder ett urval av få nya element, stora semantiska förändringar och hur man implementerar HTML5 just nu. Jag hoppas att du har lärt dig en ton och är nu mer upphetsad och mindre orolig över HTML-framtidens framtid. Din feedback är medverkande i vilka artiklar vi väljer att skriva så berätta vad du tyckte om serien och vad du skulle vilja se oss gå över i framtiden.