Что нового в HTML 5.2?

От автора: Меньше месяца назад HTML 5.2 стал официальной рекомендацией W3C (REC). Когда спецификация доходит до этапа REC, это значит, что она получила поддержку членов W3C и директора, и W3C официально рекомендует ее реализацию в браузерах, а также внедрение в веб-страницы авторами.

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

Новые функции

Нативный элемент dialog

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

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

Диалоговое окно создается с помощью тега dialog.

<dialog> <h2>Dialog Title</h2> <p>Dialog content and other stuff will go here</p>
</dialog> 

По умолчанию диалоговое окно скрыто из виду (и из DOM), пока не будет применен атрибут open.

<dialog open> 

Атрибут open можно переключать, вызывая методы show() и close(), доступные на любом HTMLDialogElement.

<button id="open">Open Dialog</button> <button id="close">Close Dialog</button> <dialog id="dialog"> <h2>Dialog Title</h2> <p>Dialog content and other stuff will go here</p>
</dialog> <script> const dialog = document.getElementById("dialog"); document.getElementById("open").addEventListener("click", () => { dialog.show();
}); document.getElementById("close").addEventListener("click", () => { dialog.close();
});
</script> 

Тег dialog уже поддерживается в Chrome, в Firefox поддержка по флагу.

Использование Payment Request API из iFrame

Payment Request API – нативная альтернатива форм оформления заказов. Ее цель – предоставить стандартизированный и однообразный метод проведения платежей в интернете для пользователей, переместив обработку получения информации о платеже в браузер, а не как сейчас, когда у каждого сайта своя форма оформления заказа.

До HTML 5.2 запросы по платежам нельзя было посылать из iframe’ов, вставленных в документ. Сторонние вставные решения по оплате (Stripe, Paystack) просто не могли использовать это API, так как их интерфейс оплаты обрабатывался только внутри iframe.

HTML 5.2 представил атрибут allowpaymentrequest. Примененный к iframe, он позволяет использовать Payment Request API, пока пользователь находится на веб-странице хостинга.

<iframe allowpaymentrequest> 

Размеры для иконок Apple

Для определения иконки страницы мы используем <link rel=»icon»> в шапке документа. Для задания размеров иконок используется атрибут sizes.

<link rel="icon" sizes="16x16" href="path/to/icon16.png"> <link rel="icon" sizes="32x32" href="path/to/icon32.png"> 

Использовать этот атрибут не обязательно, но он позволяет браузерам самим решать, какой размер иконки использовать на разных размерах. В частности, у всех устройств свой оптимальный размер иконок.

До HTML 5.2 атрибут sizes был валиден только, если связь в link была icon. Однако Apple устройства под управлением iOS не поддерживают атрибут sizes. Поэтому Apple представила специальную связь для своих устройств appple-touch-icon, которую можно использовать для определения используемой иконки на устройствах.

В HTML 5.2 спецификация позволяет использовать атрибут sizes со связью apple-touch-icon, а не только icon. Это позволит загружать иконки разных размеров на разные устройства Apple. Насколько мне известно, устройства Apple до сих пор не поддерживают атрибут sizes. Это изменение будет полезно, когда появится поддержка.

Новые валидные практики

Помимо новых функций HTML 5.2 одобрили некоторые практики написания HTML, которые ранее считались невалидными.

Несколько элементов main

Элемент main представляет основной контент веб-страницы. Повторяющийся на нескольких страницах контент можно поместить в header, section и другие теги, а тег main предназначен для контента, который специфичен и уникален для определенной страницы. Поэтому до HTML 5.2 тег main должен был быть уникальным в DOM для страницы, чтобы пройти валидацию.

С распространением одностраничных приложений придерживаться этого правила сложно. Могут быть ситуации, когда в DOM много тегов main, но только один показывается пользователю в определенный промежуток времени.

В HTML 5.2 теперь можно использовать несколько тегов main в разметке, но только один должен быть виден пользователю в любое время. Все дополнительные теги необходимо прятать через атрибут hidden.

<main>...</main> <main hidden>...</main> <main hidden>...</main> 

Как мы знаем, в CSS есть несколько способов спрятать элемент. Но все дополнительные теги main нужно прятать именно через атрибут hidden. Любые другие методы скрытия элемента (например, display: none; или visibility: hidden;) будут невалидны.

Стили в body

Обычно инлайновый CSS, определенный через тег style, размещается внутри head документа. По мере роста компонентной разработки разработчики стали писать и помещать стили прямо в элементы, к которым они относятся.

В HTML 5.2 теперь можно определять блок style в любом месте внутри тега body. То есть теперь стили можно размещать ближе к тому месту, где они используются.

<body> <p>I’m cornflowerblue!</p> <style> p { color: cornflowerblue; } </style> <p>I’m cornflowerblue!</p>
</body> 

Тем не менее, стоит отметить, что стили лучше размещать внутри head для улучшения производительности. Из спецификации: «Элемент style желательно использовать в теге head документа. Использование style внутри body может привести к повторному применению стилей, вызвать повторную сборку макета и/или перерисовку. Поэтому его следует использовать осторожно.»

Заголовки в legend

В формах тег legend представляет подпись к полям формы внутри fieldset. До HTML 5.2 контент легенды был просто чистым текстом. Сейчас в него можно включать заголовки.

<fieldset> <legend><h2>Basic Information</h2></legend> <!-- Form fields for basic information -->
</fieldset> <fieldset> <legend><h2>Contact Information</h2></legend> <!-- Form fields for contact information -->
</fieldset> 

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

Удаленные функции

Из HTML 5.2 было удалено несколько элементов:

Новые невалидные практики

Некоторые практики разработки стали невалидны.

Никаких инлайновых, обтекающих или блоковых дочерних элементов в <p>

В HTML 5.2 дочерними элементами тега <p> могут выступать только фразы. То есть следующие типы тегов больше нельзя вкладывать в параграф:

Больше нет строго Doctype

Наконец-то можно попрощаться со следующими строгими типами документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Источник: https://bitsofco.de/

Редакция: Команда webformyself.