June 5th, 2010

Podmíněné komentáře efektivně

Filed under: Know-how — Ondřej Válka @ 12:00

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.

8 Comments

  1. ondrg

    S oblibou používám metodu obelix. Díky za tip na metodu asterix :-) .

    June 5th, 2010 at 19:53

  2. Pavel

    Obelixe používám, Asterixe jsem už u někoho viděl v HTML – ale říkal jsem si, co je to za šílenost. Ale když teď vidím použití i v CSS a navíc tak hezky vysvětlené, asi to vyzkouším :)

    June 5th, 2010 at 21:22

  3. Martin Michálek

    To se mi moc líbí! :)

    Musím vyzkoušet. Napadá mě, že bych tu podmínku nedával k <body>, ale už k <html>, protože i to potřebuji někdy stylovat. (Typický příklad – overflow: hidden pro vypnutí rolovátek v IE6).

    June 8th, 2010 at 08:53

  4. Zdeněk Mazanec

    Metoda Asterix je důmyslná, akorát chudák návštěvník stránky s IE5. Díky chybě v podmínce <!–[if IE 6]> (chybí LTE) nedostane element <body> ;-)

    June 10th, 2010 at 14:06

  5. Ondřej Válka

    Doslo mi to posleze a rikal jsem si, koho to trkne. Diky!

    June 10th, 2010 at 14:44

  6. Zdeněk Mazanec

    IE5 (5.5) je dnes v podstatě mrtvý prohlížeč, má podíl prohlížečů pod 0.02%.

    June 11th, 2010 at 09:17

  7. Ondřej Válka

    Jasne. Muze sice zalezet na tom, v jake cilove skupine se clovek pohybuje, ale u IE 5 (resp. 5.5) bych asi fakt rekl, ze bude mrtvy uplne vsude.

    June 11th, 2010 at 09:22

  8. karf

    Metoda Asterix má ještě jednu, řekl bych podstatnou, nevýhodu. Pro každý prohlížeč mají pak stejné selektory jinou (a v případě použití ID dosti vysokou) specificitu. Anebo jste nuceni před každý selektor psát #něco.

    June 12th, 2010 at 08:58