Днес няма да обръщаме внимание върху всеки таг. Кога и в какви случаи се използва. Ще обърнем внимание само на това КАК да ги “подкараме” за IE6+ и други по – стари браузъри.
Първо малко теория:
Всеки браузър има списък с елементи , които “познава”. Браузъра знае какъв default стил да им приложи и как да ги третира.Пример <p> тага има по подразбиране margin, <ul> има margin, list-style, padding и тн. Също така браузърите съдържат информация и какви други елементи може да съдържа даден таг. Кофтито е , че всеки браузър си има свое виждане за нещата.
Браузърите третират непознатите за тях елементи като inline. В даден момент обаче тага няма да ни върши работа като inline.
Примерно можем да си напишем наш си таг <rakia>. Такъв таг разбира се няма , но ние все още можем да му прилагаме стилове и да го използваме. Този таг е несъществуващ за разлика от <section> примерно, но IE ще ги третира като еднакво непознати за него …
<style>
rakia {
display: block;
border: red;
}
</style>
<rakia>
Rakia!
</rakia>
По – горния код , ще приложи правилно стиловете към тага <rakia> ако отворим документа с Firefox примерно , нищо че такъв изобщо не съществува. По този начин можем да променим inline “природата” на непознатия елемент и да го стилизираме както бихме правили с някой <div> примерно или <span>.
Но ако трябва да работим с непознати елементи под Internet Explorer – ето тогава вече се сблъскваме с проблем. IE не прилага стилове към елементи, които не познава (с изключение на IE9). Не можем да им прилагаме какъвто и да е CSS. И разбира се за съжаление HTML 5 семантичните тагове са в графата – непознати за IE6, IE7, IE8.
……….. проронваме сълза, изпадаме в 5 минутна меланхолия ……………. и продължаваме към решението на проблема
За да бъде възможно IE да прилага стилове към елементи , които по принцип не поддържа правим следното…
<script>document.createElement(„rakia“);</script>
Добавяме този код в <head> елемента на страницата , в която ще използваме елемента. Еднократно за всяка отделна html страница!
Ето я и развръзката на казуса “Как да използваме семантичните HTML5 тагове за Internet Explorer”. Логично от всичко написано по горе:
<script>document.createElement(„section“);</script>
<script>document.createElement(„nav“);</script>
<script>document.createElement(„article“);</script>
<script>document.createElement(„aside“);</script>
<script>document.createElement(„hgroup“);</script>
<script>document.createElement(„header“);</script>
<script>document.createElement(„footer“);</script>
<script>document.createElement(„time“);</script>
<script>document.createElement(„mark“);</script>
Вече ще можем да използваме в IE всеки от посочените по – горе тагове. God bless JS!!!
От тук, горния код може да се “облагороди” според нуждите и конкретното задание, но това е най – простия начин, който може да накара IE да изплозва семантичните тагове.
Надявам се да е полезно на някой
