Moderní poučky o CSS tvrdí, že hackům už odzvonilo a místo nich by se měla používat feature detect a fallbacky. To je sice pravda v okamžiku, kdy chcete stylovat vzhled stránky, ale pokud potřebujete vyřešit nějaký bug, který se projevuje jen v konkrétním prohlížeči (hádáte správně, mluvím o Internet Exploreru Safari), je CSS hack tou nejlepší cestou.

Internet Explorer

Internet Explorer nám tak nějak zamrzl v čase a i když už máme několik verzí Edge, stále je potřeba zachovávat podporu pro staré IE, které uživatelé používají jednoduše proto, že nechtějí nebo nemohou použít nejnovější Windows 10.

Pro IE musíte správně otestovat všechny verze, které chcete podporovat, a pak zvolit správný hack.

Vložení CSS

Pro starší verze IE můžete použít trik, který vloží další CSS soubor podle verze IE:

<!--[if lte IE 9]> <link rel="stylesheet" href="ie9.css"> <![endif]-->

Stačí nahradit „IE 9“ za příslušnou (starší) verzi a jméno souboru href za něco smysluplného.

Tenhle systém ale přestal fungovat v IE10, protože Microsoft přešel na HTML5, který podobné vychytávky neumožňuje.

Edge

Vezměme to pěkně od nejnovější verze. I když se Edge chlubí tím, že HTML5 a CSS3 rozumí stejně dobře jako Chrome a Firefox, stále má své mouchy. Naštěstí ale již rozumí feature query, takže se stačí jednoduše zeptat na nějakou vlastnosti, kterou zná jen Edge:

@supports (-ms-ime-align:auto) {
    /* Hack pro Edge */
}

Pokud potřebujete omezit styl podle konkrétní verze Edge (kupodivu i to se může stát), můžete k výše uvedené podmínce přidat další, která omezí verzi na starší nebo novější podle toho, kdy daná vlastnost přibyla:

@supports (-ms-ime-align:auto)
     and (-webkit-text-stroke:initial) {
 /* Hack pro Edge 15 a novější */
}
@supports (-ms-ime-align:auto)
     and (not (-webkit-text-stroke:initial)) {
 /* Hack pro Edge 14 a starší */
}

