Advertisement

28 особенностей, советов и техник HTML5, которые необходимо знать

by
This post is part of a series called HTML5 and You.
Quick Tip: HTML5 Features you Should be Using Right Now
Quick Tip: New HTML5 Form Features

Russian (Pусский) translation by Sergei Tolkunov (you can also view the original English article)

Эта отрасль развивается быстро, очень быстро! Если не быть аккуратным, то можно безнадежно отстать. Поэтому, если ты немного ошеломлен приближающимися изменениями и обновлениями языка HTML5, ты можешь использовать этот букварь необходимых знаний.

1. Новый Doctype

До сих пор используешь этот надоедливый, сложнозапоминающийся XHTML doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Если так, то зачем? Начни использовать новый HTML5 doctype. Ты проживешь дольше - как бы сказал Дуглас Квейд

<!DOCTYPE html>

На самом деле знал ли ты, что, по правде говоря, даже эта директива не является обязательной в HTML5? Однако, она используется для современных и браузеров более ранних версий, которые требуют определенного doctype. Браузеры, которые не понимают эту директиву, просто отображают содержащуюся разметку в стандартном режиме. Поэтому начинай использовать новый doctype без боязни и особых стеснений.

2. Элемент figure

Рассмотрим следующую разметку для изображений:

<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

К сожалению, нет возможности ассоциировать подпись, содержащуюся в тэге параграфа, с элементом изображения, к которому эта подпись относиться. В HTML5 это исправляется с помощью элемента <figure>. В комбинации с элементом <figcaption>, мы можем семантически ассоциировать подписи с соответствующими изображениями.

<figure>
	<img src="path/to/image" alt="About image" />
	<figcaption>
<p>This is an image of something interesting. </p>
	</figcaption>
</figure>

3. Переопределенный элемент <small>

Не так давно, я использовал элемент <small> для создания подзаголовков, которые близко связаны с логотипом. Это очень удобный презентационный элемент; однако сейчас это будет не корректным использованием. Элемент small сейчас переопределен более специализировано для отображения мелкого текста. Представь краткий блок об описании авторских прав на твоем сайте; в соответствии с новым опредлением элемент <small> может быть корректно содержать эту информацию.

Элемент small сейчас относится к "маленькому тексту".

4. Больше нет атрибута type для элементов script и link.

Ты возможно до сих пор добавляешь атрибут type в тэги элементов link и script

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

Это уже не нужно. При объявлении обоих этих тэгов уже предполагается, что они ссылаются на определенные таблицы стилей и скрипты соответственно. Таким образом, мы можем удалить в целом type.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. Брать в кавычки или нет.

...В этом вопрос. Помни, что HTML5 это не XHTML. Ты не обязан помещать атрибуты в кавычки, если не хочешь этого делать. Ты не обязан добавлять закрывающий тэг. Фактически в этом нет ничего плохого, если это делает твою жизнь намного проще. Для меня это на самом деле проще.

<p class=myClass id=someId> Запустить реактор.

Попробуй и ты. Но если ты предпочитаешь более структурированные документы, во всех смыслах, ты можешь использовать кавычки.

6. Сделай свой контент редактируемым

Content Editable

Современные браузеры понимают новый стильный атрибут, который может быть использован в элементах, называемый contenteditable. Как можно предположить из названия, он позволяет пользователю редактировать любой текст, содержащийся в элементе, включая его дочерние элементы. Существует множество способов использования нечто подобного, включая приложения списков дел, использующих преимущества локального хранилища.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<h2> Список дел </h2>
   <ul contenteditable="true">
<li> Сломать таксомат. </li>
<li> Доехать до заброшенной фабрики
<li> Посмотреть видео </li>
</ul>
</body>
</html>

Или, как мы узнали из прошлого совета, мы можем написать это так:

<ul contenteditable=true>

7. Поля ввода Email

Если мы используем значение "email" атрибута type для форм ввода, мы можем проинформировать браузер о возможности ввести строки, соответствующие только валидным email адресам. Да, все верно: встроенная валидация форм "на лету" скоро будет доступна! Мы пока не можем на все 100% положиться на результаты данной проверки по понятным причинам. Браузеры более ранних версий, которые "не понимают" значение email атрибута type, отображают поля ввода самими что ни на есть обычным образом.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />

<button type="submit"> Отправить форму </button>
	</form>
</body>
</html>
Email Validation

