Znáte vícenásobné třídy? Pokud je pro vás HTML a CSS více než příležitostným odreagováním, pak byste je znát měli. Vícenásobné třídy zefektivní zápis kaskádových stylů, zvýší jejich odolnost proti chybám a v konečném důsledku ušetří čas a peníze.

Tedy, vícenásobné třídy. Jak začít? Nejlépe praktickým příkladem. Řekněme, že na webu používáme několik druhů boxů, mezi kterými jsou jisté rozdíly, ale vzhledově jsou si příbuzné. Mohou být třebas stejné tvarem, ale různé barvou. Zde je ilustrační obrázek:

Konvenční způsob

Konvenční způsob, který považuji za špatný, a který by podle mého názoru bez rozmyslu použili čtyři z pěti webdesignerů, velí založit dvě třídy box1 a box2 a v kaskádových stylech psát sady pravidel pro obě třídy. Zde je ukázkový zápis CSS a HTML:

Ještě jednou opakuji, že tento postup považuji za špatný. Zápis pravidel pro více prvků oddělených čárkami není přehledný již při dvou boxech, s přidáním dalšího boxu by se stával ještě více nepřehledný a zvyšovalo by se riziko vnesení chyby do stylopisu.

Vícenásobné třídy

Tento příklad je totiž jako dělaný pro vícenásobné třídy, řešení to podle mého názoru málo známé a proto minimálně používané. Podstatou je, že HTML umožňuje jeden prvek zatřídit pod více identifikátorů — atributu class se nezadá jedna třída, ale hned celý seznam oddělený mezerou.

Konkrétně pro náš příklad založíme tři třídy: box, box1 a box2. Do třídy box přiřadíme všechny boxy, třídou box1 nebo box2 pak už pouze určíme barevné schéma. Zde je upravený příklad:

No uznejte, není tento zápis přehlednější? Vytvoření dalších barevných variací už by bylo daleko snazší - přidali bychom dvě sady pravidel, .box3 h3 a .box3 .in {} a do třídy box bychom vůbec nezasahovali. Pamatujte, čím přehlednější je zápis stylů, tím méně často vznikají nevyzpytatelné problémy vniklé ze zapomenuté čárky mezi zápisem prvků apod…

Na závěr jedna obligátní poznámka: Vícenásobné třídy podporují samozřejmě všechny dnešní prohlížeče, které ke stylopisům pouštíme, vyjmenovávat je snad nemusím. Tolik pro dnešek k tématu vícenásobných tříd.

Související:

• Málo známá vlastnost HTML: vícenásobné třídy CSS
  (Petr Staníček, webtip.cz, 18. února 2002)
• Kaskádové styly v dobrém stylu
  (Marek Prokop, Interval.cz, 29. července 2002)

Podmíněné komentáře, anglicky conditional comments, jsou proprietární HTML prvky prohlížeče Microsoft Internet Explorer, které umožňují autorovi do kódu HTML stránek vkládat obsah nebo jiné prvky přístupné právě pouze pro MSIE. Podmíněný komentář vypadá nějak takto:

Povšimněte si, že podmíněný komentář je konstruován velice vtipně. Podle HTML definice jde vlastně jen o komentář a všechna zařízení (vyhledávač, prohlížeč) by jej měla ignorovat. Řešení je pokročilou implementací SGML komentářů v HTML v souladu s normou HTML 4.

Na začátku roku 2006 již velmi mnoho uživatelů používá vyspělé internetové prohlížeče zatížené minimem implementačních chyb (Opera, Mozilla), nicméně stále nejdominantnějším prohlížečem je MSIE, v němž v některých případech musí webdesigner zápis kaskádových stylů šikovně „přiohnout“ a tím obejít některé velmi nepříjemné chyby ve vykreslování. A právě podmíněné komentáře se ukazují jako nejsprávnější způsob této individualizace stylopisů.

Zde uvádím příklad části kódu stránky s připojením stylopisu společného pro všechny prohlížeče (standardní moderní prohlížeče) a  následně ještě v podmíněném komentáři stylopis určený pro „přebití“ některých pravidel v MSIE:

Tento příklad neodlišuje verzi MSIE, což považujme za malou chybu. Nyní vyvíjený MSIE7, který by podle mnoha indicií mohl mít vyřešenou velkou většinu implementačních chyb, bude pravděpodobně stránku s výchozím stylem pro standardní prohlížeče zobrazovat korektně. Pak by bylo vhodné ke speciálnímu stylopisu pustit pouze MSIE ve verzi 6 a starší takto:

