Webstacker

Онлайн-журнал с мира Web и Front End: Новости, статьи, хитрости и гайды на русском. Полезные и уникальные материалы для программистов и дизайнеров

Главная Фронтенд HTML Что нового в HTML 5.2?

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

  • Вещает:
  • Опубликовано:
  • Изменено:
Что нового в HTML 5.2?

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

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

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

Нативный тэг <dialog>

Из всех изменений в HTML 5.2 мы больше всего рады реализации тэга <dialog>, или же модального (диалогового) окна. Модальные окна невероятно распространены в Интернете, но каждая реализация в какой-то мере отличается. До этого времени не было универсальный решений с реализацией модальных окон, все веб-сайты использовали собственные варианты с Javascript и имели, очень даже часто, множество багов.

Новый тэг <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">Открыть модальное окно</button>
 <button id="close">Закрыть модальное окно</button>
<dialog id="dialog">
 <h2>Заголовок</h2>
 <p>Контент внутри</p>
 </dialog>

<script>
 const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {
 dialog.show();
 });

document.getElementById("close").addEventListener("click", () => {
 dialog.close();
 });
 </script>

Использование API запросов платежей из iframe-ов

API-интерфейс платежного запроса является родной альтернативой формам выписки. Он направлен на предоставление стандартизованного и последовательного метода осуществления платежей в Интернете для пользователей путем перемещения обработки получения информации о платежах в браузер, а не отдельных форм выписки на каждом веб-сайте.

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

В HTML 5.2 представлен атрибут allowpaymentrequest, который при применении к iframe позволит ему использовать API-интерфейс платежного запроса, когда пользователь находится на веб-странице хостинга:

<iframe allowpaymentrequest>

Размеры для Apple Icons

Чтобы определить значки веб-страниц, мы используем тэг <link rel = "icon"> в шапке нашего документа. Чтобы определить разные размеры значков, мы используем атрибут size.

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

Этот атрибут, хотя и не обязательный, но позволяет браузеру пользователя определять, какой размер иконки использовать, если доступны несколько размеров, учитывая то, что большинство устройств имеют свой собственный «оптимальный» размер иконки.

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

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

Изменения некоторых практик

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

Несколько тэгов <main> на одной странице

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

Однако с распространением одностраничных приложений часто придерживаться этого правила может быть сложно. Теперь могут быть случаи, когда в DOM есть несколько тэгов <main>, но только один из них должен отображаться пользователю одновременно. Любые дополнительные тэги должны быть скрыты с помощью атрибута hidden.

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

Стили в <body>

Обычно встроенный CSS, определенный с помощью тэга <style>, помещается внутрь <head> документа HTML. С ростом разработки компонентов разработчики увидели преимущества в написании и размещении стилей вместе с элементом html, для которого они важны.

В HTML 5.2 определение inline-стилей можно использовать во всех частях страницы:

<body> 
 <p>Вжух</p>
 <style>
 p { color: yellow; }
 </style>
 <p>Вжух</p>
</body>

Тем не менее, по-прежнему отмечается, что стили желательно размещать в <head> по соображениям производительности. Согласно спецификации:

Стили предпочтительно должен использоваться в начале документа. Использование стиля в теле документа может вызвать рестайлинг, раскладку триггера и/или вызвать перерисовку, и, следовательно, следует использовать с осторожностью.

Заголовки в <legend>

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

<fieldset> 
 <legend><h2>Заголовок</h2></legend>
</fieldset> 
<fieldset> 
 <legend><h2>Еще один заголовок</h2></legend>
</fieldset>

Удаленные тэги

В HTML 5.2 было удалено несколько тэгов:

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

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

Запрет inline, floated или blocked тэгов для <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">

Перевод статьи What’s New in HTML 5.2?

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

Наш Telegram-канал