English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Hack: The Underscore Hack

CSS Hack: Podtržítkový hack

Let's start with three simple facts — as Petr Pisar found out.

  1. The underscore ("_") is allowed in CSS identifiers by the CSS2.1 Specification
  2. Browsers have to ignore unknown CSS properties
  3. MSIE 5+ for Windows ignores the "_" at the beginning of any CSS property name

Therefore, a CSS definition, e. g. _color:red is:

  1. Correct, for CSS 2.1 specification allows it (even if software validators, knowing only older version CSS 2.0, say it's a bug: they are wrong, it's correct).
  2. Ignored in any browser but WinIE
  3. Treated as color:red in WinIE

Thus, this IE's bug/feature is very simple and clear way to set CSS properties for WinIE only (MacIE doesn't have this bug/feature). It's easy to fix e. g. mis-implemented position:fixed in WinIE (see the example).

Začněme se třemi prostými fakty — jak si jich všiml Petr Písař.

  1. Podtržítko ("_") je povoleno v identifikátorech CSS specifikací CSS2.1
  2. Prohlížeče musí ignorovat neznámé vlastnosti
  3. MSIE 5+ pro Windows ignoruje znak "_" na začátku názvu jakékoli vlastnosti

Tudíž definice CSS, např. _color:red je:

  1. Korektní, protože specifikace CSS 2.1 ji povoluje (ať si softwarové validátory, které znají jen starší verzi CSS 2.0, říkají, co chtějí — v tom, že je to chyba, se mýlí).
  2. Ignorována v každém prohlížeči kromě WinIE
  3. Zpracována jako color:red v WinIE

Tato chyba/vlastnost IE je tak velmi jednoduchým a čistým způsobem, jak v CSS nastavit vlastnosti jen pro WinIE (MacIE tuto chybu/vlastnost nemá). Je třeba snadné opravit chybnou implementaci position:fixed ve WinIE (viz příklad).

#menu {
   position: fixed;
   _position: absolute;
   ...
   }

Same method may be used to fix the min-height property missing in WinIE (see the example 2):

Stejnou metodu můžeme použít na opravení chybějící podpory min-height ve WinIE (viz příklad 2):

#box {
   min-height: 300px;
   height: auto;
   _height: 300px;
   ...
   }

Note: This uses another WinIE's bug, treating overflow:visible as height:auto. For details, see the article "The "min-height" Hack".

I tested it in Windows' MSIE 5, 5.5, 6, and Opera; Mac OSX's MSIE 5, Safari, and Camino; and in Mozilla and Firefox.

Pozn.: Zde je využita další chyba WinIE, kdy je hodnota overflow:visible zpracována jako height:auto. Podrobnosti najdete v článku "Hack pro "min-height"".

Testováno ve Windows v MSIE 5, 5.5, 6 a Opeře; na Mac OSX v MSIE 5, Safari a Caminu; a v Mozille a Firefoxu.