Ani ten nejlepší kodér se bez nich neobejde. Podmíněné komentáře jsou mocný nástroj k ladění kaskádových stylů pro Internet Explorer. Rád bych zde předvedl, jak je efektivně používat.
Metoda Obelix
Klasický způsob použití podmíněných komentářů spočívá v připojení zvláštního kaskádového stylu v hlavičce HTML dokumentu (pro libovolné IE, pro vybranou verzi IE, příp. pro skupinu verzí).
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" media="screen">
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" media="screen">
<![endif]-->
Metoda Asterix
Pojďme to nyní zkusit trochu jinak. Na tento způsob jsem narazil kdysi kdesi. Popsán je také v SitePoint CSS Reference.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Podmíněné komentáře efektivně</title>
</head>
<!--[if lte IE 6]><body id="ie6" class="ie non-ie7 non-ie8"><![endif]-->
<!--[if IE 7]><body id="ie7" class="ie non-ie6 non-ie8"><![endif]-->
<!--[if IE 8]><body id="ie8" class="ie non-ie6 non-ie7"><![endif]-->
<!--[if !IE]>-->
<body id="non-ie" class="non-ie non-ie6 non-ie7 non-ie8">
<!--<![endif]-->
...
</body>
</html>
Veškerý obsah webu tímto obalíme do jakéhosi kontejneru, který obdrží třídy a identifikátor podle použitého prohlížeče. S kouzelným HTML nápojem tak přichází velká CSS síla.
input.checkbox { position: relative; top: 3px; }
#ie6 input.checkbox { top: 1px; }
#ie7 input.checkbox,
#ie8 input.checkbox { top: -1px; }
Prakticky tak vzniká podmínka, s níž lze jakoukoliv CSS definici uplatnit pouze pro danou verzi IE. V praxi použito např. na webu ABS Jets.
Co s tím, Panoramixi?
Takto použité podmíněné komentáře zvyšují udržovatelnost a přehlednost kaskádových stylů.
- Nemusím pamatovat na vytvoření zvlášních stylopisů. Mám je k dispozici, jakmile potřebuji začít ladit.
- Veškěrý kód k jednomu prvku zůstává na jednom místě a netříští se do více souborů. Odpadá nutnost editace a správy takových souborů.
- Snadnost použití umocňuje aplikace na prvek
<body>, jakožto prvek nejvyšší úrovně – podmíněný selektor díky tomu podmínkou vždy začíná. Sémantický kód není narušen nadbytečným <div>.
- Vyjadřovací síla podmíněných komentářů dostává další rozměr – lze ji uplatnit např. při použití jQuery. Zacílit lze i např. všechny prohlížeče kromě IE 7.