Jen pro úplnost dodávám, že všechny zde uvedené ukázky pracují s „skrytými“ (v anglickém originále „downlevel-hidden“) podmíněnými komentáři. Dále známe ještě komentáře „odhalené“ (v anglickém originále „downlevel-revealed“), které pracují naopak, neboli umožňují vložit do stránek obsah, který pak „vidí“ všechny prohlížeče s výjimkou MSIE. Ovšem odhalené komentáře již specifikaci odporují (nejsou s výchozími DTD validní), proto je nedoporučuji a zde neuvádím.

Aktualizováno 14. dubna 2006: David Grudl v článku Kouzlo s podmíněným komentářem (La Trine, 14. dubna 2006) ukazuje možnost inverzní, jak využitím podmíněných komentářů vložit do stránky kód pro ostatní prohlížeče, než je MSIE. Podle oficiální dokumentace Microsoftu je toto možné jen pomocí odhalených podmíněných komentářů, které jsou, jak zmiňuji výše, nevalidní. David proto vyšel ze skrytých komentářů, které vylepšil tak, že se chovají jako odhalené a jsou validní. Řešení sice není oficiálně zdokumentované, ale logika věci praví, že by mělo fungovat spolehlivě. Zde je ukázka:

Tento článek doplňuje a aktualizuje tyto mé starší články:

• CSS triky (Mraveniště, 8. prosince 2004)
• Podmíněné komentáře
  (Mraveniště, 1. listopadu 2003)
• Individualizace stylopisů k eliminaci chyb prohlížečů – teoretický přehled
  (Interval.cz, 8. prosince 2004)
• Individualizace stylopisů k eliminaci chyb prohlížečů – praktické postupy roku 2004
  (Interval.cz, 22. prosince 2004)

Souvislosti, zdroje, doporučené čtení:

• Call to action: The demise of CSS hacks and broken pages
  (IEBlog, 12. října 2005)
• CSS Hacks and IE7
  (Holly 'n John, Position Is Everything 21. prosince 2005)
• About Conditional Comments
  (MSDN)
• CSS zvlášť pro MSIE a ostatní prohlížeče
  (Martin Jakeš, Knihovna CSS, 1. listopadu 2005)
• Podmíněné komentáře v IE
  (Pavel Růžička, Interval.cz, 18. ledna 2002)
• Různý CSS styl v různých prohlížečích
  (Dušan Janovský, Jak psát web)
• DHTML – Identifikace prohlížeče
  (Amatérská tvorba WWW)

Mám rád Zdeňka a Jana Svěráka, pročež mě potěšilo, že původně zavržený film Vratné lahve obnovili a dnes, tedy 13. března léta páně 2006, zahájili natáčení.

A co více, Zdeněk ani Jan nespí na bájných vavřínech, alébrž jdou s dobou, jelikož pro své obecenstvo přichystali web www.vratnelahve.cz, na kterém se budou snažit zprostředkovat prostřednictvím webkamery atmosféru natáčení filmu přímo z „placu“.

A ještě jedna věc, abych nezapomněl, Vratné lahve jsou, pokud se nemýlím, první český film, který si za svého mediálního partnera vybral webový deníček. Abych byl konkrétní, tak jde o weblog Laco stále bloguje.

Aktualizováno 14. března 2006: Informace o mediálním partnerství weblogu Laco stále bloguje bude podle všeho pravděpodobně „kachna“, na kterou mohl skočit jen takový pitomec, jako jsem já. ;-)

Zdroje, souvislosti:

• Ladislav Bittner: Vratné lahve on-line (Laco stále bloguje, 27. února 2006)
• Milada Hrušková: Začínají se natáčet Vratné lahve (Filmpub, 13. března 2006)

Po dlouhé době a přitom v rychlosti, jakoby jen tak, na okraj dne. Kdybyste čistě náhodou hledali nějaký obstarožní prohlížeč, pak zkuste Browser Archive serveru evolt.org.

A k čemu by vlastně mohl být muzejní prohlížeč dobrý? Určitě pro zasmání, k vážnému účelu pak leda že byste se stejně jako já uvolili ke spoluautorství knihy, jejíž přiložené CD by vedle ukázek mělo obsahovat i nějakou tu prohlížečovou fosílii. Něco málo o knize s komplikovaným osudem píše Plaváček. Více někdy jindy i zde, pět minut vyhrazených pro napsání tohoto spotu bylo vyčerpáno.