HTML5
Nu Microsoft Internet Explorer 9 uitgekomen is en Mozilla ook al de eerste Release Candidate van Firefox 4 uitgebracht heeft, begon het te kriebelen om mijn website aan te gaan passen. HTML5 biedt een hoop nieuwe semantische elementen, waar voorheen nog een <div> nodig was. Een <div> is, net als een <span>, een semantiekloos element, de tekst die erin komt te staan heeft dus in principe geen betekenis. Een lijstje van de elementen die ik tot dusver heb gebruikt:
<header><menu><section><article><details><nav><footer><figure><audio>(nog te implementeren)
Op deze website is een overzicht te vinden van alle HTML5 elementen en de mogelijke attributen. Op deze website is te zien welke elementen er sinds HTML5 geïmplementeerd zijn.
Het audio element is een verhaal apart, inmiddels zijn er veel browsers die dit ondersteunen, maar iedere browser gebruikt een zelf ontworpen gebruikersinterface. Het voordeel hiervan is dat het er op elke site (die bezocht wordt met dezelfde browser) hetzelfde uitziet, voor de bezoeker is het dus herkenbaar. Het nadeel is dat deze interface niet past op een website die voor de rest volledig gestyled is. Ook hanteren de verschillende browsers verschillende hoogtes. Als er een kader wordt gebruikt met gemiddelde hoogte, zal het in de ene browser buiten het kader vallen en in de andere browser blijft er juist ruimte over in dit kader. Hiervoor zijn diverse kant-en-klare oplossingen die volledig naar wens aan te passen zijn, zoals jPlayer voor jQuery echter gebruiken deze allen Flash als fallback. Inmiddels heb ik er nog een gevonden, welke geen fallback vereist: MediaElementJS. Een element dat normaliter slechts een regel HTML gebruikt, heeft dan tientallen regels HTML, CSS en Javascript nodig. Er zijn slechts enkele browsers die het audio element nog niet ondersteunen (Internet Explorer 8 of ouder, Firefox 3.0 of ouder en Safari 3.2 of ouder). Ook is mij nog niet bekend hoe dit audio element van buiten aan te sturen is (zoals linkjes in de tekst of een playlist opgebouwd in HTML). Deze puntjes vereisen dus nog verder onderzoek.
Een bijkomend voordeel van deze elementen is dat het een hoop CSS "hacks" scheelt, de stylesheet wordt dus een stuk kleiner. Wat de stylesheet ook kleiner maakt, zijn de nieuwe functies van CSS3. Een hoop daarvan konden al met proprietary tags gebruikt worden en dankzij de animatiemogelijkheden in CSS3 kan zelfs Javascript in veel gevallen achterwege worden gelaten.
Proprietary tags zijn tags die specifiek voor een browser zijn gemaakt. Zo is er de -moz- prefix voor Mozilla Firefox, -webkit- voor Chrome en Safari, -o- voor Opera, -ms- voor Microsoft Internet Explorer en -khtml- voor Konqueror. Zo zijn er 6 regels nodig om een enkele functie werkend te krijgen, een versie zonder prefix moet er dan onder worden gezet zodat de werking ook gegarandeerd blijft in nog uit te komen browsers. Konqueror kent maar een relatief klein aantal gebruikers en de functies die door middel van de -kthml- prefix werken zijn mij onbekend en zullen dan ook verder niet worden genoemd. Een aantal functies die ik heb gebruikt:
opacity(voorheen-moz-opacity, dit werkt echter sinds Firefox 3.6 in alle browsers zonder prefix)box-shadow(voorheen-moz-box-shadow, werkt vanaf Firefox 4 zonder prefix, in Chrome en Safari is echter nog de-webkit-prefix vereist, in Internet Explorer is dit pas in versie 9 geïmplementeerd, zonder prefix)border-radius(voorheen-moz-border-radiusof-webkit-border-radius, werkt in Internet Explorer 9 en Firefox 4 en ook in de andere browsers)linear-gradient(werkt enkel in Firefox vanaf 3.6 en Safari, een prefix is vereist)radial-gradient(werkt enkel in Firefox vanaf 3.6 en Safari, een prefix is vereist)transition(werkt in alle browsers behalve Internet Explorer, een prefix is vereist)
Ik heb er bewust voor gekozen om mijn website om te zetten naar HTML5, het is echter niet verstandig dit al toe te passen op productieve websites. HTML5 staat echter al een hele tijd voor de deur en heb dan nu ook mijn kans gegrepen om er alvast wat van te leren. Het zal er dan tijdelijk in elke browser anders uitzien, maar dit heeft geen invloed op de werking van de site. Enkel gebruikers met een Internet Explorer ouder dan versie 9 hebben helaas pech gehad, omdat deze de nieuwe HTML5 tags nog niet ondersteunen. Je kan hier vinden vanaf wanneer bepaalde functies ondersteund worden.
Eerder heb ik al besloten de ondersteuning voor Internet Explorer 6 te staken, doe ook mee!
Tot dusver hebben 269 lezers dit bericht gewaardeerd.
Stemmen & Reacties
Er zijn nog geen reacties op dit item. Plaats de eerste!