WebDesignMagazine.ru – Журнал о веб-дизайне

HTML5 сниппеты для улучшения работы веб-сайта

0

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

Вводные типы URL и email

HTML5 представил новые типы ввода URL и электронной почты. Они позволяют писать более семантически правильный код и делают заполнение формы на мобильных устройствах намного легче, отображая специальные кнопки (например @ или .com) в зависимости от типа ввода.

URL атрибуты в действии:

А также “email” атрибуты… Пожалуйста, обратите внимание на “pattern” атрибут, о котором мы объясним далее.

Regexp шаблоны для проверки форм

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

Следующим является сниппет для проверки адресов электронной почты:

Это для надежных паролей:

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

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

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

HTML5-видео с Flash резервом

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

Автозаполнение с HTML5 datalist

С использованием datalist элемента, HTML5 позволяет вам создавать список данных для автозаполнения поля ввода. Супер полезная штука!

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

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

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

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

HTML5 предварительная загрузка

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

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

Воспроизведение аудиофайлов с HTML5

HTML5 может воспроизводить видео, как показано было раньше, и он также может воспроизводить аудио файлы, такие как популярный MP3 формат . В качестве примера, вот вам минималистский, но функциональный аудиоплеер.

Все эти сниппеты определенно помогут вам в разработке ваших проектов. Дополнительно вы можете узнать о 8 новых сниппетах для HTML5 и CSS3 в нашей новой статье – 8 HTML5 и CSS3 сниппетов для разработки и дизайна новых проектов

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.