Podmíněné styly a základní podpora HTML5 pro Internet Explorer
Strašně rád bych už staré Explorery pohřbil, ale stále jich tu pár straší. Nejen podle globálních statistik, ale i Google Analytics říkají, že místní publikum stále nemá to nejnovější.
Občas je potřeba ošetřit nějaké drobnosti, přidat tuhle to, támhle ono... Ošklivým hackům typu _margin-top, které fungují jen v některých verzích některých prohlížečů, bych se pro jistotu obloukem vyhnul. Nejenže validátory brečí a různé zvýrazňovače kódu si taky zavzlykají, hlavně je kód nepřehledný a údržba není žádná sláva.
Podmínky FTW! Nebo radši ne?
Na mnoha webech se doporučuje použít jiný soubor se styly:
Jenže to práci ani trochu neulehčí a spravovat více stylů pro více verzí prohlížečů je po chvíli na zbláznění.
Asi nejpříjemnějším (a dle mého názoru nejlepším) způsobem je použít podmínky trochu jinak. Přidat tagu html vlastní třídu podle prohlížeče. Naposledy mi stačilo pouze rozlišit starší a novější než IE8.
<!--[if lte IE 8 ]> <html class="ie"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Znásilnění starých IE pro HTML5
A protože starší IE nepozřou HTML5 tagy jako jsou <article> nebo <nav>, musí se jim pomoct a není to vůbec těžké. (Od IE7 to funguje určitě, IE6 a níž už netestuji. Tam už mám strach o své duševní zdraví.)
Nejdřív je potřeba si vytvořit pomocí javascriptu prázdné prvky. Ty se ani nemusí umisťovat do DOMu, takže to je rychlovka. IE tak pozná, že něco takového může existovat a zparsuje stránku včetně nových párových tagů správně.
function cx(y){document.createElement(y)};
var z=['nav','article','section','aside','header','footer'];
var l=z.length;for(var i=0;i<l;i++){cx(z[i])};
Již zkomprimovaný kód je opravdu lehoučký a zkušenější oko uvidí deklaraci funkce cx, která vytváří prvky podle předaného parametru. Potom následuje pole prvků, které chceme použít. Je možné přidat ještě například figure, figcaption, video, a plno dalších kravin. A nakonec cyklus projede celé pole a pomocí výše zmíněné funkce všechny nové prvky vykouzlí do éteru.
Jenže neznámé elementy si IEčko vykresluje jako display: inline, takže zbývá ještě poslední fix.
nav, article, section, aside, header, footer{
display: block;
}
To by mělo snad stačit pro všechny menší projekty. Pokud pracujete na nějakém monstru, je možná lepší využít komplexnějších knihoven, jako jsou Modernizr, HTML5 Shiv nebo jistě mnoho dalších. Já ale miluji malá, rychlá a srozumitelná řešení, pokud je to alespoň trochu možné.