В то же время, мы не можем зависеть от валидации браузера. Решение на стороне сервера по-прежнему должно быть реализовано.

Также стоит учесть, что все современные браузеры достаточно нестабильны, когда дело доходит до использования элементов или атрибутов, которые не поддерживаются ими полностью. Например, Opera поддерживает проверку форм email, только если определен атрибут name. Однако, она не поддерживает атрибут placeholder, который будет рассмотрен более подробно в следующем совете. В итоге, не завися пока от этих форм валидации, мы все равно можем их использовать.

8. Заполнители

Прежде мы были вынуждены использовать немного Javascript для создания заполнителей для областей текста (textbox). Конечно, ты можешь изначально назначить атрибут value как ты считаешь нужным, но как только пользователь удаляет этот текст и снимет фокус с него, щелчком мыши вне этого поля, его содержимое снова станет заданным по умолчанию. Атрибут placeholder исправляет эту ситуацию.

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

Опять же, поддержка этой функции достаточно сомнительна во всех браузерах, однако, с каждым новым релизом ситуация будет меняться к лучшему. К тому же, если браузер такой, как Firefox или Opera, в настоящее время не поддерживает атрибут placeholder, ничего страшного.

Validation

9. Локальное хранилище

Благодаря локальному хранилищу(не введенным с HTML5, а упомянутому ради удобства), мы можем организовывать расширенную "память" браузера введенных данных, даже после его закрытия или обновления страницы.


Подпишитесь на нашу YouTube страницу, чтобы посмотреть все наши видео-уроки!
Либо просмотрите это видео наScreenr.com.

"Локальное хранилище устанавливает пространство на домене. Даже закрывая и открывая заново браузер и переходя на тот же сайт, все данные из полей сохраняются в локальном хранилище.
-QuirksBlog

Хотя очевидно, что данное хранилище не поддерживается всеми браузерами, мы можем изучить этот метод для работы, наиболее заметно это в Internet Explorer 8, Safari 4 и Firefox 3.5. Учти только то, что для компенсации отсутствия поддержки данной технологии в старых браузерах, ты должен сперва определить существует ли свойство window.localStorage.

Support matrix
via http://www.findmebyip.com/litmus/

10. Семантичный Header и Footer

Прошли времена подобного кода:

<div id="header">
	...
</div>

<div id="footer">
	...
</div>

Блоки, изначально, не имели семантичной структуры - даже после появления атрибута id. Теперь в HTML5 у нас появилась возможность использовать элементы <header> и <footer>. Разметка, приведенная выше, может быть переписана следующим образом:

<header>
	...
</header>

<footer>
	...
</footer>

Это в полной мере позволяет создавать в своих проектах сложные по структуре разделы header и footer

Не надо путать эти элементы с заголовком и подвалом твоего сайта. Они просто ссылаются на эти контейнеры. По существу, имеет смысл размещать в элементе footer, к примеру, мета-информацию в нижней части статьи блога.

11. Еще о дополнениях работы с формами в HTML5

Изучи новые полезные дополнения HTML5 по работе с формами в небольшом видео-совете.


Подпишитесь на нашу YouTube страницу, чтобы посмотреть все наши видео-уроки!

12. Internet Explorer и HTML5

К сожалению, Internet Explorer по-прежнему привносит множество пререканий при работе с новыми HTML5 элементами.

Все элементы, по умолчанию, имеют значение inline атрибута display

Для того, чтобы убедиться в том, что новые элементы HTML5 отображаются корректно, как блочный элемент, необходимо стилизовать их таковыми.

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

К сожалению, Internet Explorer будет все равно игнорировать эти стили, потому что он понятия не имеет, что, например, элемент header сам по себе блочный. К счатью, существует простой фикс этой проблемы:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

Достаточно странно, но этот код кажется включает Internet Explorer. Для упрощения использования данного метода в дальнейшем, Рэмми Шарп создал скрипт, на который можно ссылаться, как на HTML5 факел. Этот скрипт также исправляет часть вопросов с печатью.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

13. hgroup

Представь, что в заголовке моего сайта имеется его имя, немедленно следующее за подзаголовком. Используя тэги ≪h1> и ≪h2> соответственно для создания разметки в HTML4 до сих пор не было возможности семантично проиллюстрировать взаимоотношения между этими двумя элементами. К тому же, использование тэга h2 привносит больше проблем, с точки зрения иерархии, когда он описывает и другие заголовки на странице. Используя элемент hgroup, мы можем группировать заголовки вместе без влияния на поток вывода документа.

