10 новых функций HTML 5.1 и как их использовать в IRL

Спецификация HTML получила капитальный ремонт пару недель назад, когда W3C опубликовал свой новая рекомендация HTML 5.1 в ноябре 2016 года. В своем последнем сообщении в блоге W3C назвал новый основной релиз Золотой стандарт, HTML 5.1 предоставляет нам новые способы использования HTML для создания более гибких веб-интерфейсов.

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

Обратите внимание, что в настоящее время не все браузеры поддерживают все эти функции, поэтому не забудьте проверьте поддержку браузера прежде чем использовать их в производстве. Если вы заинтересованы в дальнейшее развитие стандарта HTML, Вы также можете проверить рабочий проект HTML 5.2.

1. Определите несколько ресурсов изображений для адаптивного дизайна

В HTML 5.1 вы можете использовать пометить вместе с srcset атрибут сделать адаптивный выбор изображения возможный. тег представляет собой контейнер изображений что позволяет разработчикам объявить разные ресурсы изображения для того, чтобы приспособиться к UAРазмер области просмотра, плотность пикселей экрана, тип экрана и другие параметры, используемые в адаптивный дизайн.

сам тег ничего не отображает, он работает просто как контекст для нескольких ресурсов изображения. Вы должны объявить ресурс изображения по умолчанию в качестве значения ЦСИ атрибут тег и альтернативные ресурсы изображения идти в srcset атрибуты а также элементы.

Пример кода:

2. Показать или скрыть дополнительную информацию

С

а также

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

тег внутри

. После

пометить можно добавить дополнительную информацию ты хочешь спрятаться.

Пример кода:

 
 
Сообщение об ошибке
 
 
Мы не смогли закончить загрузку этого видео.
 
 
Имя файла:
yourfile.mp4
 
Размер файла:
100 МБ
 
Продолжительность:
00:05:27
 
 
 
 

Вот как этот пример кода выглядит в Firefox 50.0.2:

3. Добавьте функциональность в контекстное меню браузера

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

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

Пример кода:

Щелкните правой кнопкой мыши

бирка может есть три разных типа, «Флажок», «Команда» (к которому нужно добавить действие с помощью JavaScript), и радио. Можно добавить более одного пункта меню в контекстное меню, однако поддержка браузера для этой функции пока не очень хорошо. Chrome 54 не поддерживает его, а Firefox 50 допускает наличие только одного дополнительного контекстного меню. Ниже вы можете увидеть, как работает пример кода в Firefox 50.

4. Верхние и нижние колонтитулы гнезда

HTML 5.1 позволяет вам верхние и нижние колонтитулы гнезда если каждый уровень содержится в разделе контента. Примечание ниже представляет собой скриншот из документации W3C, и советует разработчикам о правильном способе вложения заголовка и нижнего колонтитула.

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

а также

. Пример кода ниже создает боковую панель внутри заголовка,