Aan de slag met HTML5 en CSS3

HTML 5 Na de golf van "Web 2.0" eind 2007 kende het internet afgelopen jaar een nieuwe kleine digitale revolutie: die van HTML5 en CSS3. Na een decenium aan saaie websites kunnen we voortaan op een relatief eenvoudige manier sites bouwen met originele lettertypes, schaduwen of andere toeters en bellen. Benieuwd hoe? Lees dan even verder voor de belangrijkste nieuwigheden.

HTML5

Eenvoud stond centraal bij de ontwikkeling van HTML5. Zo werd vooropgesteld dat alle bestaande HTML-code (HTML 4, XHTML) compatibel moest zijn met de nieuwe versie van HTML. Verder mag je voortaan ook code gebruiken die volgens oude regels ongeldig was maar officieus al jaren door browsers ondersteund werd. Daarnaast werd ook een beschrijving voorzien van hoe browsers moeten reageren op fouten. En er werden uiteraard ook heel wat nieuwe mogelijkheden voorzien.

Een paar voorbeelden:

In plaats van het onzinnig lange
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
kan je een HTML-document voortaan gewoon starten met het veel eenvoudigere
<!DOCTYPE html>
De meest gangbare lay-outstructuren kregen hun eigen HTML-element. Zo kan je gebruik maken van <header>, <nav>, <section>, <article>, <footer>,... in plaats van hiervoor telkens een weinig zeggende <div> te moeten gebruiken.
De mogelijkheden met formulieren werden sterk uitgebreid. Door bijvoorbeeld aan te geven dat een input-veld een datum moet bevatten, kan de browser automatisch een kalendertje weergeven. Deze nieuwigheden voor formulieren zijn extra handig voor wie surft op een smartphone of tablet.
Voor het invoegen van video, audio of animaties werden met de nieuwe <video>, <audio> en <canvas>-tags enkele stappen in de goede richting genomen.
HTML5 kan overweg met geolocation, waardoor een Google Maps-kaartje bijvoorbeeld automatisch inzoomt naar de plek waar je je op dat moment bevindt.
Met een cache manifest kan je aangeven welke stukken site voor offline gebruik mogen gecached worden.

CSS3

Kadertjes met afgeronde hoeken maken: voor CSS3 was het bijna onbegonnen werk. Ook tal van andere lay-outmatige snufjes worden stilaan een koud kunstje, met dank aan CSS3:

Schaduw plaatsen op tekst of andere elementen? Geen probleem met box-shadow en text-shadow.
Om kaders af te ronden gebruik je border-radius.
CSS3 kan overweg met meerdere achtergronden in één element.
Met opacity geef je een element, class of id een welbepaalde doorzichtigheid.
Krantenliefhebbers zullen dan weer tevreden zijn dat ze voortaan tekst eenvoudig over meerdere kolommen kunnen uitlijnen met behulp van column-count, column-gap en column-rule.
Met transition kan je eenvoudige animaties voorzien.
En misschien wel de belangrijkste nieuwigheid: dankzij @font-face ben je voortaan niet meer gebonden aan een handvol standaardlettertypes.

En dan nu: de "maar" in dit verhaal

Klinkt allemaal te mooi om waar te zijn, niet? Helaas is het dat ook een beetje. Om te beginnen heb je voor HTML5 en CSS3 een moderne browser nodig, wat vooral wil zeggen: geen Internet Explorer 6, 7 of 8. Soms zijn er oplossingen beschikbaar, maar vaak zullen die de oudere browsers vooral vertragen.

Verder gaven een aantal browsers in het verleden ook hun eigen interpretaties aan bepaalde regels, waardoor je soms met vendor prefixes moet werken. Ten slotte zijn relatief nieuwe bestandsformaten als webm en ogg nog niet voldoende ingeburgerd waardoor je voor video en audio vaak meerdere formaten moet voorzien.

We zijn er dus nog niet, maar de meeste browsers (ook Internet Explorer 9) hebben in het afgelopen jaar een enorme vooruitgang geboekt. Tijd dus om mee op de kar te springen en ook jouw sites van HTML5 en CSS3 te voorzien!

Op zoek naar meer info over dit alles? Bekijk dan zeker onderstaande presentatie en de talloze links die er in verwerkt zijn.