Jan Bien, webmistr -- Vypilované weby. Na setinu pixelu!


Weblog Mraveniště

Toto je webová konzerva. Vyrobeno 4.7.2006.

Vícenásobné třídy

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:

Náhled barevných boxů

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:

.box1,
 .box2 {margin:1em 0}
.box1 h3,
 .box2 h3 {margin:0.2em 0; font-size:100%; color:#3F3F3F}
.box1 .in,
 .box2 .in {padding:5px 9px; border:1px solid #3F3F3F; background-color:#dadada}
.box2 h3 {color:#804000}
.box2 .in {background-color:#FFE1C4; border-color:#804000}

<div class="box1">
  <h3>Box 1</h3>
  <div class="in"> Lorem ipsum ... </div>
</div>
<div class="box2">
  <h3>Box 2</h3>
  <div class="in"> Dolor sit ... </div>
</div>

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:

.box {margin:1em 0}
.box h3 {margin:0.2em 0; font-size:100%}
.box .in {padding:5px 9px; border:1px solid black}
.box1 h3 {color:#3F3F3F}
.box2 h3 {color:#804000}
.box1 .in {background-color:#dadada; border-color:#3F3F3F}
.box2 .in {background-color:#FFE1C4; border-color:#804000}

<div class="box box1">
  <h3>Box 1</h3>
  <div class="in"> Lorem ipsum ... </div>
</div>
<div class="box box2">
  <h3>Box 2</h3>
  <div class="in"> Dolor sit ... </div>
</div>

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í:
Jan Bien | 6. dubna 2006 | Trvalý odkaz | Komentáře (11)

Podmíněné komentáře

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:

<!--[if IE]>
HTML kód pouze pro MSIE
<![endif]-->

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:

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

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:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="style-msie.css" />
<![endif]-->

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:

<!--[if !IE]> -->
Tohle vidí všichni kromě IE
<!-- <![endif]-->

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

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

Jan Bien | 16. března 2006 | Trvalý odkaz | Komentáře (2)

Vratné lahve online

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:

Jan Bien | 13. března 2006 | Trvalý odkaz | Komentáře (2)

Muzeum prohlížečů

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.

Jan Bien | 6. března 2006 | Trvalý odkaz | Komentáře (0)

Starší články

SPIEDINI


Copyright © Jan Bien.
W3C XHTML 1.0  | W3C CSS 2  | UAW adaptive  | Geo URL  | RDF RSS