HTML 5.1: 14 новых возможностей с объяснениями и практическим использованием

HTML5 принадлежит Консорциуму Всемирной паутины (W3C), предоставляющему стандарты в вебе для интероперабельности протоколов со всего мира. В ноябре 2016 W3C обновил давно работающий HTML 5 — первое минорное обновление за 2 года. Многие исходные фичи HTML 5.1 были отброшены из-за неудачного дизайна и отсутствия поддержки браузерных вендоров.

Хотя в HTML 5.1 перенесли несколько элементов и улучшений, это все еще минорное обновление. Некоторые новые элементы содержат комбо-теги, теперь включающие <dialog>, <details>, <summary> и <picture>, давая разработчикам еще больше пространства для самовыражения.

W3C уже начал работу над черновиком HTML 5.2, ожидаемым к концу 2017. Пока представляем интересные новые фичи и улучшения версии 5.1. Можно использовать эти фичи без JavaScript. Не все браузеры поддерживают эти фичи, лучше проверьте поддержку перед использованием в продакшене.

14. Предотвращение фишинга

Большинство людей, использующих target='_blank', не знают любопытный факт — вновь открытая вкладка может изменить window.opener.location на фишинговую страницу. Выполнит вредоносный JavaScript на открываетеле от вашего имени. Пользователи доверяют уже открытой странице, поэтому не подозревают.

Для полного устранения проблемы HTML 5.1 стандартизировал использование атрибута rel="noopener", разделяющего браузерные контексты. rel="noopener" можно использовать в тегах <a> и <area>.

<a href="#" target="_blank" rel="noopener"> Ссылка больше не создаст проблемы </a>

Читайте также: 24 инструмента CSS3 и HTML5 анимаций для дизайнеров

13. Гибкая обработка подписей фигур

Тег <figcaption> представляет подпись или легенду, ассоциированную с элементом <figure>, выступающим контейнером для визуалов — картинок, диаграмм, иллюстраций. В ранних версиях HTML <figcaption> мог использоваться только как первый или последний дочерний тег <figure>. HTML 5.1 ослабил это ограничение — теперь <figcaption> можно использовать где угодно внутри своего <figure> контейнера.

<article> <h1>Заголовок сегодняшних новостей </h1> <figure> <img src="petrolimage.jpeg" alt="Цены на бензин падают"> <figcaption>Мужчина заправляет машину на заправке</figcaption> </figure> <p>Это четвертый рост цен на бензин за два месяца и третий для дизеля за полторы недели.</p> </article>

12. Проверка орфографии

spellcheck — перечисляемый атрибут с ключевыми словами: пустая строка, true, false. Состояние true указывает, что у элемента должны проверяться орфография и грамматика. Метод element.forceSpellCheck() заставляет user agent сообщать об ошибках орфографии и грамматики в текстовом элементе, даже если пользователь никогда не фокусировался на элементе.

<p spellcheck="true"> <label>Имя: <input spellcheck="false" id="textbox"></label> </p>

11. Пустой option

Новая версия HTML позволяет создавать пустой элемент <option>. Он может быть дочерним элементом <optgroup>, <datalist> или <select>. Эта фича полезна при проектировании удобных форм.

10. Разрешение полноэкранного режима для фреймов

Булевый атрибут allowfullscreen, разработанный для фреймов, позволяет контролировать, может ли контент представиться на полный экран через метод requestFullscreen(). Например, iframe с встроенным YouTube-плеером. Атрибут allowfullscreen необходим для включения полноэкранного видео плеера.

<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>

9. Вложенные header и footer

HTML 5.1 позволяет вкладывать header и footer внутрь другого header. Можно добавить header или footer к элементу header, если они сами содержатся в секционном контенте. Фича полезна, если хотите добавить детализированные заголовки к семантическим секционным элементам, как <section> и <article>.

В коде ниже <article> содержит <header> с <aside>, который сам содержит <header>.

<article> <header> <h2>Урок: Как приготовить курицу</h2> <aside> <header> <h2>Об авторе: Том Хэнкс</h2> <p><a href="./tomhank/">Связаться!</a></p> </header> <p>Эксперт ни в чем, кроме кулинарии. Показ кулинарной книги.</p> </aside> </header> <p><ins>Влейте маринад в пакет с курицей и запечатайте. Удалите максимум воздуха и запечатайте. </ins></p> </article>

8. Изображения нулевой ширины

Новая версия HTML позволяет добавлять изображения нулевого размера. Фича используется, когда изображение не предназначено для пользователя. Если img используется для других целей, например, как часть сервиса подсчета просмотров страницы, используйте width и height со значением 0. Для нулевой ширины рекомендуется использовать пустые атрибуты.

<img src="theimagefile.jpg" width="0" height="0" alt="">

7. Валидация формы

Новый метод reportValidity() позволяет валидировать форму, получать результаты и сообщать об ошибках пользователю прямо в браузере. User agents могут сообщать более чем об одном нарушении ограничения, если элемент страдает от множественных проблем одновременно. В данном случае input "password" должен быть отмечен ошибкой, так как обязателен, но пуст.

<h2>Валидация формы</h2> <p>Введите данные</p> <form> <label> Обязательный ввод <input type="password" name="password" required /> </label> <button type="submit">Отправить</button> </form> <script> document.querySelector('form').reportValidity() </script>

