Как да използваме HTML5 в сайтовете си

Напоследък се изписа много за политиката на стандартизиране и процесите при разработването на HTML 5, но това, от което всеки уеб разработчик се вълнува основно е: „Какво мога да правя с HTML 5 и кога мога да започна да го използвам?“. Добрата новина е, че с HTML 5 можете да направите много неща. Още по-добрата е, че с HTML 5 можете да направите много неща още днес – не е необходимо да чакате така или иначе дългоотлаганата стандартизация, нито края на войната между Flash и iPhone.

Преди това, обаче има нещо много важно: Трябва да познавате аудиторията си, макар това да важи независимо дали смятате да ползвате HTML5 или не. Ако мнозинството от посетителите на сайта все още използват Internet Explorer 6, тогава няма смисъл да бързате. От друга страна, ако сайта е предназначен преди всичко за мобилни браузъри на iPhone или iPad, тогава какво чакате? Но ако сайта ви попада някъде по средата, каквато е ситуацията при повечето, ето няколко полезни насоки за постепенно прилагане на HTML5.

Кои функционалности на HTML5 могат да се използват в момента?

Макар спецификациите на новата версия на езика все още да са обект на стандартизация от W3C консорциума, значителни части от него вече са имплементирани в Safari, Chrome, Firefox (особено във версия 4) и Opera, а Microsoft обещават да направят същото и в предстоящия IE 9. Детайлна разбивка на възможните функционалности на HTML5 (също CSS3, SVG и др.) по браузъри може да се намери на сайта Can I Use.

Сайта HTML5 Test пък оценява съвместимостта на браузъра със списък от налични HTML5 възможности, като за всяка дава определен брой точки (от общо 300). Към 14 юли 2010 те са:

Safai 5.0 / Apple – 208
Chrome 5.03 / Google – 197
IE 6 и IE 7 / Microsoft – 12
IE 8 / Microsoft – 27
Firefox 3.6.6 / Mozilla – 197
Firefox 4.0 beta – 189
Opera 10.10 – 67
Opera 10.60 – 159

Очевидно е, че съществува основна група HTML5 функционалности, които се поддържат от повечето не-IE базирани браузъри. Сайтове, чието ядро посетители ползват именно такива браузъри, могат по-пълноценно да се въползват от възможностите на новия „стар“ маркъп език.

Да започнем отгоре

Можете да замените дългия DOCTYPE етикет, необходим за правилното валидиране на страниците с много по удобния му еквивалент в новата версия:

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <html xmlns=“http://www.w3.org/1999/xhtml“>

вече е равносилно на краткото и ясно

<!DOCTYPE HTML> <html>

Ако браузърите са рендирали уеб страниците ви правилно досега (т.е. били са валидирани спрямо съответните стандарти), ще продължат да го правят и след промяната.

Какво правим с видеото?

Всъщност проблема с видеото е не как да използваме новата функционалност на HTML 5 – тага video, а кой ще спечели войната на форматите. В момента основните играчи, които се надяват да получат признанието бъдещ видеокодек са 4: Flash (които наскоро влязоха в сериозен сблъсък с Apple), H.264, Ogg и WebM. Нито един от тях не се поддържа от всички браузъри във всички платформи и за съжаление изгледите това да се промени в близкото бъдеще клонят към невероятност.

Като вземем предвид тази информация, най-логично е да заключим, че video тага все още не е готов за пълноценно използване. Но почакайте: блестящите разработчици зад HTML 5 явно са предвидили това, тъй като са успели да направят video тага форматно-независим. И тъй като той може да поддържа няколко source етикета, се оказва че на практика работи доста добре – ако браузъра не поддържа първата опция, опитва втората, след това третата и така нататък. Ако нито една от тях не сработи, браузъра в крайна сметка може да зареди flash или обикновенно изображение.

Ето как става това:

*кода е взет от camendesign.com, където е поместено и подробно обяснение на стъпките.

Семантично казано…

Една от най-големите промени, които ще наложи HTML 5, е появата на семантично смислени тагове. Повечето сайтове в момента са пълни с елементи като <div id=“footer“> или <span class=“nav“> (или в най-лошия случай „<table><tr><td>…“). Философията на HTML 5 предвижда вместо едни и същи елементи да бъдат използвани от всички и навсякъде, те да се заменят от смислени техни еквиваленти, като например … <footer> или <nav>, в случая. Разбира се, те също могат да се стилизират с CSS.

Ако се страхувате, че досега никоя версия на IE не е поддържала такава свобода на таговете, можете да отдъхнете – ето хак, с който проблема се избягва много лесно:

<!–[if lt IE 9]> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js“></script> <![endif]–>

Достатъчно е да поставите кода в head секцията на сайта.

HTML5 Shiv e проект с отворен код, базиран на просто откриване, който позволява стилизиране на новосъздаден DOM елемент в IE. Например, ако създадете тага foo – document.createElement(“foo”) – впоследствие можете да го използвате неограничен брой пъти в кода на сайта. И тъй като HTML5 Shiv скрипта поддържа списък с всички нови тагове, които IE (все още) не разпознава, прилагането на CSS върху тях не представлява проблем.

Ето част от семантичните тагове на HTML 5:

section: тематично групиране на съдържание
nav: най-общо казано това е секция с навигационни връзки към други страници от сайта
time: показва текущото време (най-често в 24-часов формат)
header: заглавен елемент, който обикновенно се използва за целия документ, но може да се приложи и към определена секция
footer: аналогичен на горния; разполага се в края на секция или документа

Интелигентни форми

