Homepage » Tutorials » HTML & CSS » Child Selectors gebruiken om IE problemen op te lossen.

Child Selectors gebruiken om IE problemen op te lossen.

Info
Door:	aRAchNiON	Moeilijkheidsgraad:
Views:	10.351	Reacties:	6(Bekijken)
		Log in om zelf te reageren
		Waardering:	8.3/10 (3 stemmen)

Dit is een klein handig truukje dat ik ooit ergens opgepikt heb. Ik hoop dat het van pas komt.

Schets van een mogelijk probleem

Je bent net klaar met een prachtige layout te ontwerpen, je CSS is af en je besluit nog snel eens te testen in Internet Explorer. Je weet al wat er gebeurt... Internet Explorer ondersteunt dit maar half en dat al helemaal niet. We gaan nu even IE's zwakte tegen hem gebruiken :P

De mensen die met FireFox, Opera of eender welke andere browser deze link volgen merken direct een mooie, halftransparante achtergrond op. (achter mijn tekst). Dit is eigenlijk gewoon een achtergrond, bestaande uit een .png van 1 op 1 pixel, die halfdoorzichtig blauw is.
Internet Explorer ondersteunt dit coole truukje jammergenoeg niet.
Hoe zorg je ervoor dat het niet fout loopt?

De oplossing: Child Selectors

1. We schrijven gewoon de code voor IE
We beginnen met de code voor IE. Ik heb:

#	Code
1 2 3 4	p     {     background-color:        #557d94;     }

Ik zet hier de achtergrond kleur die het meest lijkt op mn halftransparante .png.

2. Nu gebruiken we Child Selectors
Child Selectors worden door IE helemaal niet ondersteunt. Wel door vrijwel elke ander browser. Een klein beetje theorie:

#	Code
1 2 3 4	parent>child     {     /* attributen*/     }

parent is de ouder, child het kind. Met parent>child selecteer je alle childs die direct onder parent liggen.

#	Code
1 2 3 4 5 6	<parent>     <child id="1">         <child id="2">         </child>     </child> </parent>

met "parent>child" selecteer je dus enkel <child id="1">, maar niet <child id="2">, omdat deze niet metteen onder de parent ligt.
Ter vergelijking: met "parent child" selecteer je alle <child>-tags
De code die je op de plaats van /*attributen*/ schrijft wordt dus gelezen door browsers die Child Selectors ondersteunen. Niet IE dus. Ik heb:

#	Code
1 2 3 4 5	div.body>p     {     background-color:        transparent;     background-image:        url(bg.png);     }

ik zet de achtergrond kleur weer 'af', en zet de .png in de plaats.

3. resultaat
Internet explorer leest het eerste en krijgt een achtergrondkleur. Andere browsers lezen de rest ook en vervangen de achtergrondkleur door de afbeelding.
:arrow: verschillende CSS voor verschillende browsers!

Opm: Natuurlijk kan je dit ook voor andere dingen gebruiken dan achtergronden.

nog vragen? stel ze op het forum

6 reacties
shanna	Geplaatst op 03-09-2008 om 13:40
Regular	het is voor mij van de gekke, als iedereen maar hacks en workarounds gaat zoeken om goed gecodeerde css te laten werken in IE. Laat MS maar gewoon met een goede browser komen, zoniet, stap dan over op browsers die WEL goed werken en raad aub iedereen aan om IE links te laten liggen. Hoe eerder MS IE afvoert en begraaft, hoe beter.
Onbekend lid	Geplaatst op 06-06-2007 om 15:59
Spammer	Kan je niet de code voor IE als laatst plaatsen? Dan hoef je toch de background-color niet uit te zetten?
IronFury	Geplaatst op 06-06-2007 om 14:56
Regular	Kan je niet de code voor IE als laatst plaatsen? Dan hoef je toch de background-color niet uit te zetten?
omarjuul	Geplaatst op 15-01-2007 om 16:41
Regular	is het niet veel gemakkelijker om het met hacks te doen? http://www.sceneone.nl/tips_tricks/css_hacks.php dan wordt het met '* html' (alleen IE) en 'html>' (alles behalve IE) iig bewijst dit weer dat IE het altijd anders moet doen... $#@*!!!
Blizt	Geplaatst op 07-04-2005 om 13:48
Webmaster	Zeker intressant voor mensen die dit nog nie weten inderdaad. En het staat toch wat makkelijker dan dat je ze naar de spec moet verwijzen ;) (die vaak te cryptisch is voor mensen)

Pagina 1 2 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Terug naar gewone pagina