Blog: CSS3 & HTML5, wat is dat nu eigenlijk?

Wie een beetje bijhoudt wat er momenteel allemaal op het internet speelt, interesse heeft in webdesign en misschien wel een paar vrienden heeft die verstand hebben van zaken zoals css en html, heeft vast wel één en ander horen vallen over css3 en html5. Twee zeer veelbelovende nieuwe versies van talen die al lange tijd gebruikt worden door elke website. Maar wat is het en wat kan je ermee? 

HyperText Markup Language

De taal die door alle websites gebruikt wordt is html (HyperText Markup Language). Met deze taal geef je structuur aan een pagina. Het is de code die je ziet als je de broncode van een site bekijkt. Je plaatst bepaalde elementen (tags) die verschillende eigenschappen kunnen hebben (attributes). Deze elementen kunnen allemaal een eigen unieke id hebben en een bepaalde klasse meekrijgen, waarmee andere talen dan weer allemaal leuke dingen kunnen doen. Bijvoorbeeld de kleuren van de tekst veranderen of complexere zaken zoals animaties.

Html geeft een website dus structuur en zegt verder weinig over de stijl. Hoewel, bijna alle elementen hebben een paar standaard lay-out-eigenschappen. Zo zijn kopjes altijd groter en dikker dan de tekst in paragrafen en wordt tekst altijd van links naar rechts geschreven. Met diverse attributen kan je de lay-out van de elementen tot op zekere hoogte beïnvloeden, maar dit is een verouderde techniek. Tegenwoordig wordt door een andere taal voor gebruikt: css.

Cascading Style Sheets

Cascading Style Sheets (css) gebruik je voor de stijl van de pagina. Je kan met css dus de lay-out van html-elementen veranderen. Dit kan gaan om kleur, grootte, lettertype, maar ook zaken zoals de positie, tekstomloop en de marge van een element.

Een krachtige taal, waarmee je tot op de pixel nauwkeurig elementen kan plaatsen. Vrijwel alle sites maken dan ook van deze taal gebruik en alle browsers ondersteunen het. Er zijn soms wel grote verschillen tussen hoe browsers bepaalde zaken gebruiken. Dit tot frustratie van veel webdesigners. Met name Internet Explorer is een browser die vaak zwaar onder vuur ligt en dan met name IE6, een zeer verouderde versie. Overigens, Eastground raadt het gebruik aan van Safari, Chrome of Firefox. Ook wij hanteren inmiddels waarschuwingen bij het gebruik van IE6.

De ontwikkelingen

De meest gebruikte versie van html is momenteel html4.01 en bij css is dit css2.1. Maar nu wordt er dus gewerkt aan nieuwe versies: html5 en css3 die allebei veelbelovend zijn. Beide talen zijn nog niet volledig af, ze zijn nog niet de nieuwe standaard. Maar veel browsers ondersteunen de talen wel en ze kunnen inmiddels gebruikt worden. Belangrijk is in ieder geval dat de (meeste) nieuwe zaken ook werken in oude browsers (backwards compatibility), iets waar je als webdesigner ook bedacht op moet zijn.

De belangrijkste insteek bij de ontwikkeling van html5 is het terugbrengen van de noodzaak van extra scripts en plugins, zoals java, Adobe Flash en Microsoft Silverlight. Hiervoor zijn er een aantal nieuwe tags toegevoegd, zoals de video- en audio-tag, waarmee het stukken eenvoudiger wordt om mediabestanden af te spelen. Daarnaast wordt er een bepaalde basisstructuur voorgesteld voor websites, waarbij men er van uit is gegaan dat een aantal elementen op vrijwel alle sites aanwezig zijn (zoals header, footer, menu, artikelen, sidebar). Dit is een weerspiegeling van de structuur die sites tegenwoordig aanhouden. Door het gebruik van deze elementen wordt de hoeveelheid code weer sterk teruggebracht.

De ontwikkelingen van css3 hebben voornamelijk betrekking op nieuwe mogelijkheden voor de lay-out, die zeker ook de reductie van de hoeveelheid code als gevolg hebben. Waar bijna alle animaties nu met javascript of Adobe Flash gedaan worden, kunnen straks een aantal zaken eenvoudig vervangen worden door css. Het menu, de footer en de portfolio op de startpagina van deze site maken al gebruik van css-animaties. Bekijk de site maar eens in Google Chrome of Safari. Door de verminderde hoeveelheid code en de verdwijnende noodzaak voor plugins en veel extra bestanden, laden sites straks een stuk sneller. Tevens zijn er nu al een aantal langverwachte opties beschikbaar, zoals transparantie, meerdere achtergrondafbeeldingen, schaduwen, etc. Het wordt hiermee voor designers niet alleen makkelijker mooie sites te maken, door de nieuwe mogelijkheden wordt er ook een stuk leuker!

Afwachten

De instantie die op internet over de standaarden gaat is het World Wide Web Consortium (W3C). Dit is een groep met experts die gaan kijken welke nieuwe ontwikkelingen er toegepast kunnen worden en of de boel dan ook nog werkt in oude versies van programma's (zoals browsers). Daarnaast zijn er werkgroepen die zich met specifieke onderwerpen bezighouden, zoals de WHATWG die zich met html5 bezighoudt. De ontwikkelingen zelf worden gedaan door ontwikkelaars van browsers en andere programmeurs. Een bekende club is Mozilla (van Firefox) en de mensen die WebKit ontwikkeld hebben (de basis voor Safari en Chrome).

Deze mensen passen allemaal leuke nieuwe dingen toe in hun eigen systemen en hopen dan dat dit zo leuk of handig is dat de rest dit wil overnemen. En daar zit precies een van de problemen. Je moet altijd maar afwachten of iets nieuws ook werkelijk standaard wordt. De ondersteuning die er momenteel is voor html5 en css3 is dan ook erg verschillend per browser. Als je de websiteman-site met verschillende browsers bekijkt, zul je zien dat het geheel er wel hetzelfde uitziet, maar bijvoorbeeld bepaalde animaties niet of anders werken. Of we hebben om iets passend te maken extra, browser-specifieke, code moeten toevoegen. Als iedereen dezelfde standaarden zou hanteren, zou het werk van webdesigners een stuk makkelijker worden!

Maar er zit wel schot in de zaak. Er zijn een aantal grote spelers bezig met de laatste ontwikkelingen. Zoals Google met het nieuwe Google Wave. Dit online platform is voor het grootste gedeelte gebaseerd op nieuwe technieken en gaat er vanuit dat ontwikkelaars dit ook gaan doen. En zolang genoeg mensen dit werkelijk gaan doen, komt er echt nog wel een keer een tijd waarin alles leuk in elk programma werkt. Het vervelende is alleen dat er dan wel weer iets nieuws is waar we mee aan de slag kunnen...