CSS browser hacks
Zo af en toe kom je een vervelende situatie tegen waarbij de verschillende browsers de pagina maar niet hetzelfde willen weergeven. Soms komt het door een bug, soms door een verschil van interpretatie van de standaarden en soms is het ook onverklaarbaar.
In dat soort situaties zijn CSS browser hacks een welkome oplossing. Met CSS browser hacks kun je er voor zorgen dat bepaalde CSS-regels juist wel of juist niet door een bepaalde (versie van een) browser gezien worden.
Stel dat de ene browser een margin-top van 2px goed is (IE6, FF), maar dat de andere browser 4px moet(?) hebben (IE7). Je kunt dan de volgende css toepassen:
#menu ul { /* voor mozilla en ie6 */
...
margin: 2px 4px 6px;
...
}
*:first-child+html #menu ul { /* alleen voor ie7 */
margin-top: 4px;
}
De beste hacks voor elke situatie (=browser) kun je vinden op http://www.webdevout.net/css-hacks
Conditional comments
Internet Explorer biedt de mogelijkheid om bepaalde delen HTMl juist wel/niet te negeren op basis van zogenaamd conditioneel commentaar:
<!--[if lte IE 6]><!--><link rel="stylesheet" type="text/css" href="/css/style/ie6.css"><!--<![endif]-->
Bovenstaande constructie zorgt er bijvoorbeeld voor dat ie6.css alleen wordt gebruikt door Internet Explorer 6 of lager.
Het omgekeerde kan ook. Met onderstaande wordt de stylesheet gebruikt door alle browser, behalve IE:
<!--[if !IE]><!--><link href="/css/style/extra.css" rel="stylesheet" type="text/css" /><!--<![endif]-->
Voor meer informatie zie http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
NB: in bovenstaande voorbeelden worden extra commentaar-constructies gebruikt die niet worden gebruikt/toegelicht op de Microsoft website. Ze zijn wel nodig om er voor te zorgen dat (X)HTML geldig blijft en bijv. de W3C validator geen foutmeldingen geeft.