Друга особеност на новия HTML са доста по-интелигентните елементи на стандартните форми. Всеки уеб разработчик знае колко досадно е да се пишат отново и отново скриптове, валидиращи въведен e-mail адрес, телефонен номер или URL. Няма ли да е по-добре самия браузър да може да разпознава директно стандартните типове данни? И още как – ето синтаксиса:

Но какво ще стане с по-старите браузъри? Тук е най-хубавата част: ако браузъра засече атрибут type, чиято стойност не разбира, просто ще я замени с тази по подразбиране – text, която е и основния тип на горните данни. HTML 5 въвежда и атрибута placeholder, чиято функция е да обхваща пояснителния текст, който до момента сте добавяли до всеки елемент на формата:

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

Кои функционалности на HTML 5 ще могат да се използват скоро?

За съжаление все още не можем да се възползваме от пълните възможности на новата версия по ред причини (и не – не всички от тях съдържат инициалите “IE”). Браузърите вече стартираха поетапна поддръжка на новите тагове и ето два, които ще станат факт съвсем скоро.

Нестандартни шрифтове

В един или друг момент всеки дизайнер е мечтал да има начин, с който да принуди посетителите да инсталират любимия му шрифт. Това донякъде става възможно с CSS3 свойството @font-face. Основните пречки това да се наложи досега бяха Firefox (преди версия 3.5) и Mobile Safari (преди iOS 4).

Хубавото, е че вместо да използвате някой стандартен шрифт за всички клиенти (поради липсата на поддръжка от страна на част от тях), можете да укажете различен шрифт за всеки браузър. Ако потребителя няма инсталиран желания шрифт, браузъра ще използва някой от изброените във font-family свойството. Списък с най-различни потребителски шрифтове, както и генератор за ваши собствени можете да намерите на fontsquirrel.com. Кода съответно е:

@font-face { font-family: MyFont; src: url(‘MyFont.otf’); }h2 { font-family: MyFont, sans-serif, Verdana; }

Сенки и заоблени линии

Други любими похвати на дизайнерите са т.нар. eye-candy елементи: сянка под текст или блоков елемент и заоблени рамки. Ето CSS3 свойствата, с които това става за по-малко от 3 реда код:

Обли рамки:

-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

Сянка под текст:

text-shadow: 5px 5px 3px #CCC;

Сянка под блоков елемент:

-webkit-box-shadow: 10px 10px 5px #666; -moz-box-shadow: 10px 10px 5px #666; box-shadow: 10px 10px 5px #666;

За браузърите, които не поддържат CSS3 (основно това са стари версии), винаги можете да прибегнете до стария и тромав похват на прилагането на изображения във фона на съответния елемент.

Какви HTML5 функционалности ще могат да се използват някой ден?

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

Гениални форми

Вече споменахме интелигентните форми, които скоро ще могат да се използват свободно в HTML кода. А какво ще кажете за:

контрола за хоризонтален слайдер, позволяваща на потребителя да избере номер: <input type=“range“ min=“0″ max=“100″ step=“2″ value=“50″>

селектор на цвят (color picker): <input type=“color“>

избор на дата (с възможни стойности date, month, time, datetime и datetime-local): <input type=“date“>

дори регулярни изрази: <input type=“text“ pattern=“[0-9]{13,16}“>

или просто указание, че полето е задължително: <input type=“text“ required>

Чисто, просто и бързо – с навлизането на тези атрибути валидирането на всяко поле с javascritpt или използването на jQuery в определени случаи ще остане в историята.

Печатно-оформление на текста

Други много полезно свойство на CSS3 е възможността за оформяне на текст в колони – свойство, което за съжаление все още се пренебрегва от повечето браузъри. А ето как разделяме текста в три колони, с 20px разстояние помежду им и ширина на всяка – 150px:

-moz-column-count: 3; -moz-column-gap: 20px; -moz-column-width:150px; -webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-width:150px;

Повече за колоните: quirksmode.org

Засичане на местоположението

Интереса към подобни услуги обяснимо нараства все повече, особено що се отнася до мобилните браузъри. HTML 5 ще поддържа геолокация, а това означава че браузъра няма да има нужда от услугите на трета страна за да предостави тази информация. (Google обявиха наскоро, че Chrome ще се откаже от използването на Gear за геолокация в полза на HTML 5).

Офлайн работа с локално съхранение Съхранението на информация в облака е чудесна идея – до момента, в който се окажете лишени от достъп до Интернет. Или може би имате уеб приложение, което работи с големи количества данни – повече, отколкото искате да се обменят постоянно със сървъра? Или пък разполагате с ограничен тарифен план за мобилното си устройство и искате да работите офлайн, доколкото е възможно? Независимо коя причина се отнася за вас, отговора е да използвате синхронизирано обновяване на локално съхранени данни, когато отново се вържете в мрежата. Браузърите, поддържащи тази HTML5 функционалност в момента са Firefox 3.5+, Safari Mobile 3.1+, Safari 4+ и Chrome 4+.

Изображения, анимации и 3D трансформации

Едно от големите обещания на HTML5 е изцяло илюстриран и анимиран уеб, чрез използване на тага canvas и различни CSS3 свойства. Този таг позволява манипулиране с помоща на JavaScritpt на интерактивни графики, анимация, динамични растерни изображения и дори 3D трансформации (макар към момента това да е достъпно само за Safari 5).

Елементите описани дотук са само част от включените към момента възможни в HTML5 или CSS3. Важно е да не се съсредоточаваме върху мантрата “HTML5 – не и преди 2020” или да гледаме на него единствено като на “убиеца на Flash”. Реалността е, че HTML5 е просто еднин твърде просрочен ъпдейт на HTML4, който всъщност можем да започнем да използваме още днес.