Небольшое вступление о HTML 5.1
Выпуск стандарта HTML5 около двух лет назад был большим событием в сообществе веб-разработчиков. Не только потому, стал доступен внушительный список новых возможностей, но и потому, что это было первое крупное обновление в HTML, так как HTML 4.01 был выпущен в 1999 году. Вы все еще можете увидеть некоторые сайты которые хвастаются об использовании “современного” стандарта HTML5 сегодня.
К счастью, нам не пришлось очень долго ждать следующей итерации HTML. В октябре 2015 года W3C начал работу над HTML 5.1 с целью закрытию некоторых вопросов, которые остались открытыми в HTML5. После многих итераций, он достиг состояния “Candidate Recommendation” (рекомендации кандидата) в июне 2016 года, “Proposed Recommendation” (рекомендации) в сентябре 2016 года и, наконец, рекомендация W3C в ноябре 2016 года. Те кто следил за этим развитием, наверное заметили, что это был тернистый путь. Много изначальных спецификаций HTML 5.1 были сняты из-за плохого дизайна или отсутствия поддержки производителей браузеров.
В то время как HTML 5.1 все еще находится в разработке, W3C уже приступила к работе над HTML 5.2, который, как ожидается, будет выпущен в конце 2017. В то же время, вот краткий обзор некоторых из интересных новых функций и усовершенствований, введенных в 5.1. Поддержки браузеров по-прежнему не хватает для этих функций, но мы будем говорить вам, какие браузерах, могут быть использованы для тестирования каждого примера.
Версии браузеров на момент написания статьи:
- Firefox 50
- Chrome 54
Контекстное меню с помощью menu и элементов menuitems
В HTML версии 5.1 введены два различных вида элементов меню: context и toolbar. Первый используется для расширения меню собственного контекста, как правило, отображается, щелкнув правой кнопкой мыши на странице, а последняя была предназначена для определения простых компонентов меню. В процессе разработки, панель инструментов была удалена, но контекстное меню по-прежнему осталась.
Вы можете использовать тег menu для определения меню, состоящее из одного или нескольких элементов menuitem, а затем привязать его к любому элементу, используя атрибут contextmenu.
Каждый элемент menuitem может иметь один из трех типов:
checkbox- позволяет выбрать или отменить выбор опции;command- позволяет выполнить действие по клику;radio- позволяет выбрать один вариант из группы.
Вот простой пример использования, который работает в Firefox 50, но не работает в Chrome 54.
В поддерживаемом браузере, контекстное меню должно выглядеть так:
Details и элементы Summary
Новые теги details и элементы summary реализуют возможность показывать и скрывать блок дополнительной информации, щелкнув на элементе. Это то, что часто делается с помощью JavaScript, теперь может быть сделано с помощью элемента details с элементом summary внутри него. Нажатие на резюме переключает видимость остального содержимого из элемента details.
Следующий пример был протестирован в Firefox и Chrome.
Это демо в поддерживаемом браузере должна выглядеть так:
Другие типы входных данных - month, week и datetime-local
Арсенал типов входных данных был дополнен еще тремя: месяц, неделя и местная дата-время.
Первые два из них позволят вам выбрать неделю или месяц. В Chrome, оба они отображаются в виде выпадающего календаря, который либо позволяет выбрать конкретный месяц года либо неделю. При работе из JavaScript вы получите доступ к значениям имеющую примерно такой вид: "2016-W43" при входных данных week и "2016-10" при входных данных month.
Первоначально в 5.1 введены две входных даты-времени - datetime и datetime-local. Разница заключалась в том, что datetime-local всегда выбирается время в часовом поясе пользователя, в то время как ввод datetime также позволит вам выбрать другой часовой пояс. Во время разработки, типа datetime был убран и теперь остается только datetime-local. Входные данные datetime-local состоят из двух частей - дата, которая может быть выбрана таким же образом на неделю или месяц, а время часть, которая может быть набран в отдельности.
Вы можете найти некоторые жизненные примеры всех этих новых типов ввода в поле ниже CodePen. Она работает в Chrome, но пока не работает в Firefox:
Это демо в поддерживаемом браузере должна выглядеть так:
Адаптивные изображения
HTML 5.1 включает в себя ряд новых возможностей для реализации адаптивных изображений без использования CSS. Каждая из этих функций охватывает их индивидуальный случай использования.
Атрибут изображения srcset
Атрибут изображения srcset позволяет перечислить несколько альтернативных источников изображения, которые различаются по плотности пикселей. Это позволяет браузеру, выбрать изображение соответствующего качества для устройств пользователя (определяется его собственной плотностью пикселей, уровень масштабирования или скорости сети). Например, вы можете захотеть, чтобы обеспечить более низкое разрешение изображения для пользователей с небольшими телефонами на более медленных сетях мобильной связи.
Srcset принимает разделенный запятыми список URL изображений каждый со своим собственным х модификатором, который описывает соотношение пикселей (количество физических пикселей в CSS пикселей) наиболее подходящих для каждого изображения. Простой пример выглядит так:
<img src="/assets/img/bg.jpg" srcset="
/assets/img/bg.jpg 1x,
/assets/img/bg.jpg 2x,
/assets/img/bg.jpg 3x"
>
В этом случае, если соотношение пикселя пользователей равен 1 будет отображаться с низким разрешением изображения, для 2 будет показано c высоким разрешением, для 3 будет выбран со сверхвысоким разрешением.
Кроме того, вы можете выбрать для отображения изображений различных размеров вместо различных соотношений пикселей. Это может быть сделано с помощью w модификатора:
<img src="/assets/img/bg.jpg" srcset="
/assets/img/bg.jpg 600w,
/assets/img/bg.jpg 1000w,
/assets/img/bg.jpg 1400w"
>
В этом случае, с низким разрешением изображения определяется как 600px шириной, высоким разрешением должно быть 1000px и ультравысоким разрешением 1400px.
Атрибут размера изображения
Вы можете отображать изображения по-разному в зависимости от размера экрана пользователя. Например, вы могли бы показать серию изображений, изложенных в двух столбцах для широких экранов и выложенных только в одном для более узких экранах. Это может быть достигнуто с использованием атрибутов sizes. Это позволяет переводить ширину экрана в пространство, выделенное для изображения, а затем выбрать соответствующее изображение, используя атрибут srcset. Вот пример:
<img src="/assets/img/bg.jpg" sizes="(max-width: 40em) 100vw, 50vw"
srcset="/assets/img/bg.jpg 600w,
/assets/img/bg.jpg 1000w,
/assets/img/bg.jpg 1400w"
>
Атрибут размеры определяет ширину изображения в виде 50% от ширины окна просмотра, когда ширина окна просмотра больше 40em, или 100% от ширины, когда ее меньше или равна 40em.
Элемент picture
Если это не достаточно для того, чтобы изменить размер изображения для каждого экрана, и вы должны иметь возможность показать совершенно разные образы, то вы можете использовать элемент picture. Это позволяет определить изображения с различных источников для различных размеров экрана, обернув вашего <img> с элементом <picture> и указав <source> элементы несколько дочерних. Элемент <source> затем действует в качестве источника URL-адресов для загрузки изображений.
<picture>
<source media="(max-width: 20em)" srcset="
/assets/img/bg.jpg 1x,
/assets/img/bg.jpg 2x,
/assets/img/bg.jpg 3x
">
<source media="(max-width: 40em)" srcset="
/assets/img/bg.jpg 1x,
/assets/img/bg.jpg 2x,
/assets/img/bg.jpg 3x
">
<img src="/assets/img/bg.jpg">
</picture>
Проверка форм с помощью form.reportValidity()
HTML5 определяет метод form.checkValidity(), который позволяет проверить входные данные формы вне определенных валидаторов и возвращает логическое значение в качестве результата. reportValidity() позволяет проверять форму и получить результат, но дополнительно сообщает об ошибках для пользователя прямо в браузере. Вот CodePen, чтобы продемонстрировать результат (протестирован в Firefox и Chrome):
Если поле ввода оставить пустым и нажать проверку, тогда выведется ошибка. На деле, как и ожидалось, это выглядит примерно так:
Свойства allowfullscreen для фреймов
Новый булевый атрибут allowfullscreen для фреймов позволяет контролировать, может ли содержимое представить себя на полном экране с помощью метода requestFullscreen().
Проверка орфографии с помощью element.forceSpellCheck()
Новый метод element.forceSpellCheck() позволяет запускать проверку орфографии на текстовых элементах. Этот метод является особенным, так как он пока не доступна ни в одном из браузеров. Потенциально, он может быть использован для проверки орфографии на элементы, которые не были непосредственно редактированы пользователем.