Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Что нового в 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>, или же модального (диалогового) окна. Модальные окна невероятно распространены в Интернете, но каждая реализация в какой-то мере отличается. До этого времени не было универсальный решений с реализацией модальных окон, все веб-сайты использовали собственные варианты и имели, очень даже часто, подводные камни ввиде багов.

Новый элемент <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 запросов платежей из iFrames

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 представила специфические для устройства отношения, apple-touch-icon, которые можно использовать для определения значка, используемого на их устройствах.

В HTML 5.2 спецификация теперь позволяет использовать атрибут size, если отношение является apple-touch-icon, а не только icon. Это позволит нам предоставлять различные размеры значков для разных устройств Apple. Хотя, насколько я знаю, устройства 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 <style> в любом месте <body> документа HTML теперь является действительным. Это означает, что мы можем иметь стили ближе к тому, где они используются.

<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 было удалено несколько элементов, а именно:

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

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

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

Нет 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-разработки. Понравилась статья? Расскажи об этом друзьям!