Validweb

Bugs

Tijdens het ontwikkelen van sites met CSS zul je ongetwijfeld tegen wat rare fouten aanlopen. Je bent hoogstwaarschijnlijk niet de eerste die tegen een bepaalde fout aanloopt, dus een zoekopdracht via google biedt vaak uitkomst. Alle bekende CSS bugs opnoemen is natuurlijk onmogelijk, dit artikel heet overigens CSS hacks dus ik hou het kort.

Waarschijnlijk de meest bekende CSS bug is die in het Box Model van Internet Explorer. De ontwikkelaars van IE hebben de CSS specificatie niet goed geimplementeerd (padding en borders worden niet opgetelt bij de grootte van het element). Deze bug werd de meest gedocumenteerde CSS bug, die omzeilt kan worden via Tantek’s Box Model hack.

Microsoft haalde de fout uit IE 6, echter op ‘miraculeuze wijze’ vertoond IE 6 soms toch hetzelfde foutieve gedrag als vroeger. Dit komt omdat wegens backwards-compatability redenen IE 6 twee modi bevat om HTML & CSS te interpreteren. Lees Rendering mode and doctype switches op Position is everything voor meer informatie.

Inline CSS hacks

Tantek’s Box Model hack is een voorbeeld van een CSS hack die in de CSS zelf wordt gebruikt. Of er een officiele term voor is weet ik niet, maar ik noem ze voor het gemak Inline CSS hacks. Ik zeg er gelijk bij dat ik hier geen voorstander ben, als ze te vermijden zijn zou ik dat doen. Inline CSS hacks zijn vaak moeilijk te begrijpen voor CSS beginners, en zorgen al snel voor verwarring. Neem bijvoorbeeld de Box Model hack:

div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
} 

Die slahses en aanhalingstekens maken je duizelig, en het is niet voor iedereen duidelijk welke regel nou voor welke browser is. Een bijkomend probleem met dit soort hacks is dat je niet kan voorspellen hoe nieuwere versies van browsers met bestaande bugs en hacks omgaan. Het zou dus kunnen zijn dat je hacks in nieuwere versies voor meer problemen zorgen.

De Box Model hack is zeker niet de enige in zijn soort, bekijk de complete lijst Inline Css hacks.

Import hack

Een andere mogelijkheid om CSS te verbergen of te tonen voor bepaalde browsers is door de CSS op een bepaalde manier te koppelen aan je HTML bestand. Voorbeeld: om CSS voor Netscape 4 te verbergen kun je gebruik maken van de @Import Hack, door stylesheets te importeren met @import.

@import(url-naar-stylesheet);

Het is maar de vraag of je deze hack daadwerkelijk nodig hebt. Wanneer je CSS gebruikt die serieuze problemen veroorzaken in Netscape 4, en je site om wat voor reden Netscape 4 gebruikers aantrekt is het een optie deze hack te gebruiken.

Ook deze hacks hebben het probleem dat ze weleens voor problemen zouden kunnen zorgen in nieuwere versies van de betreffende browsers. Mocht je deze hack toch willen gebruiken: lijst met variaties voor verschillende browsers.

Aparte stylesheets

Een ander slecht idee is het maken van geheel verschillende stylesheets voor de verschillende browsers. Het mooie van CSS is juist dat je maar één bestand hoeft aan te passen, en geen verschillende pagina’s meer hoeft bij te houden om elke browser te ondersteunen. Deze manier van hacken werkt simpel, je zoekt uit (via javascript/php/cgi of een andere scripttaal) welke browser er wordt gebruikt en stuurt het stylesheet dat speciaal voor die browser is geschreven. Een ander probleem is dat het bij het uitzoeken welke browser er wordt gebruikt weleens misgaat, en browsers dus verkeerde CSS krijgen aangeleverd.

IE 7

Dean Edwards’ IE 7 is niet echt een hack, meer een uitbreiding voor IE (versie 5 of hoger) waardoor het mogelijk is geavanceerde CSS te gebruiken. Hoewel ik het een leuk initiatief vind heb ik er nooit gebruik van gemaakt, vooral omdat je veel van de opties niet op elke pagina gebruikt terwijl ze wel ingeladen moeten worden.

Conditional comments

Als je speciale CSS voor IE wil meegeven is voor mij de keuze snel gemaakt, conditional comments. Deze feature van IE maakt het mogelijk bepaalde code alleen door bepaalde versies van IE uit te voeren. Je kunt aangeven welke versie(s) je wilt aanspreken, andere browsers voeren de code niet uit.

Wanneer ik een pagina opzet, zorg ik er eerst voor dat alles naar behoren werkt in de betere browsers (Firefox/Opera). Na testen in verschilende versies van IE (zowel in Standards Compliance mode als Quirks mode) maak ik een nieuw stylesheet met alle aanpassingen voor IE. Daarna zorg ik ervoor dat dit stylesheet alleen aan IE wordt getoond met behulp van conditional comments.

Dit klinkt tegenstrijdig met wat ik eerder zei, aparte stylesheets zijn een slecht idee. Toch is er een verschil. Het aparte stylesheet bevat alleen de regels die de problemen in IE oplossen. Hacks dus, maar dan zo dat je je hoofdstylesheets schoon houdt. Omdat je specifieke IE versies op kunt geven zorg je er bovendien voor dat de hacks in toekomstige versies van IE geen problemen veroorzaken.

Op deze site zelf maak ik ook gebruik van conditional comments, dit ziet er als volgt uit:

<link rel="stylesheet" href="/css/screen.css" media="screen" />
<!--[if ie]>
	<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->

screen.css

Bevat alle CSS regels voor de hele site, deze wordt door alle CSS ondersteunende browsers (ook IE) ingeladen.

ie.css

Bevat alleen de elementen waar IE de fout ingaat, de foutieve elementen worden herschreven met de voor IE juiste waarden. Dit bestand wordt door alle versies van IE ingelezen.

Let op: de methode die ik hier gebruik zou gevaarlijk kunnen zijn als de nieuwe versie van IE uitkomt, omdat ik aangeef dat alle versies van IE de regels moeten inlezen. Voor mij is dat geen probleem omdat ik deze site zelf beheer. Als je voor klanten werkt zorg er dan voor dat je expliciet de browserversies opgeeft om latere problemen te voorkomen.

Meer informatie over het gebruik van conditional comments.

Conclusie

Afhankelijk van de complexiteit van je CSS en de browsers die je wilt ondersteunen zul je veel of weinig met CSS bugs te maken krijgen. Dat je met ze te maken krijgt is zeker, dus wees voorbereid.

Probeer waar mogelijk hacks te voorkomen, bijvoorbeeld door gebruik van conditional comments, maar soms kan je er niet om heen. Welke methodes je gebruikt om deze fouten te verhelpen is geheel aan jou. Probeer er voor te zorgen dat je technieken gebruikt die het beste bij het project passen, welke technieken dat zijn hangt af van het soort site en je bezoekers.

Navigation