Šuplík Honzy Hučína

Skok na navigaci (menu)

Tento blog je v současné době uzavřen.
Pokračování blogu na bloguje.cz jsem zrušil. Pokud budu někdy pokračovat, bude to spíš tady.

Komentovaný článek

Internet a vše kolem

7. 1. 2005

Souborový CSS hack a odstřižení od stylů

Že různé prohlížeče rozumějí zápisu CSS různě, a proto se často stylopisy individualizují, je známé. Jednou z možných technik je souborový CSS hack – zajímavý a v něčem i výhodný postup, který se na českém webu ale používá dost okrajově.

Podstata souborového hacku je v tom, že se styl do HTML stránky vkládá ne obvyklým tagem <link>, ale pomocí příkazu @import:

<style type="text/css">
@import 'styl.css';
</style>

To zatím není nic nového. Tento postup se používá k tomu, aby zastaralé čtyřkové prohlížeče styl nestáhly, protože tomuto zápisu nerozumějí. Málo se ale ví, že různými modifikacemi příkazu @import lze dosáhnout toho, že ho budou ignorovat i některé vyšší verze IE. Například pouhé vynechání mezery za slovem import, tedy zápis

<style type="text/css">
@import'styl.css';
</style>

nepochopí IE 5.0. To je tedy snadný návod na odstřižení IE 5.0 od stylu, což se za nějaký čas stane aktuální. Chceme-li odstřihnout od určitého souboru všechny verze Exploreru, stačí napsat

<style type="text/css">
@import url(styl.css) all;
</style>

Podívejte se na stránku s úplným přehledem souborových hacků i dalších postupů filtrování prohlížečů. Anebo ještě na jiný přehled.

Určitě netvrdím, že souborový hack je nejlepší způsob rozlišení prohlížečů pro stylování. Ale má podle mě dvě výhody:

Vztahuje se na celý soubor. Není tedy nutné se piplat s hacky u jednotlivých prvků a vlastností (viz Explorerové síto u Pixyho).
Je validní. To je jeho výhodou oproti postupu s podmíněnými komentáři (viz článek Jana Biena na Intervalu). Totiž: podmíněný komentář typu <!--[if IE]> (tzv. uzavřený) validní je. Ale nepovinná druhá část <![if ! IE]> (tzv. otevřený komentář) validní v XHTML není. Bohužel pokud chci nějaký stylopis skrýt před IE 5+ pomocí podmíněného komentáře, musím použít právě ten otevřený.

Mnoho dalších zajímavých odkazů se dá najít na stránce CSS triky na Mraveništi.

Vložit vlastní komentář – Návrat k článku – RSS komentářů tohoto článku

Komentáře

[1] 7. 1. 2005, 10:52 – Jan Bien (Odkaz)

Ještě k těm podmíněným komentářům. Já jsem se o tom v článku nezmiňoval, ale vy to ve svém spotu naznačujete. Podmíněné komentáře známe dva druhy:
- uzavřené (
- otevřené (<![if ! IE]>Nepoužíváte IE<![endif]>
Právě o Ty otevřené se pochopitelně Validátoru líbit nemusí a považujme je proto za zakázané.

(BTW: Gratuji ke zdařilému sympatickému redesignu.)

[2] 7. 1. 2005, 15:16 – Freya (Odkaz)

Na webu používám extra styl (v mnohém nedodělaný) pro pětkové verze IE. Ale musím říct, že se mi to s odstupem času zdá jako zbytečně komplikované řešení, a při příštím redesignu už ten kontroverzní krok odříznutí IE5 nejspíš uskutečním.

[3] 7. 1. 2005, 20:03 – Erik Hoffmann (Odkaz)

Ja v prvom rade chcem zabezpečiť správny štylopis pre jednotlivé média (print, screen, projection...). Teda v XHTML používam len link tag pre pripojenie štýlov. V danom css súbore potom pomocou @import odrežem staršie verzie prehliadačov = 4-kové verzie.

V 5-kových verziách IE je chybný už len box model, ktorý v 99% prípadov nie je problém obísť validným css kódom:
width:750px; max-width:700px;
Môžete namietať, že IE6 nepozná max-width ale už správne pracuje s box modelom. To áno, ale vďaka XML deklaracií na začiatku XHTML ho prepnem do quirk režimu a bude pracovať s nestandarným box modelom.

Výsledok?
1. jednoduché deklarácie pre každý štýlopis rozdielných médií
2. efektívne odrezanie veľmi zastaralých verzií (4-kové), ktorým i tak priradím v rámci možnosti nejaké štýly
3. nepotrebnosť používania "matrjošky", dokáže to vyriešiť max-(height|width)

[4] 9. 1. 2005, 00:13 – Vilém Málek (Odkaz)

Myslím, že tento spot by si zasluhoval opravu. Věta "Podmíněné komentáře... ...nepochopení validátoru." postrádá smysl, protože správně zapsané podmíněné komentáře pro MSIE jsou validní a pro žádné jiné prohlížeče se podmíněné komentáře nepíší.

[5] 9. 1. 2005, 12:22 – Honza Hučín (Odkaz)

Ad [3]: IE 5.0 kromě box-modelu chybuje i v dalších věcech. Například neumí horizontální centrování pomocí margin-right/left:auto, zato zarovnává bloky pomocí text-align. Špatně počítá procentuální šířku vnořených objektů. Ani quirk mód IE 6 není bez potíží, viz například bug textarea (http://suplik.petnik.cz/index.php?cl=307). Jsou to drobnosti, ale otravné.

[6] 9. 1. 2005, 12:22 – Honza Hučín (Odkaz)

Ad [4]: Máte pravdu v tom, že se podmíněné komentáře nyní používají k dodefinování chování pro určité verze MSIE. Ale pokud bych se rozhodl IE 5.0 posílat stránku bez stylů, s podmíněnými komentáři rozumně validně nevystačím.
Podle mého názoru je optimální postup tento:
1. Odříznout některé verze IE příkazem @import.
2. Pomocí podmíněného komentáře přiřadit jednotlivým verzím IE speciální stylopis.
Výhodou je to, že se pro každý prohlížeč přenáší jen ten stylopis, který je pro něj potřeba.

[7] 9. 1. 2005, 12:35 – Erik Hoffmann (Odkaz)

[5] Áno, máte pravdu, IE je nočná mora pri tvorbe CSS. Ale o to mi nešlo, o tom všetci vieme a napísalo sa o tom už veľa.

Skôr som chcel poukázať na to, že ak tvorím web, ktorý sa ma zobrazovať správne v IE už od verzie 5.0, tak nemusím používať žiadne "IE sito" a rozdielne štýlopisy pre IE 5 (chybný box model) a IE 6 (korektný box model). Jednoducho IE 6 prepnem do quirk režimu a pracujem s ňou ako s päťkou.

[8] 9. 1. 2005, 12:48 – Erik Hoffmann (Odkaz)

[6]: Odrezanie štvorkových verzií pomocou @import - súhlas. Avšak možete mi ukázať web, kde by som sa nezaobišiel bez vytvorenia špecialneho css súboru pre konkrétny prehliadač? Ja som sa s tým ešte nestretol, všetko mám v jednom súbore, kde vytváram menšie, ale pritom valídne css hacky (viď [3]). Musím sa však priznať, že divné a pre mňa často nepochopiteľné relatívne pozicovanie v IE 5.0 mi spôsobuje bolenie hlavy. :)

K tomuto článku není možné vkládat komentáře.