home | sitemap

HTML5 en CSS3

Na jaren van 'stilstand' op het gebied van internettechnieken is er nieuws aan de horizon: HTML5 en CSS3. Nieuwe browsers bieden meer mogelijkheden voor een betere 'user experience', eenvoudigere opmaak van websites, etc. Wat is er dan allemaal nieuw en waar moet je op letten:

Wat is HTML5

HTML5 is, of beter: wordt (want de standaard is nog niet definitief), de nieuwste HTML-versie, de opvolger van HTML versie 4 en XHTML versie 1. Het doel van HTML5 is minder afhankelijk te zijn van technologiën als Flash, Silverlight, speciale video-players, plugins, etc., het biedt betere ondersteuning voor het semantische web en bevat meer mogelijkheden voor web-applicaties en mobiele apparaten.

Op het internet is heel veel informatie te vinden over HTML5, van de droge uitleg van de standaard van het W3C tot uitgebreide tutorials. Een kwestie van gewoon even googelen op 'HTML5' of 'CSS3'.
Een uitstekend startpunt is het online boek http://diveintohtml5.org
Aan het eind van deze pagina vind je meer relevante links.

Wat kan HTML5 meer of anders dan HTML en XHTML:

Semantic Markup

Naast de bekende tags als <div>, <h1>, <p>, etc. zijn er nieuwe tags in het leven geroepen die nader aangeven wat de inhoud is of waar ze over gaan: <article>, <section>, <aside>, <hgroup>, <dialog>, <footer>, <nav>, <time>, <mark>, <figure> en <figcaption>.
Voor een korte uitleg per tag, zie http://diveintohtml5.org/semantics.html#new-elements

Geolocation

Een browser die HTML5 ondersteunt én op een apparaat draait dat de geografische locatie kan bepalen maakt die locatie via javascript ook beschikbaar voor de website/applicatie. Op die manier kan bijv. de locatie ten tijde van het schrijven van en tweet worden meegestuurt of kan een kaart worden getoond met de positie van de bezoeker en bijv. interessante locaties in de omgeving.
Meer weten, zie http://diveintohtml5.org/geolocation.html

Form Enhancements

HTML5 kent nieuwe input-types en attributen voor formulieren. Invoervelden voor datums, nummers, etc. moesten 'vroeger' omslachtig via javascript worden gerealiseerd. Browsers met HTML5 bieden standaard een set aan elementen die dit automatisch regelen. De ondersteuning is echter nog zeer minimaal.
Zie http://diveintohtml5.org/forms.html voor de mogelijkheden.

Audio/Video

Het meest besproken zijn de audio en video mogelijkheden die HTML5 biedt. Met de <video> en <audio> tags is het mogelijk zonder Flash of andere systeemafhankelijke players beeld- en geluidsmateriaal weer te geven. Mits dat materiaal van het type .ogg, .mp3, .wav of .aac is of videobestanden van het type .ogv of .mp4 (h.264) zijn. Google probeert met WebM ook een formaat te promoten.
Voor de (on)mogelijkheden: http://diveintohtml5.org/video.html

Canvas

Met het <canvas>-element kun je in HTML5 platgezegd tekenen met javascript. Daar is wel de nodige programmeerkennis voor nodig, maar de mogelijkheden zijn legio, zie bijv. http://webdesignledger.com/inspiration/10-html5-demos-to-make-you-forget-about-flash en http://diveintohtml5.org/canvas.html

Persistent Data Storage

HTML5 biedt programmeurs de mogelijkheid om gegevens op te slaan op de computer van de gebruiker. Wat vroeger via cookies ging kan nu makkelijker en met meer mogelijkheden direct via javascript, zie http://diveintohtml5.org/storage.html. Dit biedt ook de mogelijkheid om offline te werken (http://diveintohtml5.org/offline.html): zonder een internetverbinding kan de website/applicatie lokaal gegevens bewaren en die bij een volgende keer, als er wel een internetverbinding is, versturen naar een webserver. 

Zoals gezegd: HTML5 is nog geen officiële standaard, en wanneer het dat wel is weet nog niemand (HTML5 is al in ontwikkeling sinds 2007). Desalniettemin ondersteunen alle nieuwe browsers, incl. IE9, al de nieuwe mogelijkheden. De verschillen zijn her en der nogal groot, het verdient dus de aanbeveling goed te kijken welke techniek ingezet kan worden en wat een eventuele alternatieve oplossing is voor oudere browsers. (Zie ook het hoofdstuk 'Wat, wanneer te gebruiken' verderop.)

CSS3

CSS3 is de nieuwste versie van de CSS standaard. Net als HTML5 is CSS3 nog geen officiële standaard maar ondersteunen de nieuwste browsers wel zo goed als mogelijk de nieuwe mogelijkheden. Een korte opsomming:

Borders
border-color
border-image
border-radius
box-shadow

 

Backgrounds
background-origin en background-clip
background-size
multiple backgrounds

 

Color
HSL colors
HSLA colors
opacity
RGBA colors

 

Text effects
text-shadow
text-overflow
word-wrap

 

User-interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

 

Selectors
attribute selectors

 

Op http://www.zenelements.com/blog/css3-introduction/ staat een overzicht met voorbeelden van de nieuwe mogelijkheden.

De mogelijkheden met CSS3 lijken haast weer eindeloos net als 'toen' met CSS2. Door te googelen op CSS3 zijn er duizenden voorbeelden en toelichtingen te vinden van de nieuwe mogelijkheden. Enkele voorbeelden:

NB: CSS3 en HTML5 hebben niets met elkaar te maken ook al worden ze wel vaak in één adem genoemd. CSS3 werkt evengoed voor gewone HTML en XHTML pagina's!

Wat, wanneer te gebruiken

Was het voorheen al lastig om een website/vormgeving geschikt te maken voor alle browsers, met de komst van HTML5 en CSS3 wordt het er niet makkelijker op. Wederom is IE een beetje het zwarte schaap: van Google Chrome, Mozilla Firefox, Safari en Opera worden met grote regelmaat nieuwe versies uitgebracht met meer mogelijkheden en betere ondersteuning voor HTML5/CSS3. En die browsers updaten zichzelf ook nog eens automatisch zonder dat de gebruiker iets hoeft te doen.

Met Internet Explorer 9 is Microsoft weer bij, maar voordat 'alle' gebruikers van van IE6, 7 en 8 zijn overstapt zal het nog wel even duren.

Hoe weet je dan wanneer je HTML5 en/of CSS3 kunt gebruiken? HTML5 en CSS3 kun je zonder gevaar inzetten... alleen zal een oudere browser nieuwe mogelijkheden gewoon negeren. In dat geval zul je, als nodig, iets moeten bieden zodat de website/vormgeving er nog enigzins goed uit blijft zien.

Met modernizr.js (http://www.modernizr.com/) kun je heel eenvoudig css regels inzetten afhankelijk van de mogelijkheden van de browser. Bekijk de website http://www.modernizr.com/ maar eens in IE8 en Chrome en zie de verschillen (ronde hoeken, gespiegelde en gedraaide teksten, kleurverlopen, animaties, etc. Let vooral eens op de Download button)!
Op http://www.modernizr.com/ vind je alle uitleg van de mogelijkheden. 

Zie ook http://diveintohtml5.org/detect.html over hoe nieuwe mogelijkheden te detecteren en veilig toe te passen.

Ondersteuning door het cms

Voor zover nu mogelijk en bekend (HTML5 is nog geen officiele standaard!) is het cms aangepast en geschikt voor HTML5 websites. CSS3 heeft alleen te maken met de opmaak/weergave van de website/vormgeving, daar heeft een cms geen 'last' van.

CSS(3) is HTML-versie onafhankelijk, dus of je nu HTML5 gebruikt of (X)HTML, nieuwe CSS mogelijkheden kun je 'altijd' inzetten. Altijd tussen aanhalingstekens, want de browser moet het wel ondersteunen.

Compatibility mode van IE

Met de komst van IE8 werden vele websites/vormgeving niet goed weergegeven. Microsoft had zelfs een lijst met websites ingebouwd waarbij de browser zich moest gaan gedragen als IE7. Om websitebouwers de tijd te geven om websites aan te passen en toch te voorkomen dat websites al verkeerd weergegeven zouden worden werd de 'compatibility mode' bedacht, zie 'Compatibility Mode van Internet Explorer 8'.

Om te voorkomen dat alle reeds bestaande vormgevingen aangepast moesten worden zorgde het cms er toen automatisch voor dat de compatibility mode op IE7 werd gezet. Dat is nog steeds het geval.

Ook IE9 kent deze compatibility mode en zal zich dus gaan gedragen als IE7. Wil je gebruik maken van de nieuwe mogelijkheden van HTML5 en CSS3, dan zal de compatibility mode expliciet gezet moeten worden, zie 'Compatibility Mode van Internet Explorer 8'.

Voor vormgevingen met het HTML5 Doctype <!DOCTYPE html> zal het cms automatisch de tag

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

toevoegen aan de <head> van de pagina's zodat IE9 en toekomstige versies alle nieuwe mogelijkheden van HTML5 en CSS3 en hun opvolgers beschikbaar maken en toepassen.

Hieronder enkele interessante websites over HTML5 en CSS3: