Нововведения в HTML 5.2

Содержание:

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

Начнем с определения.

Что такое HTML

Нововведения в HTML 5.2

HTML – это специализированный язык гипертекстовой разметки,который применяется для проектирования web-сайтов.

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

Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

Так как HTML — это живой язык, новые возможности (и новые элементы) можно добавлять к стандарту HTML в любое время. Некоторые разработчики могут решить использовать эти возможности в своих веб-страницах, а некоторые разработчики веб-браузеров — поддерживать их в своих продуктах. Но возможности никогда не будут привязаны к какой-либо конкретной версии стандарта.Давайте рассмотрим некоторые новинки, доступные новой версии HTML 5.2

Элемент dialog

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

Кроме того имеются проблемы совместимости использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Dialog уже имеет поддержку на последних версиях Chrome, Firefox. Скоро планируется реализация на браузерах Opera

Тем не менее этот Тег интересен тем, что предоставляет программистам возможность создавать модальные диалоговые окна без всяких мелких тонкостей.

Разберемся глубже. Как уже стало понятно, окно делается с применением тега dialog:

Нововведения в HTML 5.2

Стандартно окно скрыто. Для его открытия необходимо использовать тег open:

Нововведения в HTML 5.2

Open переключается с помощью методов:

  • Show();
  • Close().

Они разрешены на всех HTMLDialogElement.

Нововведения в HTML 5.2.

Работа модульного JavaScript

Это было самое ожидаемое нововведение из всех. Оно позволяет поддерживать модульный синтаксис свежего стандарта ECMA Script.

Применение модулей происходит в таком виде:

Нововведения в HTML 5.2

Чтобы загружать каждый импортируемый скрипт не более 1 раза на документ или web worker, создан сборник module map. Он содержит ссылочные записи с одним из этих значений:

  1. Сам модульный скрипт (module script).
  2. Null, которые применяются для индексирования неудавшихся загрузок.
  3. Fetching – временный plays holder.

Путь к файлу изначально допускается через ссылочный парсер.

Подходящие значения будут использоваться для разрешения пути. Повторяющиеся значения будут просто игнорированы.

Путь должен начинаться с символов «/», «./» или «../». Если символов нет, то будет возвращена просто ошибка.

Еще нужно учесть, что некорректный MIME type будет ошибкой для модульного скрипта, хотя в обычные скрипты интерпретируется нормально.

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

Для того чтобы определить иконки страницы, используется тег <link rel = «icon» > в шапке файла.

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

Нововведения в HTML 5.2

Атрибут sizes не обязателен к использованию, но дает возможность браузерам самостоятельно решать, какие использовать размеры иконок. Каждое из устройств Apple имеет свои индивидуальные размеры.

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

В новом HTML спецификация дает возможность применять sizes в связке с apple-touch-icon и просто icon. Спецификация позволяет загружать на гаджеты иконки разных размеров.

Пользователи Apple уже достаточно долго ждали внедрения этого нововведения, т. к. на форумах были постоянные жалобы по поводу невозможности загрузки на устройство иконок разных размеров.

Атрибут nonce для <link>

Элемент <link> получил криптографический nonce. Он может быть использован для определения, будет ли внешний сайт, который указан в элементе link, загружаться или применяться к файлу.

Элемент <iframe>

Он получил одновременно 2 изменения:

  • атрибут allowpaymentrequest, который используется для интегрирования с Payment Request API;
  • новое значение для атрибута sandbox. Оно дает возможность интегрироваться атрибуту с Presentation API.

Применение Payment Request API из iframe

Сначала разберемся, что такое Payment Request API. Это нативная версия форм оформления заказов. Она дает возможность сделать общий способ оплаты онлайн для всех юзеров, перемещая обработку получения данных об оплате в браузер. Это отличный аналог той оплате, которая происходит в данный момент, когда все ресурсы имеют свою форму для оформления заказа, отличающуюся от других.

До обновления HTML невозможно было делать отправку запросов по платежам из iframe, которые встроены в файл. В старой версии не была реализована функция использования вставных действий по оплате со стороны. Они функционировали лишь внутри iframe.

Обновление добавило новый атрибут allowpaymentrequest. Благодаря ему, стала возможна реализация применения Payment Request API в момент нахождения пользователя на сайте хостинга.

Нововведения в HTML 5.2

Стили в body

Обновление позволило определять блок style везде внутри тега body. Теперь необходимые стили разрешено размещать близко к месту их применения.

Раньше стили через style располагались внутри head-файла. Необходимость в обновлении появилась, потому что по мере развития разработок программисты стали размещать стили в сами элементы, имеющие к ним отношение.

Нововведения в HTML 5.2

Также стоит помнить, что стили желательно размещать внутри head. Это способствует лучшей производительности.

Если применять style внутри body, это способствует повторному использованию стилей и вызывает повторную сборку макета или перерисовку.

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

В обновлении у тега <p> дочерними компонентами выступают только фразы.

Теперь запрещено вкладывать в параграф такие виды тегов:

  • инлайновые таблицы;
  • инлайновые блоки;
  • блоки с обтеканием;
  • блоки с позиционированием.

Вопрос – Ответ

Ответим на популярные вопросы.

Обновления работают стабильно?

Да, в текущих обновлениях нет никаких сбоев и некорректной работы.

Стили в body после обновления будут работать по старой схеме?

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

С чем связано обновление HTML?

Это связано с естественными изменениями в Интернете. Многие технологии устаревают, а на замену им приходят новые, с которыми не справляется старая версия HTML.

Заключение

Подведем итог. Мы разобрались, что нового появилось в HTML 5.2. Давайте еще раз вспомним, какие обновления мы рассмотрели:

  • элемент dialog;
  • работа модульного JavaScript;
  • размеры для иконок Apple;
  • атрибут nonce для <link>;
  • элемент <iframe>;
  • применение Payment Request API из iframe;
  • стили в body;
  • отсутствие инлайновых, обтекающих и блоковых дочерних элементов в <p>.

Это все основные оформления, которые есть на сегодня. По мере возникновения обновлений будут появляться новые статьи.

Если вы хотите научиться программировать, записывайтесь на курс по FrontEnd-программированию.

Вы сможете освоить навыки программирования, которые позволят вам в будущем:

  • писать игры;
  • верстать сайты;
  • разрабатывать приложения;
  • писать программы для бытовой техники и многому другому.

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

Занятия ведут преподаватели, которые имеют большой опыт работы в крупных компаниях.

По окончании курса вы получите сертификат. В крупных фирмах он котируется как диплом.

Торопитесь записаться на курс. Количество мест ограничено!

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!