<header>
	<hgroup>
<h1> Страница отзывов фанатов </h1>
<h2> Только для людей, которые хотят сохранить воспоминания на всю жизнь. </h2>
	</hgroup>
</header>

14. Атрибут для обязательных полей

Формы поддерживают новый атрибут required, который указывает, естественно, является ли конкретное поле для ввода обязательным. В зависимости от твоих предпочтений написания кода, ты можешь объявить этот атрибут двумя путями:

<input type="text" name="someInput" required>

Либо более структурированным способом:

<input type="text" name="someInput" required="required">

Любой из представленных методов работает. В браузерах, которые поддерживают этот атрибут, этот код не позволит отправить форму, если обязательное поле не заполнено. Вот небольшой пример: мы также используем атрибут placeholder, потому что нет никаких припятствий, чтобы этого не делать

<form method="post" action="">
	<label for="someInput"> Ваше имя: </label>
	<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
	<button type="submit">Вперед</button>
</form>
Required and Placeholder Attributes

Если обязательное поле остается пустым и форма отправляется, поле будет подсвечено.

15. Атрибут Autofocus

Опять же, HTML5 снимает необходимость использования Javascript-решений. Если конкретное поле ввода должно быть выбрано по умолчанию (с фокусом), теперь мы можем использовать атрибут autofocus.

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

Любопытно, пока я сам предпочитаю использовать более XHTML подход(с использованием кавычек и т.д.) и пишу "autofocus=autofocus", хоть это и странно. Таким образом, скоро мы будем использовать подход с использованием одного ключевого слова.

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

Можно больше не полагаться на сторонние плагины, чтобы воспроизводить аудио. В HTML5 определен элемент <audio>. Ну или по-крайней мере мы можем не беспокоиться об этих плагинах. В настоящее время только самые последние браузеры предлагают поддержку HTML5 аудио. В то же время, по-прежнему считается хорошим тоном обеспечивать обратную совместимость.

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />	
	Загрузи этот файл
</audio>

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

Когда Safari загружает страницу, браузер может не распознать .ogg формат, пропустит его и, соответственно, обратиться к mp3 версии. То учти, что IE, как обычно, не поддерживает воспроизведение аудио, а Opera 10 и более ранние версии могут работать только с .wav файлами.

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

Также как элемент <audio>, мы также можем использовать HTML5 видео в новых браузерах. На самом деле, совсем недавно YouTube анонсировал новый встроенную поддержку HTML5 видео для своих роликов, для браузеров, которые поддерживают эту технологию. К сожалению, опять же, потому что HTML5 спецификация не определяет конкретного кодека для видео, решение о выборе кодека остается за разработчиками браузеров. Пока Safari и Internet Explorer 9 могут поддерживать видео в формате H.264 (который могут вопроизводить Flash-плееры), Firefox и Opera используют свободные форматы Theora и Vorbis. Опять же, для отображения HTML5 видео, ты должен учитывать оба формата.

<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">Загрузи это видео</a> </p>
</video>

Chrome может корректно обрабатывать видео, которое кодировано в форматах "ogg" и "mp4".

Есть несколько моментов, на которые стоило бы обратить внимание.

  1. Мы не обязаны объявлять атрибут type; однако, если мы не будем объявлять этот атрибут, браузер должен будет определить его самостоятельно. Можно сэкономить немного пропускной способности, если самому объявить атрибут type
  2. Не все браузеры понимают HTML5 видео. Под элементом source, мы можем также предложить ссылку для скачивания или встроенную Flash-версию видео. Твое дело.
  3. Атрибуты controls и preload будут более подробно рассмотрены в слелующих двух пунктах.

18. Предзагрузка видео.

Атрибут preload делает именно то, о чем ты мог бы предположить. Хотя изначально ты должен решить хочешь ли ты, чтобы браузеры осуществлял предварительную загрузку видео. Так ли это необходимо? Возможно, если посетитель получает доступ к странице, которая специально создана для отображения видео, несомненно видео предварительно должно быть загружено, тем самым сэкономив пользователю немного времени. Видео будет предварительно загружаться, если имеется следующее объявление preload="preload" или просто добавлен атрибут preload. Я предпочитаю последний вариант, так как он менее многословный.

<video preload>

19. Отображение контрольной панели

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

<video preload controls>
Options

