• Home
• Diensten
• Case studies
• Vacatures
• Contact

HTML 5 en CSS 3

Binnenkort zullen alle grote browsers HTML 5 en CSS 3 ondersteunen. Wat gaat er hierdoor veranderen, en wat voor voordelen biedt dit aan webdevelopers en eindklanten? De grootste verandering zit hem waarschijnlijk in het feit dat HTML en CSS minder afhankelijk zullen worden van extra talen en plugins zoals Flash of Javascript voor het bereiken van bepaalde effecten of voor het weergeven van animaties en video materiaal.

Hieronder volgen enkele hoogtepunten om alvast naar uit te kijken.

De video tag

Met de video tag wordt het mogelijk om direct een video aan te roepen in HTML, zonder dat daar Flash of Silverlight voor nodig is. De browser gebruikt zijn eigen ingebouwde speler om de video weer te geven.

Het canvas element

Met het canvas element wordt het mogelijk om complexe animaties te maken zoals dat ook in bijvoorbeeld Java kan. Zelfs 3D animaties horen tot de mogelijkheden.

Inhoud specifieke elementen

Er komen een stel nieuwe tags bij in HTML 5 waarmee het makkelijker wordt om specifieke website onderdelen aan te duiden. Enkele voorbeelden zijn nav voor navigatie elementen, progress voor de voortgang van een taak zoals downloaden, section/header/footer om delen van een website aan te duiden of article om artikelen mee aan te duiden.

Betere invoer validatie

Invoervelden krijgen een breed scala aan nieuwe types, waarmee validatie van invoer beter en al direct door de browser kan worden uitgevoerd. Handige nieuwe types zijn o.a. tel, email, url, date en search. 

Afrondingen, schaduwen, gradiënten en transities

De vele nieuwe CSS 3 elementen maken het mogelijk om vrijwel elk HTML element een mooie afronding, schaduw of gradiënt te geven zonder dat hier afbeeldingen of talloze extra div's voor gebruikt hoeven te worden. Daarnaast maken transities het mogelijk om de effecten van bijvoorbeeld een mouse-over langzaam in en uit te faden, uiteraard zonder javascript of jQuery.

Waarom nu al met HTML 5 en CSS 3 werken?

Ook al wordt HTML 5 en CSS 3 nog niet door alle browsers ondersteund, de meeste modernde browsers zoals Chrome, Safari en Firefox zijn wel al zover. Ook is aangekondigd dat Internet Explorer 9 ondersteuning zal bieden voor HTML 5 en CSS 3, alhoewel mogelijk nog niet voor de volle 100%.

Dit betekent dus wel dat er nu al voordeel te halen is uit het gebruik van HTML 5 en CSS 3 en dat bezoekers van websites in moderne browsers bijvoorbeeld al getrakteerd kunnen worden op mooiere en minder zware websites die CSS 3 effecten gebruiken. Browsers die deze effecten niet ondersteunen zullen de website niet vervormen of slecht weergeven.

Daarnaast is er voordeel te plukken op het gebied van SEO. Waar nu bijvoorbeeld <div class="article"> ...</div> gebruikt wordt, kan nu al een <article></article> tag omheen worden gezet. Dit heeft nu misschien weinig effect, maar het is heel waarschijnlijk dat zoekmachines hier in de toekomst veel waarde aan zullen hechten.

En er is eigenlijk geen reden om niet al met HTML 5 te werken. De taal is immers compatibel met HTML 4 en XHTML, dus elke browser kan er nu al mee omgaan. Het zal alleen nog even duren voor de specificaties van HTML 5 volledig rond zijn en elke browser elke feature volledig ondersteunt.