Фев
11
2013

Примеры использования HTML5: часть 2

images

12. Атрибут Autofocus

HTML5 опять спасает от поиска JS реализации. Если нужно чтобы фокус по умолчанию устанавливался на определенный input, то ему достаточно задать атрибут autofocus.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Здесь так же возможны оба стиля написания, но я предпочитаю XHTML и пишу "autofocus=autofocus". Хотя можно было написать только имя атрибута.


13. Поддержка аудио

Нам больше не нужны сторонние плагины для вывода аудио на страницах. HTML5 предоставляет нам элемент <audio>. Теперь нам не нужно заботиться о всяких плагинах для этого. К сожалению с поддержкой браузерами у HTML5 audio все тоже не очень гладко. Сегодня хорошим стилем считается заботиться от обратной совместимости.

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />
	Download this file.
</audio>

Mozilla и Webkit не полностью поддерживают такое решение. Firefox хочет видеть .ogg или .wav файлы. Поэтому, сегодня следует создавать и указывать оба формата.

Safari не поддерживает ogg, но понимает mp3 и wav. IE9+ принимает AAC. MP3, более старые версии не поддерживают тэг. Опера работает с ogg и wav.


14. Поддержка видео

Как и в случае с <audio>, HTML5 video работает только в более или менее современных браузерах. К слову, не так давно YouTube анонсировал HTML5 плеер для своих видео. К сожалею, спецификации HTML5 не определяют кодек для видео, поэтому браузеры в этом плане различаются. IE9 и Safari поддерживают видео формата H.264, в то время как Opera и Firefox поддерживают theora и WebM форматы. Поэтому для гарантированной работы следует использовать 2 формата.

<video controls preload>
	<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
	<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
	<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video</a> </p>
</video>

Chrome воспроизводит все три формата.

Есть несколько вещей которые стоит отметить отдельно:

  1. Технически, указывать атрибут type не обязательно, в этом случае браузер сам выяснит формат видео. Но чтобы уменьшить трафик лучше указывать тип самостоятельно.
  2. Не все браузеры понимают HTML5 video. Ниже элемента source можно разметить ссылку на скачивание или flash версию. Это дело вкуса.
  3. Атрибуты controls и preload рассмотрим далее.

15. Preload видео

Да, атрибут preload делает именно то, о чем Вы подумали (загружает видео еще до начала воспроизведения © Кэп). Стоит хорошо подумать, действительно ли Вы хотите чтобы браузер предварительно загружал видео. Так ли это необходимо? Конечно, если страница специально сделана для просмотра видео, то стоит его предварительно загрузить, сэкономив посетителю время. Видео может быть предварительно загружено установкой атрибута preload="preload" или просто preload Как обычно Вы вольны выбирать свой стиль.

<video preload>

16. Элементы управления (Controls)

Если Вы уже опробовали советы приведенные выше, то должно быть заметили, что видео воспроизводится безо всяких элементов управления. Чтобы их отобразить нужно указать атрибут controls для тэга video.

<video preload>
video000

Обратите внимание, что в разных браузерах элементы управления выглядят по разному.


17. Регулярные выражения

Вы ловили себя на мысли, что Вы частенько пользуетесь регулярными выражениями для проверки текстовых полей? Благодаря атрибуту pattern, мы теперь можем писать регулярные выражения прямо в разметке.

<form action="" method="post">
	<label for="username">Имя пользователя: </label>
   	<input type="text"
	   name="username"
	   id="username"
	   placeholder="4 <> 10"
	   pattern="[A-Za-z]{4,10}"
	   autofocus
	   required>
	<button type="submit">Создать</button>
</form>

Если Вы уже знакомы с регулярными выражениями, то Вам будет понятен следующий шаблон: [A-Za-z]{4,10} принимающий только буквы верхнего и нижнего регистров. А также определяющий что длина строки должна быть от 4 до 10 символов.

Обратите внимание, мы начинаем комбинировать изученные атрибуты!