Только, пожалуйста, помни, что каждый браузер воспроизводит свой плеер по-своему.

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

Как часто ты пишешь регулярные выражения для проверки определённых текстовых полей? Но благодаря новому атрибуту 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 знаков.

Обрати внимание, что мы объединили все новые атрибуты!

Если ты не знаком с регулярными выражениями, направляйся сюда.

21. Определение поддерживаемых атрибутов

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

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

На самом деле, это достаточно популярный метод определения браузерной совместимости. Библиотека jQuery использует данный метод. В коде, приведенном выше, мы создаем новый элемент input, и сразу же определяем распознается ли атрибут pattern для этого элемента. Если да - браузер поддерживает данную функциональность.

<script>
if (!'pattern' in document.createElement('input') ) {
	// реализация клиент/серверной проверки
}
</script>

Помни, что все это основывается на JavaScript!

22. Маркировка элементов

Подумай о подсвеченной маркировке элемента. Строка, помещенная в данный тэг, должна согласовываться с текущими действиями пользователя. Например, если я ищу "Открой своё сознание" на каком-либо блоге, я могу использовать немного Javascript-кода для того, чтобы обвернуть каждое появление этой строки с помощью тэгов <mark>.

<h3> Результаты поиска </h3>
<p> Они прервались только после того, как Квато сказал <mark>"Открой свое сознание"</mark>. </p>

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

Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные divы. Сейчас мы можем пользоваться элементами header, arcticle, section и footer...Если ли четко определенные моменты, когда следует использовать div? Конечно!

Divы должны использоваться, когда нет более лучшего элемента для данной задачи.

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

24. Что необходимо немедленно начать использовать.

Ведутся разговоры, что HTML5 не будет закончен до 2022, поэтому многие люди продолжают его игнорировать, что является большой ошибкой. На самом деле, есть несколько функций HTML5, которые мы можем использовать в своих проектах прямо сейчас! Ну а более простой, чистый код - это всегда хорошо, как минимум. В сегодняшнем небольшом обучаещем видео, я покажу несколько из них


Подпишитесь на нашу YouTube страницу, чтобы посмотреть все наши видео-уроки!

25. Что не является HTML5

Люди могут быть прощены за то, что удивительные Javascript малообъемные переходы, сгруппированы во всеобъемлющем HTML5. Эй, даже Apple непреднамеренно способствал этой идее. Для интересующихся "не разработчиков" это простой способ соответствовать современным веб-стандартам. Однако, для нас, несмотря на кажущуюся семантичность, важно понимать, что это не HTML5.

  1. SVG: Не HTML5. По-крайней мере, 5 лет.
  2. CSS3: Не HTML5. Это CSS.
  3. Геолокация: Не HTML5.
  4. Хранилище на стороне клиента: Не HTML5. Понятие изначально фигурировало в спецификации, но позже оно было удалено из нее, так как некоторые специалисты были обеспокоены тем, что спецификация становилась слишком сложной. И теперь эта технология выведена в отдельную спецификацию.
  5. Web Sockets: Не HTML5. Также было выведено в отдельную спецификацию.

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

26. Атрибут Data

Сейчас мы официально имеем поддержку особых, пользовательских атрибутов для всех HTML элементов. В то время как, ранее мы могли иметь дело с таким конструкциями:

<h1 id=someId customAttribute=value> Спасибо, Тони! </h1>

...валидатор подобную конструкцию мог не пропустить. Но сейчас, когда мы уже не относим придуманный нами атрибут к атрибуту "data", мы можем официально использовать этот метод. Если вы хоть раз передавали важную информацию посредством имени такого атрибута, как class(возможно для использования в Javascript), то эта новая возможность является большим подспорьем!

HTML сниппет

<div id="myDiv" data-custom-attr="Значение"> Бла бла бла </div>

Получение значения пользовательского атрибута

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr'); 
alert(attr); // Значение

Также этот метод может быть использован в твоих CSS, как и в этом глупом и хромом примере по 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="Я сказал не трогай меня!"> Не трогай меня  </h1>

</body>
</html>

Ты можешь увидеть демо размещенного выше эффекта на JSBIN.

27. Элемент вывода

Как ты, возможно, догадался элемент output используется для вывода результатов вычислений. Например, если ты хочешь отобразить координаты курсора мыши или сумму нескольких чисел, эти данные должны быть помещены в элемент output.

