CSS Hacks voor verschillende browsers

CSS Hacks voor verschillende browsers

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.

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *