10 новых функций HTML 5.1 и как их использовать в IRL
Спецификация HTML претерпела серьезные изменения пару недель назад, когда W3C опубликовал его новая рекомендация HTML 5.1 в ноябре 2016 года. В его недавнее сообщение в блогеW3C назвал новый основной выпуск золотым стандартом, так как HTML 5.1 предоставляет нам новые способы использования HTML для создания более гибких веб-интерфейсов.
В этой статье мы рассмотрим его новые функции, которые вы можете использовать, не касаясь JavaScript, однако улучшения фона JavaScript также замечательны, как вы можете увидеть в официальный журнал изменений, Обратите внимание, что в настоящее время не все браузеры поддерживают все эти функции, поэтому не забудьте проверьте поддержку браузера прежде чем использовать их в производстве. Если вы заинтересованы в дальнейшей разработке стандарта HTML, вы можете проверить рабочий проект HTML 5.2 также.
Рекомендуемое чтение: взгляд в глаза: доступность веб-стандартов ARIA и приложений HTML
Определите несколько ресурсов изображений для адаптивного дизайна
В HTML 5.1 вы можете использовать пометьте вместе с атрибутом srcset, чтобы сделать возможным выбор адаптивного изображения. тег представляет контейнер изображений, который позволяет разработчикам объявлять различные ресурсы изображений для адаптации к размеру области просмотра UA, плотности пикселей экрана, типу экрана и другим параметрам, используемым в адаптивном дизайне.
сам тег ничего не отображает, он функционирует просто как контекст для множества ресурсов изображения. Вам необходимо объявить ресурс изображения по умолчанию как значение атрибута src тег, и альтернативные ресурсы изображения входят в атрибуты srcset а также элементы.
Пример кода:
Показать или скрыть дополнительную информацию
С а также теги, вы можете добавить расширенную информацию к контенту. Дополнительная информация не отображается по умолчанию, но если пользователи заинтересованы, у них есть возможность взглянуть. В вашем коде вы должны разместить
тег внутри
, После
Вы можете добавить дополнительную информацию, которую хотите скрыть.
Пример кода:
Сообщение об ошибке
Мы не смогли закончить загрузку этого видео.
Имя файла:
yourfile.mp4
Размер файла:
100 МБ
Продолжительность:
00:05:27
Вот как этот пример кода выглядит в Firefox 50.0.2: 3. Добавьте функциональность в контекстное меню браузера
С element и его атрибут type = “context”, вы можете добавить пользовательские функции в контекстное меню браузера. Вам необходимо назначить