6. Контекстное меню браузера

В HTML 5.1 можно использовать тег <menu> для определения меню из одного или нескольких элементов <menuitem>, и привязать его к любому элементу через атрибут contextmenu. ID элемента <menu> должен иметь то же значение, что и contextmenu атрибут элемента, к которому добавляем контекстное меню.

Каждый <menuitem> может иметь одну из трех форм:

• radio — выбор опции из группы
• checkbox — выбор или отмена опции
• command — выполнение действия при клике

<h2 contextmenu="popup-menu"> Правый клик для демо контекстного меню. </h2> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem> <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem> <menuitem type="radio" name="group1">Radio button a</menuitem> <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem> <menuitem type="checkbox" disabled>Disabled menu item</menuitem> </menu>

5. Использование криптографических nonce со скриптами и стилями

Криптографический nonce — случайно сгенерированное число, используемое только один раз, регенерируемое при каждом запросе страницы. Атрибут nonce можно использовать в элементах <script> и <style>.

Обычно используется Content Security Policy сайта для решения, должен ли определенный стиль или скрипт выполняться на странице. В коде значение захардкожено, но в реальности генерируется случайно.

<script nonce='d3ne7uWP43Bhr0e'> JavaScript код </script>

4. Обратная связь ссылок

Атрибут rev был определен в HTML 4, но не включен в HTML5. W3C решил вернуть rev для <a> и <link>. Атрибут rev задает отношение текущего и связанного документа в обратном направлении. Включен для поддержки широко используемого формата структурированных данных RDFa.

Пример двух документов, каждый с уроком, связь между ними через rel и rev:

//Документ с URL "chapter1.html" <link href="Lesson2.html" rel="next" rev="prev"> //Документ с URL "chapter2.html" <link href="Lesson1.html" rel="prev" rev="next"> <link href="Lesson3.html" rel="next" rev="prev">

3. Показать/скрыть информацию

Новые элементы <details> и <summary> позволяют добавлять расширенную информацию к контенту. Можно показать или скрыть блок дополнительной информации кликом на элемент. Дополнительная информация скрыта по умолчанию.

В коде нужно поместить <summary> внутрь <details>. После <summary> добавляете остальной контент для скрытия.

<section> <h3>Сообщение об ошибке</h3> <details> <summary>Этот файл не скачался из-за сетевой ошибки.</summary> <dl> <dt>Имя файла:</dt><dd>Passcode.txt</dd> <dt>Размер:</dt><dd>8 KB</dd> <dt>Код ошибки:</dt><dd>342a</dd> </dl> </details> </section>

2. Больше типов input

HTML input элементы расширены тремя новыми типами — week, month и datetime-local. Как следует из названий, первые два позволяют пользователю выбрать неделю или месяц. В зависимости от поддержки браузера оба рендерятся как выпадающий календарь для выбора конкретной недели или месяца года.

datetime-local задает поле ввода даты и времени без часового пояса. Данные выбираются похоже на month/week, время вводится отдельно.

<section> <h2> Week, Month и Datetime-local </h2> <form action="action_page.php"> Выбрать неделю: <input type="week" name="year_week"> <input type="submit"> </form> <form action="action_page.php"> День рождения (месяц и год): <input type="month" name="bdaymonth"> <input type="submit"> </form> <form action="action_page.php"> Присоединение (дата и время): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Отправить"> </form> </section>

1. Адаптивные изображения

W3C ввел новые фичи для реализации адаптивных изображений без CSS. Это…

Атрибут srcset изображения

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

Можно использовать srcset с модификатором x, описывающим пиксельное соотношение для каждого изображения. Как в примере, если пиксель пользователя равен 3, покажется high-res изображение.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, clicks/high-res.jpg 3x" >

Вместо разных пиксельных соотношений можно отображать изображения разного размера с модификатором w. В этом случае high-res задан как 1600px.

<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

Атрибут sizes изображения

Часто авторы хотят отображать разные изображения для разных размеров экрана. Это делается через sizes. Позволяет преобразовать ширину экрана в пространство, выделенное для изображения, и выбрать подходящее через srcset. Например…

<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >

Здесь sizes задает ширину изображения 100 % ширины вьюпорта, когда ширина вьюпорта больше 25em, или 60 % когда меньше или равно 25em.

Элемент picture

Элемент picture позволяет объявлять изображения с несколькими источниками для разных размеров экрана. Делается оборачиванием <img> в <picture> и описанием нескольких дочерних <source>.

Читайте также: 35+ полезных HTML и CSS фреймворков для веб-дизайнеров

Тег <picture> сам по себе ничего не отображает. Нужно объявить дефолтный источник как значение src атрибута, а альтернативные источники идут в srcset как показано…

<picture> <source media="(max-width: 25em)" srcset=" clicks/small/low-res.jpg 1x, clicks/small/medium-res.jpg 2x, clicks/small/high-res.jpg 3x "> <source media="(max-width: 60em)" srcset=" clicks/large/low-res.jpg 1x, clicks/large/medium-res.jpg 2x, clicks/large/high-res.jpg 3x "> <img src="clicks/default/medium-res.jpg"> </picture>