CSS (3. díl) - Hackujeme ve stylech

článek v kategorii Kódování , autor článku je jan-hommer , článek přidán dne 2008-01-04 10:38:57


Je známo, že ne každý prohlížeč zobrazuje web stejně a i sebelepšímu kóderovi dá práci, aby web vypadal ve všech browserech úplně stejně, aniž by nepodstrčil každému prohlížeči o trochu jiný stylopis.

Jak sem již zmínil, tak snad i při kódování sebelehčího layoutu webu budete potřebovat hacky. Málokdy se povede, že web, který jste pracně nakódovali se zobrazí všude. U většiny případů je situace následující. Web testujete ve Firefoxu a jste potěšeni výsledkem. Poté se na web podíváte v Opeře. Huráá, web vypadá stále, jak má. A nakonec přijde na řadu IE. IE ve dvou verzích. Myslíte na nejhorší? Sebevražda? Ne, je ještě horší způsob. Překódovat celý web. A proč? Web v IE nevypadá tak jak ste chtěli. Tu a tam to nesedí o pixel, někde o desítky pixelů. Svoboda freelancera #9

Zachovejte paniku!

Ne, není proč dělat drama. Tak jako se při hackování něčího webu snažíte podstrčit falešné informace, tak tomu není jinak ani u CSS hacků. Pro daný prohlížeč prostě vytvoříte jiný styl, ale...

Světe div se, ale již delší dobu pobývá na tomto světě IE7. Hacky, které jsme tedy používali pro IE6 v IE7 nefungují. Ale i to se dá samozřejmě jistým způsobem vyřešit.

Podtržítkový hack

Nesedí-li vám web pouze v IE6 , dá se použít tzv. podtržítkového hacku. Ten ovšem validátor, ikdyž by neměl, označuje jako nevalidní. Komu to nevádí, tak nevidím jediný důvod, proč ho nevyužít.

p {
  color: #000;     /* Text bude mit cernou barvu. */
  _color: #ff0000; /* V IE6 bude cerveny! */
}

Podmíněné komentáře

Ale co se nestalo? Web vám "nesedí" ani v IE7? Přicházejí na řadu podmíněné komentáře. Číslo v následujícím příkladu znaména, pro jakou verzi a jeho nižší verze MIE se jiné CSS aplikují. V podmíněném komentáři totiž určíme cestu k CSS souboru, který nám opravuje layout v dané verzi MIE. Je tedy vhodné do tohoto souborů umístit jenom to, co chceme jinak.

<!--[if lte IE 7 ]>
 <link rel="stylesheet" href="style-ie7.css" type="text/css" media="screen"></link>
<![endif]-->a

Zpět