_

Odlišené vykreslení různými prohlížeči je věc, která dříve či později potrápí každého kodéra. Ať už se jedná přímo o bugy, nebo pouze o drobný rozdíl při vykreslování konkrétních prvků, je potřeba dosáhnout shody ve všech majoritních prohlížečích. Chyby Internet Exploreru a způsoby, jak je obejít jsou dávno obecně známé, ovšem o umravnění zlobivého Firefoxu nebo Google Chrome se tolik nemluví. I když je v kodérově nejlepším zájmu, psát styly tak, aby hacků použil co nejméně, nastávají situace, kdy se jim vyhnout nemůžeme. Oprava stylů po někom jiném je práce, kterou nikdo nemá rád a nechce dělat, ale také vhodná chvíle, kdy nasadit CSS hacky.

Tento článek je z roku 2010, tudíž nemluví o prohlížečích posledních několika let. Můžete se zkusit podívat na článek novější: CSS hacky pro nejpoužívanější prohlížeče: díl II

Jelikož jsem odpůrcem podmíněných CSS pro různé prohlížeče a mám rád vše dohromady, popíšu v článku pouze takzvané inline hacky. Nejdříve si vezmeme do parády právě Internet Explorer. Mějme div s třídou "div":

Internet Explorer 6

Verze 6 už sice takový dinosaurus mezi prohlížeči, bohužel ho ale stále spousta uživatelů odmítá aktualizovat. Pro něj je to jednoduché:

* html .div {border:1px solid blue;}
.div {_border:1px solid red;}

Připsání * html před třídu prvku nám zaručí, že skupinu vlastností si vezme právě jen IE 6.  Lze také použít známy podtržítkový hack.

Internet Explorer 7

U něj již to tak snadné není. Můžeme použít hvězdičku (nebo jakýkoli jiný paznak) před názvem CSS vlastnosti, čímž ovlivníme IE7. Problém je ale v tom, že tomuto hacku porozumí i starší verze, takže pokud opravujeme chybu pouze ve verzi 7, je potřeba vlastnost navrátit do původní hodnoty pro IE 6.

.div {*border:1px solid yellow;}
.div {&border:1px solid orange;}

.div {*border:1px solid yellow;_border:1px solid black;}

Internet Explorer 8

U verze 8 je to stejné jako u sedmičky: použijeme opět speciální hack, který pochopí 8 a 7, ale 6 už nikoli. (Nezapomeňte na "lomeno 9" na konci).

.div {border /*\**/: 1px solid violet\9;}

Firefox

Ač se to nezdá, i Firefox nám může někdy pěkně znepříjemnit kódování stránek. Jako jeden z bugů mohu zmínit odsazení floatovaného checkboxu. To je bohužel problém, kde floatovaný checkbox je v každém prohlížeči odsazen úplně jinak. Následující hack má ale nevýhodu, že ovlivní i Internet Explorer 7. To se může občas hodit, ale potřebujeme také zápis, který ovlivní pouze a jenom Firefox.

.div, x:-moz-any-link {border:1px solid red;} /* FF a IE 7 */

@-moz-document url-prefix() { /** FF */
	.div {border:1px solid green;}
}

Safari a Google Chrome

Hack pro prohlížeče na jádru KHTML je sice velmi špatně zapamatovatelný, ovšem funguje výborně:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .div {border:1px solid pink;}
}

Opera

Operu jsem musel hackovat opravdu snad jen párkrát, ale jsou situace, kdy znalosti hacku pro Operu využijeme.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	head~body .div {border:1px solid green;}
}