В качестве простого примера, давай вставим сумму двух чисел в пустой элемент output с помощью Javascript после того, как кнопка submit будет нажата.

<form action="" method="get">
	<p> 
10 + 5 = <output name="sum"></output> 
	</p>
	<button type="submit"> Рассчитать </button>
</form>

<script>
(function() {
	var f = document.forms[0];
	
	if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
	f['sum'].value = 15;
	e.preventDefault();
}, false);
	}
	else { alert('Твой браузер ещё не готов.'); }
})();
</script>

Просмотри результат выполнения

Пожалуйста, только учти, что поддержка элемента output до сих пор немного нераспространенная. Во время написания этой статьи, у меня получалось нормально использовать этот элемент только в Opera. Что и было отражено в коде, приведенном выше. Если браузер не распознает этого элемента, то он просто сообщит вам об этом. В противном случае, браузер определит элемент вывода с именем "sum" и установит его значение, равное 15, соответственно, после того, как форма будет отправлена на сервер.

Output element

Элемент output может также содержать атрибут for, который отражает имя элемента, с которым он связан, подобно логике работы атрибута label.

28. Создание ползунков

HTML5 предоставляет новый вид элементов input - range

<input type="range">

Особенно примечательно, что он может содержать атрибуты min, max, step и value и др. Хотя только Opera сейчас поддерживает это новшество полностью, будет просто восхитительно, когда мы сможем в полной мере пользоваться этой технологией.

Для быстрой демонстрации, давайте создадим ползунок, который позволит пользователям оценить насколько хорош "Total Recall". Мы не будем создавать приближенное к реальной жизни решение, а просто покажем простоту реализации.

Шаг 1: Разметка

В начале создадим разметку.

<form method="post">
	<h1> Total Recall Awesomness Gauge </h1>
	<input type="range" name="range" min="0" max="10" step="1" value="">
	<output name="result">  </output>
</form>
Unstyled range input

Заметь, для того, чтобы установить min и max значения, мы можем всегда определить какой step(шаг) будет использоваться при переходе. Если step равен 1, будет доступно 10 значений для выбора. Мы также можем воспользоваться преимуществом нового элемента output, с которым мы ознакомились в предыдущем совете.

Шаг 2: CSS

Далее мы добавим немного стилей. Мы также используем :before и :after для информирования наших пользователей о том, какие значения определены в качестве минимального (min) и максимального (max) значения. Большое спасибо Реми и Брюсу, которые научили меня данному трюку в статье "Вступление в HTML5."

body {
	font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
	text-align: center;
}
input { font-size: 14px; font-weight: bold;  }

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

output { 
	display: block;
	font-size: 5.5em;
	font-weight: bold;
}

В коде, приведенном выше, перед и после нашего ползунка мы добавилии значения, которые использовали в качестве min и max соответственно.

Styled Range

Шаг 3: Javascript

Напоследок мы:

  • Определяем поддерживает ли браузер эту технологию. Если нет - мы предупреждаем пользователя, что демо не будет работать.
  • Динамично обновляем элемент output, если пользователь двигает слайдер.
  • Отслеживаем событие, когда пользователь уводит курсор мыши от слайдера, считываем значение и сохраняем его в локальном хранилище.
  • Затем, когда пользователь в следующий раз обновит страницу, ползунок и поле вывода будут автоматически устанавливаться в свое последнее состояние.
(function() {
	var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 
	
	// Определяем является ли текущий браузер одним из клевых ребят, который поддерживает создание ползунков
	var o = document.createElement('input');
	o.type = 'range';
	if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');

	// Устанавливаем начальные значения ползунка и поля вывода значениями из локального хранилища, или значением 5
	range.value = cachedRangeValue;
	result.value = cachedRangeValue;

	// Когда пользователь сделает выбор, обновить локальное хранилище
	range.addEventListener("mouseup", function() {
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
	}, false);
	
	// Отображаем выбранное число во время движения ползунка
	range.addEventListener("change", function() {
result.value = range.value;
	}, false);
	
})();
Styled Range with JS

Готовы к решению реальных задач? Возможно не до конца, но это действительно весело готовиться к этому!

Загрузи исходники кода, и попробуй все примеры самостоятельно. Но только используй Opera.

Благодарю за прочтение статьи! Мы рассмотрели достаточно много материала, но на самом деле лишь поверхностно коснулись того, что возможно в HTML5. Я надеюсь, это послужит хорошей основой для дальнейшего развития!

Advertisement