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

0 ∞

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

Содержание

Новые возможности

Элемент <dialog> 

Из всех нововведений HTML 5.2 наибольшую радость вызывает появление элемента <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>
Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

Элемент <dialog> уже поддерживается в браузере Google Chrome.

Элемент <dialog>

Использование Payment Request API из фреймов iFrames

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

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

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

<iframe allowpaymentrequest>

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

Для определения иконок разного размера мы используем атрибут sizes.

<link rel="icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="icon" sizes="32x32" href="path/to/icon32.png">
Основы работы с цветом в html, таблица и коды цветов html

Данный атрибут разрешает агентам пользователя выбирать размер иконки использовать при наличии множества вариантов.

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

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

Изменения в синтаксисе

В HTML 5.2 появились новые правила синтаксиса, которые ранее были недействительными.

Множественные элементы <main> 

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

В HTML 5.2 теперь можно использовать несколько элементов <main>  в разметке. При этом пользователь видит только один из них. Остальные должны быть скрыты при помощи атрибута hidden.

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

Любой другой метод скрытия элемента (например,  display: none; или visibility: hidden;) будет недействителен.

Стили в <body>

Обычно элемент <style>  располагается в заголовке <head>  HTML- документа. В HTML 5.2 разрешено определение встроенного блока  <style>  в любом месте раздела  <body> . Это означает, что теперь можно располагать стили там, где они применяются.

<body>
    <p>I’m cornflowerblue!</p>
    <style>
        p { color: cornflowerblue; }
    </style>
    <p>I’m cornflowerblue!</p>
</body>
Абзац в HTML

В соответствие со спецификацией, в целях повышения производительности стили должны преимущественно располагаться в разделе <head>:

Встроенный стиль, определенный в HTML-документе, все еще будет применяться к элементам, определенным до него. Вот почему это может стать проблемой.

Заголовки в элементах <legend>

Тег <legend> создает заголовок для элементов формы, сгруппированных с помощью <fieldset>. До HTML 5.2 элемент <legend> должен был содержать только текст. Теперь в нем можно использовать заголовки:

<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:

  • keygen: использовался для генерации открытых ключей форм.
  • menu и menuitem: использовались для создания навигации или контекстных меню.

Новые недопустимые практики

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

Отсутствие встроенных, плавающих или заблокированных дочерних элементов <p>

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

  • Встроенные блоки;
  • Встроенные таблицы;
  • Плавающие и фиксированные блоки.

Отсутствие строгих типов документов

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

<!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">