Seriál: CSS hacky

CSS hack pro Internet Explorer

Petr Písař poslal Pixymu tip na zajímavý CSS hack. Hack udělá některé definice v CSS čitelné pouze pro Internet Explorer 5 a novější. Stačí zadat před název vlastnosti znak "_".

_color: blue;

Písmo bude mít modrou barvu pouze v Internet Exploreru, ostatní prohlížeče tuto deklaraci přeskočí. Mně ještě, když jsem potřeboval udělat zápis speciálně pro IE, fungovala tato metoda:

* html .modry { color: blue; }

Podpora CSS hacků v prohlížečích

Chris Nott zkompletoval sbírku všemožných CSS hacků a co víc vyzkoušel je v prohlížečích na různých operačních systémech. Jednoduše tak zjistíte, který CSS hack se nejlépe hodí pro deklarování stylu pouze pro určitou skupinu prohlížečů. U každého CSS hacku naleznete stránku s ukázkou použití (via conBLOG).

Rozlišení jednotlivých prohlížečů a jejich verzí

I přes veškerou snahu používat v co nejmenší míře CSS hacky, je jejich použití někdy nevyhnutelné. Proto bych rád uvedl možnosti jejich použití. Musíme rozlišit, jestli chceme nadefinovat jeden soubor stylů a v něm také všechny hacky pro jednotlivé prohlížeče, nebo pro každý prohlížeč použít speciální soubor stylů.

CSS hacky v jednom souboru

Pro první případ můžete využít výborné Pixyho Explorerové síto:

#prvek {
  color: black;        /* styl pro všechny prohlížeče */
  _color: red;         /* styl jen pro IE/Win, všechny verze */
  _color/**/: orange;  /* styl jen pro IE/Win, jen 5.5 a vyšší */
  _co\lor: yellow;     /* styl jen pro IE/Win, jen 6.0 a vyšší */
  }

html>body #prvek { color: green }
  /* styl pro všechny prohlížeče mimo IE/Win */

#prvek[id] { color: blue }
  /* styl pro všechny prohlížeče mimo IE (včetně IE/Mac) */

Místo podtržítkového hacku můžete klidně také použít * html:

#prvek {
  color: black;        /* styl pro všechny prohlížeče */
  }

* html #prvek {
  color: red;         /* styl jen pro IE/Win, všechny verze */
  color/**/: orange;  /* styl jen pro IE/Win, jen 5.5 a vyšší */
  co\lor: yellow;     /* styl jen pro IE/Win, jen 6.0 a vyšší */
  }

html>body #prvek { color: green }
  /* styl pro všechny prohlížeče mimo IE/Win */

#prvek[id] { color: blue }
  /* styl pro všechny prohlížeče mimo IE (včetně IE/Mac) */

Případně se můžete podívat na podporu CSS hacků v prohlížečích.

CSS hacky v samostatných souborech

Vraťme se ale k myšlence samotných souborů s hacky pro jednotlivé prohlížeče. K tomu nám dobře poslouží Mid Pass Filter, který aplikuje styl pouze pro IE5.x / Windows.

@media tty {
 i{content:"\";/*" "*/}} @import 'ie5.xwin.css'; /*";}
}/* */

Obdoubou Mid Pass Filteru je IE5/Mac Band Pass Filter. Ten slouží pro definování stylu pouze pro IE5 / Mac.

/*\*//*/
  @import "ie5mac.css";
/**/

Pro lepší pochopení se podívejte na následující dva obrázky:

Teď už je pouze na vás, zda použijete jeden soubor se styly se všemi případnými hacky, nebo více souborů pro jednotlivé verze prohlížečů.

Podtržítkový hack je nevalidní

Jan Bien se v příspěvku Validita CSS důkladně podíval na zoubek podtžítkovému hacku. Na pomoc si vzal specifikaci CSS 2.1 a názory Marka Prokopa, Petra Staníčka, Dušana Janovského, Viléma Málka a Pavla Kouta. Nakonec mu z toho vyšel následující závěr:

Podtržítkový trik je podle CSS 2.1 gramaticky správný, ale nevalidní.

Stejně jako Honza i já na závěr doporučím výrok Pavla Kouta:

Validita není dogma, ale vodítko. Mohu jistá pravidla porušit, ale jen tehdy, uvědomuji-li si sakra dobře, co a proč dělám. Dělal-li bych to jen proto, že to dělají ostatní, pak bych byl nebetyčný vůl.

:hover i pro IE>=5

Trik jak na :hover i pro IE>=5 (navazuje na IE:hover {nyní:jednodušeji;}) nejen u odkazu se bude určitě hodit, takže ať dlouho nehledám, kde jsem to četl, odkazuji i od sebe. Jak je to jednoduché:

p {
  background-color: expression(
    this.onmouseover = new Function("this.className += ' hover';"),
    this.onmouseout = new Function("this.className = this.className.replace(' hover', '')")
  );

p { color: #333; }
p:hover, p.hover { color: #900; }