Разлики в HTML4 и HTML5 – как да използваме новите тагове в старите браузъри

В предния си урок засегнах въпроса за новите тагове в HTML5 и доколко те всъщност са облекчение при създаването на сайтове и доколко са ненужни. В този урок ще продължим с това какво точно трябва да направим, за да могат посетителите на сайта, които използват стари браузъри – например IE 8, да виждат правилно съдържанието.

Това, което трябва да се каже за HTML5 е, че една от основните идеи за стандарта, на която е отделено много внимание и има добри резултати, е идеята за съвместимост с по-стари версии (backwards compatibility). Въпреки, че най-хубавите (по моя преценка) тагове – audio, video и canvas – няма как да бъдат поддържани от стари браузъри, поради особената им функционалност, останалите, за които предния път споменах, че можем и без тях, всъщност могат лесно да се пригодят (все пак с малко допълнителна работа) така, че да работят правилно и на IE 7/8, които сами по себе си „не знаят“ какво е <header> примерно.

Нека създадем една съвсем простичка HTML5 страница, в която да включваме някои от новите тагове. Ето тук съм подготвил примерен код, който можете да прегледате: https://gist.github.com/4081026 (markup) и https://gist.github.com/4081085 (styles). Ето и две картинки, показващи как изглежда страницата (първата е на Chrome, а втората – на IE 8):

Както виждате Internet Explorer 8 не прилага стиловете дефинирани за непознатите му тагове, в следствие, на което, сайтът няма почти нищо общо с това, което се очаква и се вижда на по-нови браузъри.

За да добавим правилна поддръжка за новите тагове трябва да кажем на IE8: „Виж – това е просто обикновен таг, който трябва да използваш като поредния контейнер“. Това се прави с помощта на JavaScript и по-специално: document.createElement('header'); (като разбира се на мястото на header, може и трябва да стои всеки един таг, за който искаме да добавим поддръжка).

Само това обаче не е достатъчно. Ако се ограничим до тук стиловете ще бъдат непълни и сайтът ще изглежда така:

Това се получава по причината, че новодобавените тагове се третират като inline елементи. Това можем лесно да го оправим като просто им зададем display: block; през CSS.

Финалният вариант можете да видите тук: https://magadanski.com/demo/html5/. Преглеждайки source code-а на страницата можете да намерите всичко, и все пак ето директни връзки към CSS и JS файловете.