If regular expressions are foreign to you, refer here.


18. Определяем поддержку атрибутов

Какая польза от всех этих атрибутов, если нет способа определить понимает ли из браузер? Хороший вопрос. Существует несколько решений Рассморим два из них. Во-первых это использование библиотеки Modernizr. Во-вторых, мы можем создать и проанализировать элемент, чтобы определить что умеет браузер. Например, в предыдущем примере, если мы хотим узнать поддерживает ли браузер атрибут pattern, то мы можем сделать это с помощью небольшого JS скрипта:

alert( 'pattern' in document.createElement('input') ) // boolean;

На самом деле, это довольно популярный метод определения поддержки браузером. К слову jQuery использует этот трюк. Выше мы создали новый элемент inputи пытаемся определить наличие атрибута pattern. Если браузер его поймет, то будет получено сообщение "true". В противном случае "false".

<script>
if (!'pattern' in document.createElement('input') ) {
	// do client/server side validation
}
</script>

Помните что для этой проверки требуется JavaScript!


19. Элемент Mark

Думайте об элементе <mark> как о подсветке. Строка заключенная в этот тег должна быть релевантна тому что сейчас делает посетитель. Например, если пользователь ищет "Open your Mind" на блоге, то следует исполльзовать JavaScript чтобы обернуть все вхождения этой фразы в тэги <mark>.

<h3> Результаты поиска</h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23. Когда использовать <div>

Некоторые изначально ставили под сомнение семантичность использования div. Теперь, когда у нас есть тэги header, article, section, и footer, осталась ли еще работа для div? Конечно.

div следует использовать в случае, когда другие элементы не подходят.

Например, если Вам требуется обернуть блок кода для его позиционирования, то div идеально для этого подходит. Но если Вы ищете "обертку" для статьи, или ссылок в подвале сайта, то тут нужны уже элементы <article> и <footer>. Они более семантичны.


20. Когда стоит начинать использовать

Многие разработчики полагают что окончательная работа над HTML5 завершиться чуть позже чем никогда и полностью игнорируют его, делая большую ошибку. Реальность заключается в том, что уже сегодня можно использовать некоторые возможности HTML5 и быть уверенными что они будут работать.

21. Чем НЕ является HTML5

Некоторые настолько запутались в новых технологиях, что даже JS трансформации приписывают HTML5. Даже Apple, непреднамеренно способствовали этой идеи. Не-разработчикам все равно, для них это все супер дюпер технологии. Поэтому попробует разобраться, что же НЕ относится к HTML5.

  1. SVG: Это не HTML5. SVG существует уже 5 лет.
  2. CSS3: Это не HTML5. Это CSS.
  3. Geolocation: Это не HTML5.
  4. Client Storage: Это не HTML5. Они появились в одном месте, но были исключены из спецификации HTML5, в связи с тем, что многие были обеспокоенты чрезмерным усложнением спецификаций HTML5, Client Storage имеет собственную спецификацию
  5. Web Sockets: Это не HTML5. Опять же, выделены в отдельную спецификацию.

22. Data атрибуты

Теперь мы официально можем использовать собственные атрибуты во всех HTML элементах. Раньше мы не могли позволить себе такого:

<h1 id=someId customAttribute=value> Thank you, Tony. </h1>

Валидатор тут же начал бы ругаться. Но теперь, если определяем атрибут со словом data, то все легально. Если Вы раньше частенько добавляли значащую информацию в такие атрибуты например как class, вероятно для использования в JavaScript, то это отличная новость.

HTML

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

Получаем значение собственного атрибута

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Val

Также такой атрибут можно использовать и в CSS:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Пример дебильного использования CSS</title>
<style>
h1 { position: relative; }
h1:hover { color: transparent; }
h1:hover:after {
	content: attr(data-hover-response);
	color: black;
	position: absolute;
	left: 0;
}
</style>
</head>
<body>
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>
</body>
</html>

Это бредовое демо можно посмотреть на JSBIN.

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)