Szybkie Hacki - bez zagłębiania się w zasadę działania

Tekst czerwony, podkreślonyw IE w pozostałych standardowy żółty.


div {color:yellow;}
div\ {color:red; text-decoration:underline;}
}

Modyfikacja hacka znajdującego się ciut niżej. Odkryłem, że komentarz nie jest potrzebny, a \9 można zastąpić dowolnym drukowalnym znakiem. Tekst będzie podkreślony, różowy w rozmiarze 30px na żółtym tle tylko w Internet Explorerze, w pozostałych będzie niebieski standardową czcionką, bez dekoracji i tła.

Uwaga! Uzycie hacka z font-family może być niebezpieczne, co pokazuje drugi przykład.

p{
    color:blue; 
    color: pink\9; 
    text-decoration:underline\a; 
    font-size:30px\b; 
    background:yellow\d;
}

/* niebezpieczne użycie hacka w font-family*/
p{font-family:"courier new"\d;} /* "Courier New" też w Chrome i Operze ale nie w Firefoksie */
p{font-family:courier new\d;} /* "Courier New" też w Firefoksie ale nie w Chrome i Operze */
p{font-family:courier new, \d;} /* "Courier New" też w Firefoksie, Chrome i Operze */

/* bonus */
p{font-family:courier\ new;} /* "Courier New" też w Firefoksie, Chrome i Operze ale nie w IE*/
}

Tekst czerwony tylko w IE8, zielony w pozostałych przegladarkach.

p{color:red;}
p,#ie8#bug{color:green;}

Tekst czerwony w innych przeglądarkach, zielony w IE

p{color:red; color /*\**/: green\9;}

Hacki dla Google Chrome i jeden bonusowo dla Opery. Tekst czerwony w Google Chrome, zielony w pozostałych.

/* will be red only in opera<10 and google chrome */
#test2{
    color:green;
    -bracket-:hack(;
        color:red;
    );
}

/* will be red only in google chrome */
#test3{
    color:green;
    (-bracket-:hack;
        color:red;
    );
}

/* will be red only in google chrome */
#test4{
    color:green;
    -bracket-:hack[;
        color:red;
    ];
}

Hack dla Google Chrome. W Google Chrome ramka zielona w pozostałych czerwona.

#item .element{border:1px solid red;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #item .element{border:1px solid green;}
}

Długa lista hacków dla IE7. Wszystkie deklaracje zadziałają w tej przeglądarce. Listę w oryginale opublikował na swoim blogu Anne van Kesteren.

.ie7_hacks{
  `background:red;
  ~background:red;
  !background:red;
  @background:red;
  #background:red;
  $background:red;
  %background:red;
  ^background:red;
  &background:red;
  *background:red;
  (background:red;
  )background:red;
  =background:red;
  +background:red;
  [background:red;
  ]background:red;
  {background:red;
  |background:red;
  ,background:red;
  <background:red;
  .background:red;
  >background:red;
  /background:red;
  ?background:red;
}

W IE5, IE6, IE7(!) ustawi kolor na niebieski, w pozostałych na zielony

body{
  color: green;
  * color: blue;
}

Ukryj przed IE5. W IE5.x/WIN (nie wiem czy Mac) ustawi szerokość na 100px, w innych przeglądarkach na 300px:

.menu{
  width: 100px;
  width: /**/300px;
}

Styl nie zadziała w IE5-mac:

/*hack dla ie5\*/
body{background-color: red;}
/* koniec */

Styl zadziała tylko w IE6:

* html body{background-color: red;}
* html #myDiv{background-color: red;}

Styl zadziała tylko w IE5.5, IE6:

.example{
  _width: 100px;
}

Styl nie zadziała w IE 5.x (uwaga: ten hack przechodzi w ie jeśli backslash jest pierwszym znakiem, np: \width: 300px; zadziała):

.example{
  back\ground: red;
}
.example{
  heigh\t: 100px;
}
.example{
  bord\er: 1px solid red;
}

Styl nie zadziała w IE6:

html>body {background-color: red;}
html>body div#myDiv{background-color: red;}

Styl zadziała tylko w Operach 7+:

@media all and (min-width: 0px){
  .any_css_rules{width:100px;}
}

Nie zadziała w starszych przegladarkach i Operach niższych niż 8 (tanhack):

body{
  background-color: green;
  voice-family: "\"}\"";
  voice-family: inherit;
  background-color: red;
}

W IE w wersji 5, 6, 7.0beta2(wczesne wersje) ustawi wysokość na 100px - w innych na 200px:

.example{
  height: 200px !important;
  height: 100px;
}

Multihack ustawia czerwony kolor dla ie, niebieski dla gecko, różowy dla opery w wersjach > 8.5:

/*ie*/
#example{
  color: red;
}
/*firefox(gecko)*/
body:not([foobar]) #example{
  color: blue;
}
/*opera > v8.5*/
@media all and (min-height:0px;){
  body #example{
  color: pink;
  }
}

Komentarze warunkowe IE

nie wiem czy to powinno trafić do hacków (dlatego nie wrzucałem), ale niech będzie:

<!--[if IE]>
Kod TYLKO dla IE
<![endif]-->

możliwa składnia (numer wersji można zmieniać)

[if IE 6]   - kod tylko dla IE6
[if IE 5.5]   - kod tylko dla IE5.5
[if gte IE 5]   - kod dla IE5 i wyższych
[if gt IE 5]   - kod dla wyższych niż IE5
[if lte IE 5]   - kod dla IE5 lub niższych
[if lt IE5]   - kod dla niższych niż IE5
[!IE 7]   - kod dla każdej wersji oprócz IE7

kod dla wszystkich przeglądarek oprócz IE:

<!--[if !IE]>< -->
kod nie dla IE
<!-- ><![endif]-->

Microsoft o komatarzach warunkowych.

Szybkie Hacki - bez zagłębiania się w zasadę działania

Komentarze warunkowe IE

Menu

Działy:

Quick start:

Inne:

animacje Flash

Diablo 2: