Сниппеты HTML5 поднимающие ваш сайт на следующий уровень

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

Поля ввода с типами Url и Email

В HTML5 введены новые типы полей ввода: url и email. Новые типы позволяют писать более правильный и простой HTML код. Отметим, что отображение таких полей на мобильных устройствах уже поддерживается с помощью дополнительных специальных кнопок (таких, как @ или .com).

Далее пример с атрибутом url:

Также присутствует пример с атрибутом email. Обратите внимание на атрибут pattern (о нем подробнее ниже).

Источник: http://davidwalsh.name/html5-email

Шаблоны Regexp для форм валидации

Раньше, если вам нужна были проверка данных на стороне клиента при отправке форм, то вы писали JavaScript код. Но сейчас с HTML5 вам нужен лишь атрибут pattern, с помощью которого вы будете задавать шаблоны регулярных выржений для проверки данных.

С помощью следующего сниппета мы будет проверять правильность ввода email адреса:

Вот еще один для проверки сложного пароля:

А вот еще один для проверки номера телефона:

Источник: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

Контекстные меню на HTML5

Контекстное меню HTML5 позволяет вам добавлять элементы к контекстному меню, вызываемому с помощью правой кнопки мыши.
В данный момент времени поддержка элемента contextmenu была только в Firefox, так что ждем, когда среагируют остальные браузеры, а пока смотрим пример реализации.

Источник/пример: http://speckyboy.com/2013/02/13/quick-tip-the-html5…

Видео на HTML5 с обратной поддержкой во Flash

Одной из самых замечательных особеностей в HTML5 — это проигрывание видео-файлов без использования Flash. Но так как в старых браузерах нет поддержки стандарта HTML5, то в сниппет встроена обратная поддержка Flash. В следующем примере реализован показ файла mp4 и ogv.

Источник: http://camendesign.com/code/video_for_everybody

Автозавершение с помощью HTML5 datalists

Используя элемент datalist, можно создавать список данных для автозавершения полей ввода. Очень полезный код!

Источник/пример: http://davidwalsh.name/datalist

Скрытые элементы с помощью HTML5

В HTML5 был представлен атрибут hidden, с помощью которого можно прятать определенные элементы без использования свойства CSS display:none.

Источник: http://html5demos.com/hidden

Элемент с автофокусом

Атрибут autofocus позволяет принудительно ставить фокус на выбранном элементе. Это очень полезный код, например, для поисковых страниц.

Источник: http://davidwalsh.name/autofocus

Предварительная выборка в HTML5

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

Вот пример предварительной загрузки изображения:

Источник: http://www.catswhocode.com/blog/mastering-html5-prefetching

Проигрывание аудио на HTML5

HTML5 проигрывает не только видео, но и аудио-файлы, например, такого популярного формата, как mp3. Далее пример минималистичного, но функционального аудио-плеера.

Источник: http://www.catswhocode.com/blog/mastering-the-html5-audio-property


Оставить комментарий