De CSS van deze site uitgelegd

Internet Explorer Styles

Katinka Hesselink januari 2006

De styles in dit gedeelte zouden overbodig moeten zijn: ze zijn nodig omdat Internet Explorer CSS niet volledig ondersteunt. Om andere browsers er niet mee lastig te vallen, zet je deze styles in 'conditional comments' als volgt:

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

Niet heel ingewikkeld. . Deze methode is ontwikkeld em aangeraden door mensen van Microsoft zelf en zal dus blijven werken.

Ik merk dat het heel handig is om de styles van IE zo los te hebben staan. Ik heb ook wel gewerkt met browser-hacks, maar die zijn lelijk en in de praktijk onoverzichtelijk. Bovendien maken ze gebruik van fouten in de interpretatie van CSS en dat betekent dat er zaken mis gaan als IE CSS opeens beter (maar nog niet perfect) gaat interpreteren. De rest van de declaratie gaat net als bij het algemene stylesheet. Hier volgt de code uit dit stylesheet (op moment van schrijven)

#menu a {width: 99.9%;}

#main { /*zorgt voor max-width: 30em*/
	width:expression( 
 document.body.clientWidth > (500/12) * 
 parseInt(document.body.currentStyle.fontSize)?
 "30em":
 "auto" ); 

	left: 15em;}

Het begint met een codering voor #menu a, die ik al heb uitgelegd. Heel kort: dit zorgt ervoor dat het hele button van het menu in IE klikbaar is.

Vervolgens een verhaal voor #main. Ook hiervan heb ik het grootste gedeelte al uitgelegd. De expressie voor width zorgt ervoor dat de breedte van div id="main" niet groter wordt dan 30em, omdat dat leesbaarder is.

De declaratie voor #main eindigt met left: 15em; Nadat ik die expressie voor de breedte had ingesteld, vond IE om de een of andere raadselachtige reden dan het tekst-gedeelte onder het menu hoorde (althans een klein stukje). Het tekst-gedeelte was dus iets naar links geschoven. In het algemene stylesheet staat voor #main dat left: 14em moet zijn. Om dit effect in IE ook te houden heb ik dat vervangen door left: 15em. Dit soort trucjes zijn jammer genoeg heel gebruikelijk als je CSS gebruikt. Als ik niet al een apart stylesheet voor IE had gehad, zou ik in dit geval in het algemene stylesheet left: 15em gezet hebben.