Jak jsem slíbil, přináším pokračování článku CSS hacky pro nejpoužívanější prohlížeče. Oproti prvnímu dílu zde najdete Internet Explorer až po verzi 11 a také poměrně problematické rozlišení Safari a Google Chrome. Většina CSS hacků naštěstí funguje stále dobře - jediné, s čím jsem měl trochu problém byla Opera. Možná i rozlišení některých verzí IE může být trochu složitější, ale neexistuje nic, co bychom nezvládli zapsat.

CSS hacky jsou obecně něco, čemu se chceme vyhnout jak jen to jde. Ovšem v situacích, kdy nás prohlížeč přímo zradí a vykresluje si konkrétní prvky jak se mu zachce, nezbývá než styly malinko ohnout. Proč hackovat pro IE snad vysvětlovat nemusím, na složitějších projektech ovšem často nastávají chyby i v jiných prohlížečích. Jako příklad bych uvedl Safari, které slepí margin-bottom odstavce (či jiného prvku) a padding-bottom nadřazeného divu. Tento konkrétní příklad se samozřejmě dá vyřešit velice snadno malou úpravou typu odsazení, ovšem pokud nás Safari umí zradit v takové triviálním situaci, kde všude ještě narazíme na jiné chyby, že ano. Nejčastěji se ovšem jedná o různá grafická tlačítka, výšky řádků u inline-block prvků, které si skáčou jak se jim zachce.

Seznam CSS hacků začneme opět Internet Explorerem. Verzi 6 už raději nebudeme budit z věčného spánku a zkusíme to od 7 nahoru.

Internet Explorer 7

.element {*font-size:40px;} /* ie 7 only */

Hvězdička před názvem atributu zaručí, že definice nebude platit pro žádnou novější verzi. Znaků lze použít více, ale mně se hvězdička vždy nejlépe pamatovala. Existuje také jeden pěkný hack, který bude platit pro všechny verze IE od 7 do 10.

.element {text-indent:100px\9;} /* ie 7 - 10 */

Internet Explorer 8

U verze 8 už to začne být složitější. Našel jsem jeden CSS hack který platí pouze pro 8 a žádnou jinou, od této chvíle dál už ovšem budeme aplikovat pravidlo vždy na danou verzi a všechno novější. Pokud by se opravdu nějakým nešťastným postavením planet stalo, že v každé jednotlivé verzi IE to bude vypadat jinak, je bohužel potřeba všechny následující definice naskládat pod sebe a takříkajíc přebít.

.element {background:grey\0/IE8;} /* ie 8 only */

I tady můžeme použít jiný hack, který se aplikuje na verze od 8 do 11. Zrovna u této definice jsem několikrát narazil na zmínku, že se jedná o hack pro IE 9, ovšem po vyzkoušení mi fungoval pro všechny verze 8+.

.element {border:1px solid red\0/;} /* ie 8 - 11 */

Internet Explorer 9

Pro verzi 9 už je potřeba použít hack přes media query. Vlastnost bude viditelná opět pro verze 9, 10 a 11.

@media screen and (min-width:0\0){ /* ie 9 - 11 */
	.element {color:red;}
}

Internet Explorer 10 a 11

Můžeme použít dva podobné zápisy, kdy jeden bude platný pro obě verze a druhý s možností přidání definice pouze pro IE11.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ /* ie 10 - 11 */
	.element {text-transform:uppercase;}
}

@media all and (-ms-high-contrast:none){
	.element {margin-top:50px;}  /* ie 10 + 11 */
	*::-ms-backdrop, .element {font-style:italic;} /* ie 11 */
}

Pomocí výše uvedených hacků byste tedy měli zvládnout úpravu čehokoli pro libovolnou verzi IE. Naschvál jsem v každém příkladu uváděl jinou definici, abyste si po stažení ukázkového souboru mohli snadno otestovat, pro které verze jaká definice platí. K Internet Explorerům je to zatím vše, a na závěr ještě uvedu chytrý hack, který se vykreslí ve všem kromě IE7 a IE8 (takže i Safari, Chrome, Opera, Firefox).

:root .element {font-weight:bold;} /* ignore IE7+IE8 */

Firefox

Firefox je naštěstí jednoduchý. I ve své nejnovější verzi stále podporuje 4 roky starý hack :-) Bohužel, jeho chybné zobrazení line-height u grafických tlačítek zůstavá už asi od verze 3...

@-moz-document url-prefix(){ /* FF */
    .element {text-align:right;}
}

Safari, Google Chrome a Opera

Stejně tak u prohlížečů s jádrem webkit můžeme použít stále ten samý zápis. Zde bych ho ale rád rozšířil ještě o jednu definici, která bude platit pouze pro Safari. Ovšem Opera se nám trochu zkomplikovala. Starý hack nefunguje a jediný, který jsem našel se zase propíše do Chromu. No alespoň něco.

@media screen and (-webkit-min-device-pixel-ratio:0){ /* webkit + opera */
	.element {letter-spacing:10px;} 
	::i-block-chrome,.element { /* safari only */
		color:blue;
	}
}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm){ /* opera + google chrome */
	.element {font-size:40px;}
}

Všechny definice byly testovány na nejnovějších verzích prohlížečů pod operačním systémem Windows 8.1, kde pro simulaci starších verzí IE byl použit nativní debug bar.

  • Opera 21
  • Firefox 29.0.1
  • Google Chrome 35
  • Safari 5.1.7

Závěrem přidávám odkaz na testovací dokument, na kterém jsem vše zkoušel: hacky.html