Šuplík Honzy Hučína

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:

1. Vztahuje se na celý soubor. Není tedy nutné se piplat s hacky u jednotlivých prvků a vlastností (viz Explorerové síto u Pixyho).
2. 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.