• IE15+ = (-webkit-text-stroke:initial)
• IE14 a starší = (not (-webkit-text-stroke:initial))
• IE14+ = (not (-ms-accelerator:true)
• IE13 a starší = (-ms-accelerator:true)
• IE13+ = (color:unset)
• IE12 (což je nejstarší) = (not (color:unset)

Pro konkrétní verze je potřeba zkombinovat zde uvedené podmínky, např. IE14 získáte z podmínek „IE14+“ a „IE14 a starší“ nebo „IE14+“ ale ne „IE15+“.

Pro IE16 (Windows Creators Fall) a další bude vždy potřeba se podívat, jaké vlastnosti přidali nebo ubrali. Pozor na regrese – vlastnost, která se v jedné verzi objeví, může v další zmizet nebo změnit definici.

IE11 a IE10

V IE10 přibyla možnost testovat režim vysokého kontrastu (pomůcka pro slabozraké ve Windows 8) pomocí @media:

@media (-ms-high-contrast:none),
       (-ms-high-contrast:active) {
    ... /* Hack pro IE10 a IE11 (a Edge) */
}

Nezapomeňte, že aby styl fungovat jen v IE, ale přitom nezávisle na nastavení kontrastu v počítači, je potřeba se zeptat na obě hodnoty (tedy none a active).

Alternativní hack, pokud vám stačí jen jeden selektor, je použití:

_:-ms-input-placeholder, .muj-selektor {
    ... /* Hack pro IE10 a IE11 */
}

IE11

Pro omezení pouze na IE11 stačí předchozí hack změnit na _:-ms-fullscreen:

_:-ms-fullscreen, .muj-selektor {
 .... /* Hack pro IE11 */ } 

Výhodou IE11 je to, že většině starých (níže uvedených) hacků nerozumí, takže se nemusíte bát, že byste něco rozbili tím, že přidáte hacky pro starší IE.

IE10, IE9 a IE8

V IE8 a novějších můžete vlastnost omezit tím, že za ní přidáte lomítko a nulu (pravděpodobně zápis prázdného znaku):

.muj-selektor {
    color: red\0; /* Hack pro IE8+ */
}

Tento hack spolehlivě funguje v IE8, IE9 a IE10.

Některé starší browsers (např. Opera 10) může tento hack také použít, nebo konkrétní číslo nemusíte fungovat v některé definici (např. bývá problém s background) takže může být potřeba změnit číslo (např. na \9 nebo \d – jde o hexadecimální čísla) nebo před lomítko přidat mezeru:

.muj-selektor {
    color: red \d; /* také hack pro IE8+ */
}

IE10

Pro omezení pouze na IE10 bude potřeba zkombinovat dva výše uvedené hacky pro IE10+11 a IE8-10 tak, abyste vyfiltrovali pouze desítku:

@media (-ms-high-contrast:none),
       (-ms-high-contrast:active) {
    .muj-selektor {
        color: red\0; /* Hack pro IE10 */
    }
}

IE9 a IE10

Pro omezení pouze na IE9 a IE10 můžete využít toho, že IE8 neumělo testovat minimální šířku obrazu:

@media (min-width: 0\0) { /* IE9+ a webkit */
    .muj-selektor {
        color: red\0; /* Hack pro IE9 a IE10 */
    }
}

IE9

Omezení pouze na IE9 je trochu problematické kvůli tomu, že většina hacků je zároveň podporována i v IE8 nebo IE10 nebo dokonce jiných prohlížečích (z té doby, např. Opera, Webkit nebo Firefox). V tomto případě tedy budete muset otestovat velké množství hacků nebo jejich kombinací na spoustě prohlížečů, abyste si byli jisti, že fungují jen tam, kde potřebujete:

@media (min-width: 0\0) { /* IE9+ a webkit */
    :root .muj-selektor { /* IE9 a Opera */
        color: red \0;    /* IE8 - IE10 */
     /* Doufejme, že máme hack pouze pro IE9 */
    }
}

Samozřejmě můžete říct, že IE9 podporujete jen kvůli uživatelům Windows XP a staré Opery a Safari podporovat vůbec nebudete – pak můžete vsadit na to, že nikdo neodhalí, že váš hack pro IE9 funguje i jinde.

Pozor na to, že tento hack není 100% a je potřeba ho otestovat v konkrétní situaci:

@media (min-width: 0\0) {
    :root .muj-selektor {
        background: red url(ie9logo.jpg) \0;
      /* Tohle pravděpodobně nebude fungovat */
    }
}

IE8

Pro IE8 můžete použít tento zápis:

@media \0screen {
    ... /* Hack pouze pro IE8 */
}

IE7 a starší

Pro omezení stylu na IE7 a starší je hack podobný IE8:

@media screen\9 {
    ... /* Hack pro IE7 a starší */
}

Pro IE8 a starší můžete obě podmínky zkombinovat:

@media \0screen\,screen\9 {
    ... /* Hack pro IE8 a starší */
}

IE7 a starší mají také hack pro jednotlivé vlastnosti. Stačí na začátek vlastnosti přidat znak podle konkrétní verze:

.muj-selektor {
    *color: red; /* Hack pro IE7 a starší */
    _color: red; /* Hack pouze pro IE7 */
    +color: red; /* Hack pouze pro IE6 */
}

Pokud vám nevadí použít !important, můžete využít toho, že v IE7 může místo !important být !cokoliv:

.red {
    color: lightred !important;
    color: red !hack; /* pro IE7 a starší */
}

Safari (+CriOS)

Poslední dobou (s příchodem Edge) pomalu přebírá funkci IE coby odpadlíka Applácké Safari a CriOS (kódové označení Chrome pro iOS). Je to způsobeno tím, že vývojáři Applu importují změny do Webkit (jádro Safari) až po té, co jsou řádně otestovány v Chromium (jádro Chrome, Opera a nový Edge). A navíc se Safari neaktualizuje tak často jako Chrome, ale zpravidla jen při vydání nové verze MacOS a iOS (podoně jako původní Edge na Windows).

V důsledku toho se pak chyby, které jsou již dávno opravené ve všech prohlížečích (Chromium), mohou stále projevovat v Safari.

Pro starší Safari 7.1 a novější můžete použít hack:

_::-webkit-full-page-media, _:future, :root .red
    color: red;
}

Hack nastavuje barvu pro třídu .red, vše před tím je součástí hacku, který dokáže rozluštit jen Safari.

Pro novější (Safari 11+), které podporuje @support můžete použít:

@media not all and (min-resolution:0.001dpcm) {
    @supports (-webkit-appearance:none) {
        .red {
            color: red;
        }
    }
}

Pokud naopak potřebujete zacílit starší Safari (konkrétně 6.1 až 10.0, ale už ne 10.1), použijte dvojitý media selektor. Pozor na to, že LESS a SASS tento zápis pochopí jinak, takže tam ho není možné použít.

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

Existuje i celá řada hacků pro konkrétní verze (6, 7, 9, 10.0, 11.0, apod.), ale jejich výpis by byl příliš dlouhý, nepřehledný a zbytečný. Pokud ho potřebujete, stačí zadat do Googlu „css hack safari X“ (kde X je verze, kterou hledáte). Nebo se podívat na jejich přehled.

Chrome

Chrome by měl být vzorem bezproblémového prohlížeče, nicméně horečný vývoj a snaha Googlu být se vším první bez řádného otestování občas vytvoří problém, u kterého nemůžete čekat do vydání další verze Chrome s opravou.

V takovém případě použijte:

@media all and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution: .001dpcm) {
        .red { 
            color: red; 
        } 
} 

Pro nejnovější verzi Chrome s podporou @support pak můžete použít:

@supports (-webkit-appearance:none) 
    and (not (overflow:-webkit-marquee)) 
    and (not (-ms-ime-align:auto)) 
    and (not (-moz-appearance:none)) {
        .red { 
            color: red; 
        } 
} 

Nenechte se zmást tím, že v podmínce je prefix -ms- a -moz-. To je kvůli tomu, aby se vyloučila funkčnosti hacku v Edge a Firefox.

LESS a SASS

Pokud používáte kompilátory CSS jako jsou LESS nebo SASS, budete mít s většinou těchto hacků problémy, protože kompilátory na to nejsou přizpůsobeny a v hacku uvidí chybnou syntaxy.

Pokud chcete použít hack s \0 nebo \9 na konci vlastnosti, můžete použít escapovací řetězec:

color: red ~"\0"; /* obejití LESS kompilátoru */

Pro hacky s @media to bude trochu složitější, protože kompilátory v nich neprovádí funkce, ale jen kontrolují syntaxy a nahrazují proměnné:

@ieMediaHack: ~"0\0"; /* proměnná v LESS */
@media (min-width: @ieMediaHack) {
    .red { color: red; }
}

Nebo pro IE8 a starší:

@ie8MediaHack: ~"0\screen";
@media @ie8MediaHack {
    .red { color: red; }
}