Přehled CSS hacků

Moderní poučky o CSS tvrdí, že hackům od 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), 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 pouze pro IE9 */ 
    }
} 

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 pro IE7 */
    +color: red; /* Hack 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ší */
}

 

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *