HTML5 и старите браузъри

Ако сте уеб разработчик и след дългото очакване на HTML5 сте се хвърлили с ентусиазъм в изпробване на новите тагове и подобрени възможности, вероятно вече сте се сблъскали с въпроса за поддръжка на стандарта в различните браузъри и устройства. Проблемът е основно в масовото използване на старите браузъри, които не поддържат новостите. Популярната операционна система Windows XP например (за чиято поддръжка Microsoft вече обявиха „обратно броене“) върви с Internet Explorer 6, браузър на повече от 10 години, създаващ главоболия на разработчиците вече много време.

Нормално е все още да има хора, които ползват подобни стари браузъри, защото не знаят за наличието на алтернативи, защото нямат техническите умения да инсталират сами нови, защото фирмата, в която работят, използва приложения и системи, работещи само на конкретна версия на даден браузър и много други причини.

От уеб разработчиците обаче се очаква да създават сайтове и онлайн апликации, съвместими с всички версии на популярните браузъри.

HTML5 е най-новата версия на HTML стандарта, която бе изключително добре приета поради няколко причини. Една причина е огромната пауза в разработката на стандарта, последната основна версия беше публикувана около 1999, като допреди това нови версии излизаха на около 2 години. Въпреки че паралелно развиваният XHTML наложи по-строги правила за синтаксиса и не успя да допринесе с нови функции, той успя да се наложи като един от най-популярните стандарти в интернет. HTML5 стандартът е най-либерален, като приема синтактиса както на HTML, така и на XHTML, което ще улесни разработчиците, свикнали с определен синтаксис.

<video> елементът, една от най-вълнуващите новости в HTML5, е елемент, който приема както различни видео формати за популярните браузъри (WebM, ogv и mp4), така и Flash алтернатива, която работи безпроблемно на стари браузъри и се зарежда само при тях. Това означава, че ако имате флаш видео на вашата страница, може единствено да добавите HTML5 тага за видео към него, което ще зарежда модерната версия, ако браузърът на потребителя го разпознава. Обикновено видеото, използвано от Flash, е mp4, което означава, че ще може да добавите поддръжка на HTML5 видео за някои потребители. Ако искате да достигнете всички, ви препоръчваме да прекодирате видеото и в новия формат WebM.

Видео клиповете обаче често имат нужда и от субтитри, обяснения, анотации, преводи и друг вид допълнителна информация към видеото. Добрата новина е, че вече усърдно се работи и по утвърждаването на новия стандарт за субтитри и друга текстова информация към видео съдържанието – WebVTT (засега поддържан единствено от Google Chrome). Повече информация за новия стандарт може да видите в това 30-минутно клипче.

Flash технологията обаче се ползва за повече от видео, приложенията варират от прости банери, до зашеметяващи апликации, като например онлайн графичния редактор pixlr, притежаващ повечето основни инструменти на Adobe Photoshop. Затова е вероятно Flash да се използва още дълго време, дори след като <video> елементът навлезе масово.

Как лесно да добавим поддръжка на HTML5 в различните браузъри?

Добрата новина е, че има трикове, с които да добавите поддръжка на HTML5 стандарта на почти всички браузъри. Подобен тип „запълване“ на функции ще работи много бързо на всички модерни браузъри, а на по-старите ще работи както винаги досега. Пример за това са новите функции и елементи при уеб формите – може да напишете всичко според лесния HTML5 стандарт с новости като валидация, ограничения и повече видове полета и с добавянето на малко готов Javascript код да подкарате същата функционалност при потребители с по-стари браузъри.
За различните функции ще ви трябват различни инструменти, за основни неща обаче, като поддръжка на новите семантични елементи, има лесен начин – трябва да добавите в <head&гt; секцията на документа си следния код:

<script> document.createElement("header"); document.createElement("nav"); 
document.createElement("article"); document.createElement("section"); 
document.createElement("footer"); </script> 

…и тези редове в основния CSS файл на страницата:

header, nav, article, section, footer { display:block; }

Като към този списък може да добавите всички други тагове, които използвате на вашата страница.

Поддържа ли се HTML5 от мобилните браузъри?

Иронично, средното ниво на браузърите в мобилните устройства е по-високо от това на браузърите, използвани на компютри и лаптопи. Причината е бързата амортизация на мобилните телефони и таблети, докато настолните компютри рядко сменят или обновяват браузърите си.
Вече все повече браузъри притежават функция за самоактуализиране (auto update), което на практика означава, че браузърите на потребителите стават по-способни, дори без тяхната намеса.

HTML5 формите имат и други сериозни предимства – мобилните браузъри на Android и Apple iOS устройствата извеждат специална клавиатура според вида на полето – ако полето е вид <input type=“email“&гt; клавиатурата ще има изведен символа @ на удобно място, ако е <input type=“url“&гt; пък ще има бутон .com и т.н.

Ако искате да страниците ви да е HTML5, единственото, което трябва да направите, е да смените първия ред с новата декларация за HTML5 документи:

<!DOCTYPE html>

След това може да опитате да валидирате страницата си.

Освен декларацията за вид документ, много други неща са опростени, вече няма нужда да въвеждате типове за стилове и скриптове в документа си, <style> и <script> вече са валидни без нужда от допълнителни декларации.

__________________
Александър Футеков е част от работната група Уеб образование (Web Education) на W3C. Занимава се с уеб дизайн от 6 години и е работил по проекти като видео портала Jobtiger.tv, конференцията за ползваемост UXSofia.com, създал е и поддържа корпоратвини блогове и други страници. Автор е на образователни статии за HTML и CSS, публикувал е в порталите за разработчици на браузърите Opera и Mozilla.

Александър Футеков ще бъде водещ на курс Въведение в уеб програмирането с HTML5 и CSS, който ще се проведе на 3 май 2012 г. в New Horizons Bulgaria.