CSS hack

IE6-IE10,Opera, Chrom, Selektory, IE bugy

Užitím hacků lze docílit změny daného řádku pouze pro daný prohlížeč/prohlížeče. Ideální využité je pro IE6 či IE7, kde lze odstranit bugy. Občas lze narazit i na problémy v jiných prohlížečích. Osobně využívám tyto hacky běžně pro IE6-IE8 pro IE9 jsem je použil jen 1x.

Proč vlastně používat hacky?
Všude Vám web funguje dle představ, ale v jednom jediném prohlížeči ne. V této situaci jsou dvě cesty: a) Danou část webu přepsat tak, aby fungovala všude. b) Použít na tuto část webu hack pro problematický prohlížeč.

Př.:
- IE6 "double-margin bug"
Popis: Váš div má obtékání zleva a levý margin 20px. Všude Vám to funguje, ale v IE6 je web rozpadený. Toto je nejběžnější bug s kterým se kodér může setkat.
Důvod: IE6 má takzvaný double-margin bug, neboli zvětší levý margin 2x, pokud má prvek vlastnost float na hodnotě left.
Řešení: Použiji hack pro IE6, kde upravím levý margin na 10px => IE6 udělá 10px krát 2 = 20px a my chceme docílit 20px = vše je v pořádku.

V IE6 jsou i další bugy, ale ty nejsou naštěstí až tak časté. Například "double chracter bug", který Vám kopíruje poslední písmeno/písmena posledního slova v bloku na další řádek se řeší hackem, že pro IE6 dodáte tomuto bloku textu tuším pravý margin asi 5px. Jinde se uvádí dodat relativní pozici. Tak jako tak to je příklad kdy použít hack.

        
#element {
    color:orange;
}
#element {
    *color: white;    /* IE6 + 7 */
}
#element {
    _color: red;     /* IE6 */
}
#element {
    !color: white;    /* IE7 */
}
#element {
    color: red\0/;     /* IE8 */
}
#element {
    color: red\9;     /* ? IE9 */
}
#element {
    color: green\0/IE8+9; /* IE8 + 9 + IE10pp4  */
}
:root #element { color:pink \0/IE9; }  /* IE9 + IE10pp4 */

Hacky pro Operu jsou také k dispozici. (http://bricss.net/post/11230266445/css-hack-to-target-opera)

x:-o-prefocus, .intro:after {
    display: none;
    }


@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
} 

A dokonce i pro Chrome. (http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.html)

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #test1{color:red;}
}

Extrémní varianta hacků může být i v této formě. Třeba se někomu bude hodit. (http://css-tricks.com/snippets/css/browser-specific-hacks/)

/* **** Selector Hacks ***** */

/* IE6 and below */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red } 
 
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
 
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
 
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
 
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
 
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
 
/* Everything but IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }
 
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
 
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
 
/* **** Attribute Hacks ***** */
 
/* IE6 */
#once { _color: blue }
 
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

<< zpět