html-site

leer alles om je eigen succesvolle website te maken

CSS Hacks voor verschillende browsers

css hacks lossen browserproblemen op Ook al gebruikt 99% van de internetbezoekers een browser die CSS ondersteunt, toch gaan de verschillende browsers op verschillende manieren met CSS om. We hadden het in een ander artikel al eens over het zogenaamde box probleem. Ook met opsommingen (<ul> en <ol>) worden meer dan eens problemen ervaren. Aan de andere kant laten we je in dit artikel zien dat dergelijke problemen eenvoudige kunnen worden opgelost. Hiervoor gebruiken we dit keer CSS hacks.

Aandachtspunt

Er is wel een aandachtspunt op zijn plaats. Internet Explorer 7 heeft de meeste problemen die zich op het gebied van CSS voordeden verholpen. Daarnaast, wanneer je goede html code en goede CSS code schrijft, zijn de meeste problemen de wereld uit. Veel websitebouwers maken daarnaast voor browsers verschillende stijlbladen. Hier gaan wij verder nu niet op in.

het probleem

We gaan even uit van het volgende probleem. Stel je hebt een header gemaakt en die ziet er in Firefox goed uit wanneer je de margin-bottom op 10px zet, maar deze ruimte blijkt in Internet Explorer te weinig te zijn en hier moet je de margin-bottom op 25px zetten. De CSS code die je zou moeten gebruiken is:

#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}

Dit blijkt dus niet te werken in verschillende browsers, want alleen de tweede regel wordt gebruikt, en de eerste wordt niet toegepast. Hiervoor moet je dus een oplossing toe gaan passen.

Hack voor Internet Explorer

Om Internet Explorer (IE) anders te benaderen gebruiken we de 'child selector' commando, wat IE niet kan intepreteren. Deze 'child selector' koppelt twee elementen. Dus html>body verwijst naar het 'kind' (child), body, die zich bevindt in de 'ouder' (parent), html. Wanneer we weer bovenstaand voorbeeld gebruiken dan wordt dit:

#header {margin-bottom: 25px;}
html>body #header {margin-bottom: 10px;}

IE begrijpt de tweede regel niet en zal de eerste regel toepassen, terwijl Firefox en andere browsers deze tweede regel wel kunnen intepreteren en dus zullen toepassen, in plaats van de eerste regel.

hack voor Internet Explorer 7

Ook al heeft IE 7.0 een betere ondersteuning gekregen als het gaat om CSS, bijvoorbeeld wordt :first-child nu wel ondersteunt en in vroegere versies niet, toch blijven er niet ondersteunde onderdelen. De child selector wordt door IE 7.0 ook ondersteunt, de truc zoals boven beschreven werkt voor deze browser dus niet meer, maar ook hier is weer een oplossing voor. Namelijk door achter het 'groter dan' teken een leeg commentaar symbool te openen en te sluiten. Voorbeeldje:

#header {margin-bottom: 25px;}
html>/**/body #header {margin-bottom: 10px;}

Waarom dit kan? Geen idee, maar het werkt wel.

Hack voor IE 5.x en 6.0

Tenslotte de hack die je kunt gebruiken wanneer je alleen iets wilt laten zien in IE 5.x en 6.0, en dus niet in andere browsers. 

* html #header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}

We zijn in het bovenstaande verhaal niet ingegaan op hacks voor IE 4, IE 5, Netscape 4 en IE for mac. Deze browsers hebben inmiddels vrijwel geen marktaandeel meer.

Ontwerpen voor geld