HTML5 tagy v IE

HTML5 ešte stále nie je finálne, avšak už dnes sa vo webdeveloperskom svete skloňuje na každom kroku a moderné prehliadače postupne implementujú mnohé z jeho častí. HTML5 okrem iného prináša hromadu nových sémantických tagov. Takže zbohom <div class="article">, <div class="footer">, <div class="sidebar"> a vitajte <article>, <footer>, <aside>. Ale nie je všetko zlato, čo sa blyští. Vieme, v ktorom browsri narazíme, však?

HTML5 tagy môžu byť v mnohých prehliadačoch stále vedené ako neznáme. To nám ale nijak nebráni v tom, aby sme ich používali. Môžeme ich „rozhýbať“ Javascriptom a „vyfarbiť“ CSSkom (v niektorých browsroch im treba nastaviť aspoň základné vlastnosti ako display: block). Bohužial Internet Explorer (vo verzii 8 a menej) sa k týmto tagom chová veľmi kruto a tvári sa, ako keby ich nepoznal a nedovolí nám ich naštýlovať pomocou CSS. Takže konečná? Nie nutne.

HTML5, Internet Explorer – zoznámte sa

Pomocou malého triku dokážeme IEčko prinútiť, aby sa s HTML5 tagmi (resp. akýmykoľvek neznámymi tagmi) zoznámilo. Stačí veľmi jednoduchý Javascript:

document.createElement( 'header' );

Zdá sa, že vytvorením neznámeho elementu v Javascripte si IEčko upraví svoj „zoznam podporovaných elementov“ a umožní nám s novými tagmi plnohodnotne pracovať. Výhodou je, že takto javascriptom vytvorený element nie je ani nutné pripájať do dokumentu pomocou appendChild(), čím si ušetríme zbytočné ošahávanie DOMu.

A kedže vždy existuje aspoň jedna múdrejšia hlava ako tá naša, nemusíme písať vlastný javascript na pridanie podpory do IEčka, ale môžeme využiť html5shiv.