HTML — изменения 2024 года

Период: 1 января 2024 — 31 декабря 2024
Версии браузеров: Chrome/Edge 121–132, Firefox 121–133, Safari 17.2–18.2

Обзор года

2024 год стал рубежным для стандартизации HTML и межбраузерной совместимости. Ключевые достижения:

Popover API: достижение статуса Baseline (январь 2025, разработка в 2024)
Declarative Shadow DOM: достижение Baseline (август 2024)
Interop 2024: 97% совместимости — высочайший показатель за всю историю
Формы: значительные улучшения элементов форм, путь к кастомизации <select>
Accessibility: ARIA 1.3 First Public Working Draft, новые роли и атрибуты
Анимация элементов: возможности анимации для <dialog> и <details>

1.1 Обзор

Popover API предоставляет стандартизированный, декларативный способ создания всплывающих элементов без JavaScript, размещая контент на верхнем слое (top layer) над остальным содержимым страницы.

1.2 Статус Baseline

Статус: Baseline Newly available с 27 января 2025
Примечание: Первоначально анонсирован как Baseline в апреле 2024 (ошибочно), фактическая дата — 27 января 2025
Причина задержки: Safari на iOS/iPadOS имел проблемы с «light dismiss» (клик вне popover не закрывал его) до Safari 18.3

1.3 Хронология поддержки браузерами

Chrome:

Chrome 114+ (май 2023): полная поддержка
Непрерывные улучшения в течение 2024 года

Firefox:

Firefox 125 (апрель 2024): полная реализация

Safari:

Safari 17.0: начальная поддержка
Safari 17.4 (март 2024): улучшения
Safari 18.3: исправление проблемы light dismiss на iOS/iPadOS (достижение статуса Baseline)

1.4 Ключевые возможности

HTML-атрибуты

1. Атрибут popover:

html

<div popover>Контент popover</div>
<div popover="auto">Auto-dismiss popover</div>
<div popover="manual">Manual popover</div>

Значения:

auto (по умолчанию): поведение light dismiss, закрывается при клике вне элемента
manual: требует явного закрытия

2. Атрибут popovertarget (для кнопок):

html

<button popovertarget="my-popover">Открыть Popover</button>
<div id="my-popover" popover>Контент</div>

3. Атрибут popovertargetaction:

html

<button popovertarget="my-popover" popovertargetaction="show">Показать</button>
<button popovertarget="my-popover" popovertargetaction="hide">Скрыть</button>
<button popovertarget="my-popover" popovertargetaction="toggle">Переключить</button>

Chrome-специфичные дополнения (2024)

Атрибут interestfor (Chrome 2024):

Добавлен для элементов <button> и <a>
Вызывает действия при проявлении интереса пользователя (например, наведение)
Сценарий использования: отображение popover при наведении

html

<button interestfor="tooltip-popover">Наведите на меня</button>
<div id="tooltip-popover" popover>Содержимое всплывающей подсказки</div>

1.5 Поведение Top Layer

Popover отображается на «верхнем слое» — поверх всего остального контента
Не требуется управление z-index
Не обрезается overflow: hidden на родительских элементах
Может стилизоваться с помощью псевдоэлемента ::backdrop

1.6 Сценарии использования

Меню действий
Пользовательские toast-уведомления
Предложения для элементов форм
Выборщики контента (content pickers)
Обучающие UI-элементы
Всплывающие подсказки (tooltips)
Пользовательские выпадающие списки select

1.7 Практический пример

html

<!-- Меню пользователя с Popover API -->
<button popovertarget="user-menu" class="user-button">
    <img src="/avatar.jpg" alt="Аватар пользователя" />
</button>

<nav id="user-menu" popover="auto">
    <ul>
        <li><a href="/profile">Профиль</a></li>
        <li><a href="/settings">Настройки</a></li>
        <li><a href="/help">Помощь</a></li>
        <hr />
        <li><a href="/logout">Выйти</a></li>
    </ul>
</nav>

<style>
    [popover] {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 1rem;
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    [popover]::backdrop {
        backdrop-filter: blur(2px);
    }
</style>

1.8 Interop 2024

Popover API был фокусной областью Interop 2024, обеспечивая консистентное поведение во всех браузерах.

Источники:

2. Declarative Shadow DOM

2.1 Обзор

Declarative Shadow DOM устраняет ограничение невозможности использования Shadow DOM с серверным рендерингом, предоставляя возможности Shadow DOM непосредственно в HTML без необходимости JavaScript.

2.2 Статус Baseline

Статус: Baseline Newly available с 5 августа 2024
Значимость: Теперь доступен во всех трёх основных браузерных движках

2.3 Хронология поддержки браузерами

Chrome:

Chrome 90 (апрель 2021): начальная поддержка
Chrome 124 (апрель 2024): актуальная стандартизированная версия

Safari:

Safari Technology Preview: ранняя поддержка
Safari 17.4 (март 2024): полная production-поддержка

Firefox:

Firefox 123 (20 февраля 2024): реализация Declarative Shadow DOM
Это была веха, обеспечившая статус Baseline

2.4 Реализация

Синтаксис HTML

html

<host-element>
    <template shadowrootmode="open">
        <style>
            p {
                color: red;
            }
        </style>
        <p>Содержимое Shadow DOM</p>
        <slot></slot>
    </template>
    <p>Содержимое Light DOM (попадает в slot)</p>
</host-element>

Значения атрибута `shadowrootmode`:

open: Shadow root доступен через element.shadowRoot
closed: Shadow root недоступен из JavaScript

Реализация Firefox (Firefox 122)

Начальная экспериментальная поддержка с атрибутом на <template>:

html

<template shadowrootmode="open">
    <!-- Shadow content -->
</template>

Стала стандартной в Firefox 123 (февраль 2024).

2.5 Ключевые преимущества

Server-Side Rendering (SSR): возможность рендеринга Shadow DOM на сервере
Не требуется JavaScript: декларативный подход устраняет необходимость attachShadow()
Progressive Enhancement: корректная деградация в старых браузерах
Web Components: позволяет работать Web Components с SSR
Производительность: более быстрый начальный рендеринг без JavaScript

2.6 Практический пример

html

<!-- Пользовательская карточка с инкапсулированными стилями -->
<product-card>
    <template shadowrootmode="open">
        <style>
            :host {
                display: block;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 1rem;
                background: white;
            }

            .price {
                font-size: 1.5rem;
                font-weight: bold;
                color: #2196f3;
            }

            ::slotted(h2) {
                margin: 0 0 0.5rem;
                font-size: 1.25rem;
            }
        </style>

        <slot name="title"></slot>
        <div class="price"><slot name="price"></slot></div>
        <slot name="description"></slot>
    </template>

    <!-- Light DOM content -->
    <h2 slot="title">Название товара</h2>
    <span slot="price">1 990 ₽</span>
    <p slot="description">Описание товара...</p>
</product-card>

2.7 Сценарии использования

Web Components с SSR
Дизайн-системы
Инкапсулированные стили
Виджеты третьих сторон
Переиспользуемые UI-компоненты

2.8 Interop 2024

Declarative Shadow DOM был выделенной фокусной областью Interop 2024, обеспечивая консистентную реализацию во всех браузерах.

Источники:

3. Улучшения элемента Dialog

3.1 Статус Baseline

Основной элемент dialog: Baseline с 2022 года (поддержка Safari 15.4, Firefox, Chrome)
Возможности анимации: появление в 2024, ещё не Baseline

3.2 Эволюция браузеров

Хронология:

2022: Safari 15.4 и Firefox добавили поддержку (стал веб-стандартом)
2024: фокус на улучшениях анимации и стилизации

3.3 Улучшения анимации в 2024

Chrome 131 (ноябрь 2024): псевдоэлемент `::details-content`

css

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.3s;
}

dialog[open] {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Новые CSS-свойства для анимации (Interop 2024)

1. transition-behavior: включает transitions для дискретных свойств

css

dialog {
    transition:
        opacity 0.3s,
        display 0.3s;
    transition-behavior: allow-discrete;
}

2. @starting-style: определяет стили для элементов, входящих в DOM

css

@starting-style {
    dialog[open] {
        opacity: 0;
    }
}

dialog[open] {
    opacity: 1;
}

Поддержка браузерами для функций анимации:

Chrome/Edge: полная поддержка (Chromium)
Safari (WebKit): последние версии
Firefox: @starting-style пока не поддерживается (на ноябрь 2024)

3. Ключевое слово overlay: для анимации элементов top-layer

css

dialog {
    transition:
        opacity 0.3s,
        overlay 0.3s;
}

Статус: только Chromium (на ноябрь 2024)

3.4 Возможности элемента Dialog

HTML-атрибуты

html

<dialog id="my-dialog">
    <h2>Подтверждение</h2>
    <p>Вы уверены, что хотите продолжить?</p>
    <form method="dialog">
        <button value="cancel">Отмена</button>
        <button value="confirm">Подтвердить</button>
    </form>
</dialog>

<button onclick="document.getElementById('my-dialog').showModal()">Открыть диалог</button>

Методы

dialog.show(): открыть как обычный диалог
dialog.showModal(): открыть как модальный (с backdrop)
dialog.close(): закрыть диалог

Стилизация

css

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

3.5 Улучшения accessibility

Управление фокусом

Safari 16.1+: исправлен возврат фокуса к триггерному элементу при закрытии
До Safari 16.1: фокус мог не возвращаться корректно

Интеграция ARIA

Автоматическая role="dialog" при модальном использовании
Корректная блокировка клавиатуры при открытии
Поддержка клавиши ESC для закрытия

3.6 Изменения спецификации

Изменение поведения Safari 17

Обновлено для выбрасывания исключений согласно новому HTML-стандарту
Safari 16: старое поведение
Safari 17+: новое стандартосовместимое поведение

Источники:

4. Улучшения элемента Details

4.1 Обзор

Элемент <details> получил значительные улучшения в 2024 году, особенно для анимации и группировки.

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

1. Атрибут `name` (Firefox 130, сентябрь 2024)

Назначение: Группирует несколько элементов <details>, где только один может быть открыт одновременно (поведение аккордеона)

html

<details name="faq-group">
    <summary>Вопрос 1</summary>
    <p>Ответ 1</p>
</details>

<details name="faq-group">
    <summary>Вопрос 2</summary>
    <p>Ответ 2</p>
</details>

<details name="faq-group">
    <summary>Вопрос 3</summary>
    <p>Ответ 3</p>
</details>

Поддержка браузерами:

Firefox 130 (3 сентября 2024): первая реализация
Chrome: в разработке
Safari: рассматривается

Преимущества:

Нативный аккордеон без JavaScript
Встроенная accessibility
Автоматическая взаимная эксклюзивность

2. Псевдоэлемент `::details-content` (Chrome 131, ноябрь 2024)

Назначение: Стилизация и анимация раскрывающегося/скрывающегося контента

css

details::details-content {
    height: 0;
    overflow: hidden;
    transition:
        height 0.3s ease,
        content-visibility 0.3s allow-discrete;
}

details[open]::details-content {
    height: auto;
}

Ключевые возможности:

Позволяет установку свойства display на details
Включает анимации открытия/закрытия
Работает со свойством content-visibility
Поддерживает transitions к значению auto height

Поддержка браузерами:

Chrome 131+ (ноябрь 2024): полная поддержка
Firefox: пока не поддерживается
Safari: пока не поддерживается

3. Поддержка свойства Display (Chrome 131)

До Chrome 131 свойство display на <details> было ограничено. Теперь его можно менять:

css

details {
    display: flex; /* Теперь работает! */
}

4.3 Возможности анимации (2024)

Современный подход (Chromium)

Требует трёх ключевых функций:

1. interpolate-size: включает transitions к значениям auto

css

:root {
    interpolate-size: allow-keywords;
}

2. ::details-content: выбор раскрывающегося контейнера

css

details::details-content {
    transition: height 0.3s;
}

3. content-visibility: неявно установлено в свёрнутом состоянии

css

details::details-content {
    content-visibility: auto;
    transition: content-visibility 0.3s allow-discrete;
}

Полный пример

html

<details>
    <summary>Нажмите для раскрытия</summary>
    <p>Этот контент будет плавно анимироваться при открытии и закрытии.</p>
</details>

css

:root {
    interpolate-size: allow-keywords;
}

details::details-content {
    height: 0;
    overflow: hidden;
    transition:
        height 0.3s ease,
        content-visibility 0.3s allow-discrete,
        opacity 0.3s;
    opacity: 0;
}

details[open]::details-content {
    height: auto;
    opacity: 1;
}

4.4 Сводная таблица поддержки

Возможность	Chrome	Firefox	Safari
Базовый `<details>`	Все версии	Все версии	Все версии
Атрибут `name`	В разработке	130+ (сен 2024)	Рассматривается
`::details-content`	131+ (ноя 2024)	Пока нет	Пока нет
Поддержка анимации	131+	Частично	Частично

Источники:

5. Улучшения элементов форм

5.1 Нативный switch-контрол (Safari 17.4, март 2024)

Новый тип input: <input type="checkbox" switch>

html

<input type="checkbox" switch id="notifications" />
<label for="notifications">Включить уведомления</label>

Возможности:

Нативный switch UI (iOS-стиль переключателя)
Автоматическая role="switch" для accessibility
Соответствие семантике ARIA switch
Тактильная обратная связь на iOS 18

Поддержка браузерами:

Safari 17.4+ (март 2024): полная поддержка на macOS, iOS, iPadOS
Chrome: рассматривается
Firefox: рассматривается

Преимущества:

Не требуется пользовательский CSS/JS
Нативный мобильный UX
Улучшенная accessibility
Консистентность с дизайном ОС

5.2 `<hr>` в `<select>` (Firefox 122, январь 2024)

Возможность: Позволяет использовать элементы <hr> как дочерние элементы <select> для визуальной группировки

html

<select>
    <option>Маленький</option>
    <option>Средний</option>
    <option>Большой</option>
    <hr />
    <option>Очень большой</option>
    <option>XXL</option>
</select>

Хронология поддержки браузерами:

Safari 17 (сентябрь 2023): первая реализация
Chrome 119 (ноябрь 2023): добавлена поддержка
Firefox 122 (23 января 2024): реализовано

Статус: Широко поддерживается с 2024

Примечание по accessibility:

Элементы <hr> в настоящее время только декоративные
Не отображаются в accessibility tree
Не анонсируются скринридерами
Только визуальное разделение

Примечание по deprecation (Firefox 122):

Атрибут type больше не влияет на <ol>, если установлен в none, disc, circle, square
Атрибут type больше не влияет на <ul>, если установлен в 1, a, A, i, I
Использовать CSS list-style-type вместо этого

5.3 Field Sizing (Chrome 123, март 2024)

Новое CSS-свойство: field-sizing

css

textarea,
input,
select {
    field-sizing: content; /* Автоматический рост на основе контента */
}

Значения:

fixed (по умолчанию): фиксированный размер
content: увеличивается/уменьшается в соответствии с контентом

Поведение:

Для <input>:

html

<input type="text" style="field-sizing: content;" value="Этот input растёт с контентом" />

Начинается с минимального размера
Расширяется по мере ввода пользователя
Учитывает min-width и max-width

Для <textarea>:

html

<textarea style="field-sizing: content;">Автоматически растущая textarea</textarea>

Сначала растёт горизонтально (если позволяет ширина)
Затем растёт вертикально (добавляет строки)
Показывает scrollbar при ограничении высоты

Поддержка браузерами:

Chrome 123+ (март 2024): полная поддержка
Safari: рассматривается
Firefox: рассматривается

Статус: только Chromium (на ноябрь 2024)

Преимущества:

Однострочное CSS-решение
Не требуется JavaScript
Улучшенный UX для полей переменной длины
Заменяет сложные скрипты автоматического роста

5.4 Управление подсказками при вводе (Chrome 125, Safari 18.0)

Новый атрибут: writingsuggestions

html

<!-- Включить подсказки (по умолчанию) -->
<textarea writingsuggestions="true"></textarea>

<!-- Отключить подсказки -->
<textarea writingsuggestions="false"></textarea>

Назначение: Управление предоставляемыми браузером подсказками при вводе (AI-прогнозы текста)

Поддержка браузерами:

Chrome 125+ (апрель 2024): реализовано
Safari 18.0 (сентябрь 2024): реализовано как атрибут writingsuggestions
Firefox: пока не реализовано

Сценарии использования:

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

5.5 Стандартизация Autocorrect (2024)

Атрибут: autocorrect (переход от Safari-только к стандарту)

html

<input type="text" autocorrect="on" /> <input type="text" autocorrect="off" />

Статус: Добавляется в спецификацию WHATWG HTML (август 2024)

Поддержка браузерами:

Safari: поддерживается годами (proprietary)
Chrome: теперь поддерживается (2024)
Firefox: рассматривается

Затрагиваемые элементы:

<input> (кроме type="password", type="email", type="url")
<textarea>

Значения:

on: включить автокоррекцию
off: отключить автокоррекцию

Значимость: Переход от Safari-специфичного к веб-стандарту

5.6 Accessibility для полей даты/времени (Safari 18.0)

Улучшенная поддержка VoiceOver для macOS:

<input type="date">
<input type="datetime-local">
<input type="time">

Изменения:

Корректная навигация клавиатурой
Анонсы скринридера
Accessibility нативного picker

5.7 Input Type Week на iOS (Safari 18.2, декабрь 2024)

Возможность: поддержка <input type="week"> на iOS, iPadOS, visionOS

html

<input type="week" name="week" />

Статус:

Desktop Safari: всё ещё не поддерживается (на конец 2024)
iOS Safari 18.2: добавлена поддержка (декабрь 2024)
Chrome/Edge: поддерживается
Firefox: не поддерживается

Примечание: Интересный случай, когда мобильная версия получила поддержку раньше desktop

Источники:

6. Кастомизируемый элемент Select

6.1 Обзор

Одна из наиболее значимых разработок 2024 года: переосмысление элемента <select> с полной кастомизацией при сохранении accessibility.

6.2 Эволюция

Первоначальный план: элемент <selectmenu> (отдельный новый элемент)

Новый подход (2024): Улучшение существующего элемента <select>

Подход progressive enhancement
Переиспользует существующий синтаксис <select> и <option>
Обратно совместим

6.3 Ключевые возможности

1. `appearance: base-select` (CSS)

Активирует кастомизируемый режим:

css

select {
    appearance: base-select;
}

Эффект:

Удаляет браузерную стилизацию по умолчанию
Включает пользовательскую стилизацию
Сохраняет accessibility
Создаёт неявную связь popover-invoker с выпадающим списком

2. Элемент `<selectedcontent>` (позже `<selectedoption>`)

Позволяет пользовательский рендеринг выбранной опции:

html

<select>
    <selectedcontent>
        <!-- Кастомизированное отображение выбранной опции -->
    </selectedcontent>
    <option value="1">Опция 1</option>
    <option value="2">Опция 2</option>
</select>

Примечание: Именование элемента и API всё ещё развиваются (на ноябрь 2024)

3. Новые псевдоэлементы

::picker(select): Стилизация выпадающего picker

css

select::picker(select) {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
}

::picker-icon: Стилизация иконки выпадающего списка

css

select::picker-icon {
    content: '▼';
    color: blue;
}

::checkmark: Стилизация галочки для выбранной опции

css

select::checkmark {
    content: '✓';
    color: green;
}

6.4 Пример

html

<style>
    select {
        appearance: base-select;
        padding: 8px;
        border: 2px solid #333;
        border-radius: 4px;
    }

    select::picker(select) {
        background: linear-gradient(white, #f0f0f0);
        padding: 4px;
    }

    select::picker-icon {
        content: '▾';
        font-size: 20px;
    }

    option::checkmark {
        content: '✓';
        color: green;
        margin-right: 8px;
    }
</style>

<select>
    <option value="">Выберите...</option>
    <option value="apple">🍎 Яблоко</option>
    <option value="banana">🍌 Банан</option>
    <option value="cherry">🍒 Вишня</option>
</select>

6.5 Интеграция с другими возможностями

Popover API: Выпадающий список использует Popover API внутренне

Позиционирование top layer
Light dismiss
Навигация клавиатурой

Anchor Positioning: Выпадающий список привязан к кнопке

CSS Anchor Positioning API
Автоматическое позиционирование
Обработка scroll/resize

6.6 Поддержка браузерами

Возможность	Chrome	Firefox	Safari
Экспериментальная реализация	130+ (origin trial)	Рассматривается	Положительные сигналы
`appearance: base-select`	Origin trial	—	—
Псевдоэлементы	В разработке	—	—

Статус: Экспериментальная, сбор отзывов разработчиков (на ноябрь 2024)

6.7 Запрос обратной связи

Команда Chrome опубликовала RFC (Request for Comments), запрашивая отзывы разработчиков о дизайне и API кастомизируемого select.

URL: https://developer.chrome.com/blog/rfc-customizable-select

6.8 Участие Open UI

Разработка ведётся community group Open UI:

Совместный процесс проектирования
Участие межбраузерных stakeholder
Публичные обсуждения и предложения

6.9 Традиционные ограничения (решаемые)

До:

Стилизация на уровне операционной системы (сложно кастомизировать)
Ограничение нативным видом выпадающего списка
Требовался JavaScript для пользовательских выпадающих списков
Проблемы accessibility с пользовательскими реализациями

После (с кастомизируемым select):

Полный CSS-контроль над layout, цветами, иконками, позиционированием
Сохранение нативной accessibility
Не требуется JavaScript для базовой кастомизации
Progressive enhancement

Источники:

7. Invoker Commands / Command-атрибуты

7.1 Обзор

Новые атрибуты, позволяющие декларативное назначение поведения кнопкам для управления другими элементами без JavaScript.

7.2 Эволюция названий атрибутов

Первоначальные названия (предложенные):

invoketarget
invokeaction

Новые названия (стандартизированные):

commandfor
command

Причина: Группы стандартов и разработчики хотели более простые, менее абстрактные имена

7.3 Синтаксис

html

<button commandfor="target-id" command="action-name">Текст кнопки</button>

<element id="target-id"> Целевой элемент </element>

7.4 Принцип работы

commandfor: IDREF, указывающий на целевой элемент
command: Действие для выполнения (подсказка свободной формы)

При клике кнопка отправляет CommandEvent на целевой элемент с поведением по умолчанию для dialogs и popovers.

7.5 Встроенные команды

Для Dialog

html

<button commandfor="my-dialog" command="showModal">Открыть диалог</button>
<button commandfor="my-dialog" command="close">Закрыть диалог</button>

<dialog id="my-dialog">
    <p>Содержимое диалога</p>
</dialog>

html

<button commandfor="my-popover" command="show">Показать</button>
<button commandfor="my-popover" command="hide">Скрыть</button>
<button commandfor="my-popover" command="toggle">Переключить</button>

<div id="my-popover" popover>Содержимое popover</div>

7.6 Поведение по умолчанию

Тип элемента	Команда	Поведение
Dialog	`showModal`	Открывает диалог модально
Dialog	`show`	Открывает диалог немодально
Dialog	`close`	Закрывает диалог
Popover	`show`	Показывает popover
Popover	`hide`	Скрывает popover
Popover	`toggle`	Переключает popover

7.7 Пользовательские команды

html

<button commandfor="media-player" command="play">Воспроизвести</button>
<button commandfor="media-player" command="pause">Пауза</button>

<div id="media-player">
    <!-- Пользовательский элемент обрабатывает CommandEvent -->
</div>

<script>
    document.getElementById('media-player').addEventListener('command', (e) => {
        if (e.command === 'play') {
            // Обработка воспроизведения
        } else if (e.command === 'pause') {
            // Обработка паузы
        }
    });
</script>

7.8 Преимущества

Декларативность: только HTML для общих паттернов
Доступность: корректные ARIA-связи
Progressive Enhancement: JavaScript может дополнять
Поддержка клавиатуры: встроенная обработка клавиатуры
Поддержка Touch: работает на мобильных

7.9 Интерфейс CommandEvent

javascript

interface CommandEvent extends Event {
    readonly attribute DOMString command;
    readonly attribute Element? source;
}

7.10 Статус спецификации

WHATWG HTML Spec: PR слит (по состоянию на 2024)

Сигналы браузеров:

Mozilla (Firefox): положительные сигналы
WebKit (Safari): поддерживающие сигналы
Chrome: объявлен Intent to Ship

7.11 Поддержка браузерами

Chrome: Реализация в процессе (Intent to Ship) Firefox: Положительная позиция, реализация ожидается Safari: Положительные сигналы, временная шкала неясна

Статус: Ещё не выпущено в стабильных браузерах (на ноябрь 2024)

7.12 Сценарии использования

Управление диалогами: открытие/закрытие без JS
Триггеры popover: показать/скрыть/переключить
Управление медиа: воспроизведение/пауза/остановка
Пользовательские виджеты: любой интерактивный элемент
Управление аккордеоном: развернуть/свернуть
Управление табами: переключение панелей

Источники:

8. Accessibility и улучшения ARIA

8.1 ARIA 1.3 First Public Working Draft (январь 2024)

8.2 Новые роли (ARIA 1.3)

1. Роль `suggestion`

html

<div role="suggestion">Предлагаемое изменение: Замените «там» на «тем»</div>

Назначение: Маркировка предлагаемых изменений контента (например, в совместном редактировании)

2. Роль `comment`

html

<div role="comment" aria-label="Комментарий Ивана">Этот параграф требует доработки.</div>

Назначение: Идентификация секций комментариев в документах

3. Роль `mark`

html

<span role="mark">выделенный текст</span>

Назначение: Маркировка или выделение контента (результаты поиска, ссылки)

8.3 Новые атрибуты (ARIA 1.3)

1. `aria-description`

html

<button aria-label="Закрыть" aria-description="Закрывает диалог без сохранения">×</button>

Назначение: Предоставление дополнительного описания помимо aria-label Отличие от aria-describedby: Непосредственно содержит текст vs. ссылается на другой элемент

2. `aria-braillelabel`

html

<button aria-label="Информация" aria-braillelabel="Инфо">ℹ</button>

Назначение: Предоставление кастомизированного вывода брайля, отличающегося от вывода скринридера Сценарий использования: Аббревиатуры для брайлевских дисплеев (ограниченное пространство)

3. `aria-brailleroledescription`

html

<div role="region" aria-roledescription="Раздел викторины" aria-brailleroledescription="Викт">
    Содержимое викторины
</div>

Назначение: Брайль-специфичные описания ролей (сокращённые)

8.4 Расширенные существующие атрибуты

`aria-details` (теперь поддерживает множественные IDREFS)

До (ARIA 1.2):

html

<button aria-details="help-1">Помощь</button>
<div id="help-1">Содержимое помощи</div>

После (ARIA 1.3):

html

<button aria-details="help-1 help-2 help-3">Помощь</button>
<div id="help-1">Базовая помощь</div>
<div id="help-2">Расширенная помощь</div>
<div id="help-3">Примеры</div>

Преимущество: Может ссылаться на несколько элементов detail

8.5 Поддержка брайля Safari 18.0 (сентябрь 2024)

JavaScript Reflection-свойства

javascript

// Новые свойства в Safari 18.0
element.ariaBrailleLabel = 'Инфо';
element.ariaBrailleRoleDescription = 'Кнп';

// Доступ без setAttribute/getAttribute
console.log(element.ariaBrailleLabel);

Преимущества:

Программный доступ к брайлевским атрибутам
Улучшенная поддержка TypeScript
Консистентность с другими ARIA-свойствами

8.6 Элемент `<search>` как Landmark

Обзор

Новый семантический элемент для функциональности поиска (Baseline 2023, но широко принят в 2024)

html

<search>
    <form role="search">
        <input type="search" name="q" aria-label="Поиск" />
        <button type="submit">Найти</button>
    </form>
</search>

Преимущества:

Нативный семантический смысл
Автоматический landmark (role="search" неявная)
Заменяет <div role="search">

Поддержка браузерами:

Chrome 118+ (октябрь 2023)
Firefox 118+ (октябрь 2023)
Safari 17+ (сентябрь 2023)

Статус: Baseline 2023, широко используется в 2024

Примечание: Должен оборачивать форму поиска и фильтры, но не результаты поиска (результаты идут в <main>)

8.7 Фокус Interop 2024 на Accessibility

Покрываемые области

WAI-ARIA Roles Model: Консистентное поведение ролей во всех браузерах
Accessible Name and Description Computation (AccName): Стандартизированное вычисление имён элементов для вспомогательных технологий
ARIA-атрибуты: Комплексное тестирование всех ARIA-атрибутов

Результаты

Большинство новых тестов accessibility покрывают WAI-ARIA
Фокус на консистентности передачи назначения элемента вспомогательным технологиям
97% интероперабельности достигнуто к концу 2024 (самый высокий показатель)

8.8 Другие улучшения Accessibility

Атрибут `inert` (Baseline апрель 2023, широко принят 2024)

html

<div inert>
    <button>Нельзя кликнуть</button>
    <a href="#">Нельзя сфокусировать</a>
    <input type="text" />
    <!-- Нельзя взаимодействовать -->
</div>

Эффекты:

Нет событий клика
Не может быть сфокусирован
Скрыт от вспомогательных технологий (удалён из accessibility tree)
Не ищется Ctrl+F
Применяется рекурсивно ко всем потомкам

Поддержка браузерами: 90%+ браузеров (по состоянию на 2024)

Сценарии использования:

Контент на фоне модального окна
Боковые панели drawer, когда закрыты
Состояния загрузки
Отключённые секции

Accessibility Switch-контрола (Safari 17.4)

<input type="checkbox" switch> автоматически:

Соответствует role="switch"
Предоставляет корректную ARIA-семантику
Корректно анонсирует изменения состояния

8.9 Юридический и нормативный контекст

WCAG 2.2: Теперь юридический стандарт (2024)

Упоминается в 4605 ADA исках в 2024 году
ARIA-соответствие становится всё более важным
Корректный семантический HTML критичен

Источники:

9. Медиа и мультимедиа

9.1 Lazy Loading для Iframes (Firefox 121, декабрь 2023)

Возможность: Нативная ленивая загрузка для элементов <iframe>

html

<iframe src="video-player.html" loading="lazy"></iframe>

Значения:

lazy: Загружать при приближении к viewport
eager (по умолчанию): Загружать немедленно

Хронология поддержки браузерами:

Chrome: Поддерживается с v77 (2019)
Safari: Поддерживается с v16.4 (2023)
Firefox 121 (19 декабря 2023): Добавлена поддержка

Статус: Широко поддерживается во всех браузерах (по состоянию на 2024)

Преимущества:

Более быстрая начальная загрузка страницы
Снижение использования трафика
Улучшенная производительность для страниц с множеством iframe
Особенно полезно для встроенных видео, рекламы, виджетов

9.2 Lazy Loading для изображений (улучшения 2024)

Возможность: loading="lazy" для изображений (улучшения Chrome в 2024)

html

<img src="image.jpg" loading="lazy" alt="Описание" />

Статус 2024:

Поддерживается 90%+ браузеров
Почти все основные браузеры поддерживают

Обновления порогов расстояния Chrome (продолжение с 2020):

Быстрые соединения (4G): 1250px от viewport (было 3000px)
Медленные соединения (3G или ниже): 2500px (было 4000px)

Современная лучшая практика (2024):

html

<img src="image.jpg" loading="lazy" decoding="async" alt="Описание" />

Атрибут decoding:

async: Браузер контролирует, когда/где происходит декодирование
sync: Декодировать немедленно
auto (по умолчанию): Браузер решает

Преимущества комбинированного подхода:

Не требуется JavaScript
Progressive enhancement (работает в старых браузерах)
Улучшенная производительность
Улучшенный UX

9.3 Улучшения элемента Ruby (Chrome 128, август 2024)

Возможность: Улучшенная поддержка ruby-аннотаций

Предыстория

Ruby-аннотации отображают произношение/информацию над/рядом с текстом, критичны для восточноазиатских языков.

До Chrome 128

html

<ruby> 漢字<rt>かんじ</rt> </ruby>
<!-- Одиночная ruby-пара НЕ была line-breakable -->

Проблема: Если в строке недостаточно места, вся ruby-пара переходила на следующую строку (плохой layout)

После Chrome 128

html

<ruby> 漢字<rt>かんじ</rt> </ruby>
<!-- Теперь line-breakable внутри ruby-элементов -->

Улучшение: Ruby base и ruby text могут разделяться между строками индивидуально

Новое CSS-свойство: `ruby-align`

css

ruby {
    ruby-align: space-between; /* Распределить пространство */
    ruby-align: center; /* Центральное выравнивание */
    ruby-align: space-around; /* Пространство вокруг */
    ruby-align: start; /* Выравнивание по началу */
}

Назначение: Контроль выравнивания ruby text над базовым текстом

Поддержка браузерами:

Chrome 128+ (август 2024): полная поддержка
Safari: Имеет некоторую поддержку ruby
Firefox: Базовая поддержка ruby

9.4 WebVTT для видео-субтитров

Возможность: HTML-символы в WebVTT (Safari 17.4, март 2024)

Что такое WebVTT?

Web Video Text Tracks Format — для субтитров, титров, описаний на элементах <video>

Улучшение Safari 17.4

До:

vtt

WEBVTT

00:00:00.000 --> 00:00:05.000
&amp; не отображался как &

После (Safari 17.4):

vtt

WEBVTT

00:00:00.000 --> 00:00:05.000
Иванов &amp; Петров <!-- Отображается как: Иванов & Петров -->

Поддерживаемые символы:

& → &
< → <
> → >
" → "
' → '
  → (неразрывный пробел)
И числовые символы: < → <

Использование с HTML5 Video

html

<video controls>
    <source src="video.mp4" type="video/mp4" />
    <track kind="captions" src="captions.vtt" srclang="ru" label="Русский" />
</video>

Стилизация подсказок с помощью CSS

css

::cue {
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 1.2em;
}

::cue(.highlighted) {
    color: yellow;
}

WebVTT с классами:

vtt

WEBVTT

00:00:00.000 --> 00:00:05.000
<c.highlighted>Важная</c> информация здесь.

Поддержка браузерами

Chrome: Полная поддержка WebVTT
Firefox: Полная поддержка
Safari: Улучшена в 17.4 с HTML-символами

9.5 Приоритизация источников медиа (Safari 17.4)

Возможность: Браузер приоритизирует источники видео на основе поддержки и медиазапросов

html

<video controls>
    <source src="video-4k.webm" type="video/webm" media="(min-width: 1920px)" />
    <source src="video-hd.webm" type="video/webm" media="(min-width: 1280px)" />
    <source src="video-sd.mp4" type="video/mp4" />
</video>

Поведение:

Браузер проходит по списку source по порядку
Выбирает первый source, который может воспроизвести
Учитывает медиазапросы
Учитывает поддержку формата

Преимущества:

Лучшее качество на способных устройствах
Экономия трафика на меньших экранах
Progressive enhancement

9.6 SVG Download-атрибут (Chrome 2024)

Возможность: атрибут download на SVG-элементах <a>

html

<svg>
    <a href="image.png" download="my-image.png">
        <rect width="100" height="100" fill="blue" />
    </a>
</svg>

Эффект: Клик вызывает загрузку вместо навигации

Интерфейс: свойство SVGAElement.download

Поддержка браузерами:

Chrome (2024): Добавлена поддержка
Firefox: Рассматривается
Safari: Рассматривается

Источники:

10. Shadow DOM и Web Components

10.1 Наследование глобальных атрибутов (Firefox 130, сентябрь 2024)

Возможность: Улучшенное наследование атрибутов dir и lang через границы Shadow DOM

Проблема до Firefox 130

html

<div lang="ru" dir="rtl">
    <custom-element>
        #shadow-root
        <p>Текст</p>
        <!-- lang и dir не наследовались -->
    </custom-element>
</div>

После Firefox 130

html

<div lang="ru" dir="rtl">
    <custom-element>
        #shadow-root
        <p>Текст</p>
        <!-- lang="ru" и dir="rtl" корректно наследуются -->
    </custom-element>
</div>

Преимущества:

Корректное направление текста в Shadow DOM
Правильное определение языка
Улучшенная интернационализация (i18n)
Улучшенная accessibility

Поддержка браузерами:

Firefox 130+ (3 сентября 2024): Реализовано
Chrome: Уже поддерживается
Safari: Уже поддерживается

10.2 Declarative Shadow DOM (рассмотрено в разделе 2)

См. Раздел 2 для полной информации о Declarative Shadow DOM, который достиг Baseline в августе 2024.

Источники:

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130

11. Мобильные устройства и Viewport

11.1 `interactive-widget` Viewport Meta-свойство (Firefox 133, Safari)

Возможность: Управление поведением изменения размера viewport при появлении виртуальной клавиатуры

Атрибут

html

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
/>

Значения

resizes-visual (по умолчанию):

Изменяет размер только Visual Viewport
Layout Viewport остаётся тем же
Фиксированные элементы не двигаются

resizes-content:

Изменяет размер Visual и Layout Viewports
Единицы viewport (vh, vw) меняются
Фиксированные элементы могут перепозиционироваться

overlays-content:

Не изменяет размер ни одного viewport
Клавиатура перекрывает контент
Контент может быть скрыт за клавиатурой

Визуальное объяснение

resizes-visual (по умолчанию):

┌─────────────────┐
│  Контент        │
│  страницы       │ <- Layout Viewport (без изменений)
│                 │
├─────────────────┤
│  ┌───────────┐  │
│  │ Клавиатура│  │ <- Visual Viewport (изменён)
│  └───────────┘  │
└─────────────────┘

resizes-content:

┌─────────────────┐
│  Контент        │ <- Layout Viewport (изменён)
│  (видимая часть)│ <- Visual Viewport (изменён)
├─────────────────┤
│  ┌───────────┐  │
│  │ Клавиатура│  │
│  └───────────┘  │
└─────────────────┘

overlays-content:

┌─────────────────┐
│  Контент        │
│  страницы       │ <- Layout Viewport (без изменений)
│  ┌───────────┐  │ <- Visual Viewport (без изменений)
│  │ Клавиатура│  │ (перекрывает контент)
│  └───────────┘  │
└─────────────────┘

Сценарии использования

Использовать resizes-content когда:

Требуется обновление единиц viewport
Форма расположена внизу экрана
Необходимо перепозиционирование на основе доступного пространства

Использовать resizes-visual когда (по умолчанию):

Стандартная мобильная веб-страница
Фиксированный header/footer должен остаться
Наиболее распространённый случай

Использовать overlays-content когда:

Полноэкранные приложения
Игры
Immersive-опыты

Поддержка браузерами

Chrome 108+ (декабрь 2022): Реализовано
Firefox 133 (26 ноября 2024): Реализовано
Safari: Поддержка добавлена в последних версиях

Статус: Хорошая поддержка в современных браузерах (на ноябрь 2024)

Влияние на CSS

С resizes-content единицы viewport меняются:

css

.container {
    height: 100vh; /* Высота меняется при открытии клавиатуры */
}

До клавиатуры: 100vh = полная высота экрана После клавиатуры (с resizes-content): 100vh = высота экрана минус клавиатура

11.2 Изменения Transient User Activation (Firefox 133)

Возможность: Менее строгая блокировка popups на основе HTML-спецификации

Что изменилось

Firefox 133 следует модели HTML-спецификации для «transient user activation» более точно:

Transient Activation: Короткое временное окно после взаимодействия пользователя, где разрешены popups/fullscreen

Предыдущее поведение:

Firefox был чрезмерно агрессивен в блокировке popups
Некоторые легитимные инициированные пользователем popups блокировались

Новое поведение (Firefox 133):

Более точно следует HTML-стандарту
Разрешает popups в случаях, когда пользователь явно инициировал действие
Всё ещё блокирует незапрошенные popups

Nightly Builds

Изменение первоначально развёрнуто в Firefox Nightly builds, затем в stable.

Статус: Firefox 133+ (26 ноября 2024)

Источники:

12. Парсинг и рендеринг

12.1 Атрибут `blocking="render"`

Возможность: Явная маркировка ресурсов как блокирующих рендеринг

Синтаксис

html

<!-- Для внешней таблицы стилей -->
<link rel="stylesheet" href="critical.css" blocking="render" />

<!-- Для внешнего скрипта -->
<script src="critical.js" blocking="render"></script>

<!-- Для inline-стиля -->
<style blocking="render">
    /* Критичные стили */
</style>

Назначение

Обычно: Браузер определяет, что блокирует рендеринг (внешние таблицы стилей, синхронные скрипты)

С blocking="render": Разработчик явно маркирует ресурс как блокирующий рендеринг

Когда использовать

Редко — обычно НЕ хотите блокировать рендеринг!

Валидные сценарии использования:

Критичный CSS: Должен быть загружен до первой отрисовки
Загрузка шрифтов: Предотвращение FOUT (Flash of Unstyled Text)
Above-the-fold требования: Критичные UI-элементы

html

<link rel="stylesheet" href="critical-above-fold.css" blocking="render" />

Принцип работы

Браузер начинает парсинг HTML
Встречает элемент blocking="render"
Продолжает парсинг (не блокирует парсер)
Блокирует рендеринг до загрузки ресурса
Рендерит страницу после готовности ресурса

Сравнение с обычным поведением

Обычный <link rel="stylesheet">:

Блокирует рендеринг по умолчанию
blocking="render" явный

Обычный <script>:

Блокирует парсинг (если нет async или defer)
blocking="render" блокирует только рендеринг, не парсинг

Обычный <style>:

Не блокирует рендеринг (inline)
С blocking="render" явно блокирует

Поддержка браузерами

Chrome 105+ (сентябрь 2022): Реализовано
Edge 105+ (сентябрь 2022): Реализовано
Safari 18.2 (11 декабря 2024): Реализовано
Firefox: Пока не поддерживается (положительная позиция)

Статус: Ограниченная поддержка (на ноябрь 2024)

Интеграция Performance API

javascript

// Проверка, был ли ресурс блокирующим рендеринг
const entry = performance.getEntriesByType('resource')[0];
console.log(entry.renderBlockingStatus); // "blocking" или "non-blocking"

Интерфейс: PerformanceResourceTiming.renderBlockingStatus

`<link rel="expect">` (Связанная возможность)

html

<link rel="expect" href="#important-element" blocking="render" />

Эффект: Блокирует рендеринг до тех пор, пока элемент с id="important-element" не окажется в DOM

Статус: Предложено, ещё не реализовано

12.2 WebSocket HTTPS URLs (Interop 2024)

Возможность: Разрешить схемы http:// и https:// в конструкторе WebSocket

До

javascript

// Только ws: и wss: разрешены
const ws = new WebSocket('ws://example.com/socket');
const wss = new WebSocket('wss://example.com/socket');

Проблема: Нельзя было использовать относительные URL, требовался workaround-код

После (2024)

javascript

// Схемы http(s) теперь разрешены
const ws = new WebSocket('https://example.com/socket');

// Относительные URL теперь возможны!
const ws = new WebSocket('/socket');

Автоконвертация:

http:// → ws://
https:// → wss://

Преимущества

Относительные URL: Не нужно конструировать абсолютные WebSocket URL
Более чистый код: Автоматически соответствует location.protocol
Менее подвержен ошибкам: Нет ручной логики переключения протокола

Поддержка браузерами

Часть Interop 2024 — реализовано во всех основных браузерах (2024)

12.3 IndexedDB (Interop 2024)

Фокус: Улучшение интероперабельности IndexedDB во всех браузерах

Изменения: Не новые HTML-возможности, но улучшенная консистентность существующего поведения IndexedDB API

Влияние: Более надёжная клиентская база данных для веб-приложений

Источники:

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

13.1 `contenteditable="plaintext-only"` (Chrome, Safari)

Возможность: Редактируемый элемент, который удаляет всё форматирование

html

<div contenteditable="plaintext-only">Вводите здесь — всё форматирование rich text отключено</div>

Поведение

При вставке:

Пользователь копирует: <b>Жирный</b> и <i>курсивный</i> текст
Пользователь вставляет в plaintext-only: Жирный и курсивный текст (plain)

При вводе:

Невозможно форматирование rich text
Клавиатурные сочетания для жирного, курсива не работают
Чистый plain text

Поддержка браузерами

Chrome: Поддерживается
Safari: Поддерживается
Firefox: Не поддерживается (открытый bug годами)

Статус: Экспериментально в Firefox 133 (отключено по умолчанию)

Workarounds для Firefox

Поскольку Firefox не поддерживает, разработчики используют:

javascript

element.addEventListener('paste', (e) => {
    e.preventDefault();
    const text = e.clipboardData.getData('text/plain');
    document.execCommand('insertText', false, text);
});

13.2 Scroll-контейнеры автоматически получают фокус клавиатурой (Chrome 124)

Возможность: Scroll-контейнеры автоматически фокусируются в последовательной навигации фокусом

Назначение

Позволить пользователям клавиатуры прокручивать обрезанный контент без необходимости tabindex="0"

До Chrome 124

html

<div style="overflow: auto; height: 200px;">
    <p>Длинный контент...</p>
</div>
<!-- Не фокусируется клавиатурой, пользователи клавиатуры не могут прокручивать -->

Нужен workaround:

html

<div style="overflow: auto; height: 200px;" tabindex="0">
    <p>Длинный контент...</p>
</div>

После Chrome 124

html

<div style="overflow: auto; height: 200px;">
    <p>Длинный контент...</p>
</div>
<!-- Автоматически фокусируется клавиатурой! -->

Влияние

Автоматически улучшенная accessibility
Пользователи клавиатуры могут прокручивать overflow-контейнеры
Не требуется ручной tabindex

Поддержка браузерами:

Chrome 124+ (апрель 2024): Реализовано
Firefox: Рассматривается
Safari: Рассматривается

Возможность: Storage Access API теперь поддерживает не-cookie хранилище

Предыстория

Storage Access API позволяет встроенным iframe запрашивать доступ к собственному хранилищу в контексте третьей стороны.

До Chrome 125

Только cookies могли быть доступны через Storage Access API:

javascript

// В iframe
document.requestStorageAccess().then(() => {
    // Теперь можно устанавливать cookies
    document.cookie = 'name=value';
});

После Chrome 125

Доступны все типы хранилища:

javascript

// В iframe
document.requestStorageAccess().then(() => {
    // Cookies
    document.cookie = "name=value";

    // localStorage
    localStorage.setItem('key', 'value');

    // IndexedDB
    const db = await indexedDB.open('myDB');

    // Cache API
    const cache = await caches.open('myCache');
});

Поддерживаемые типы хранилища:

Cookies
localStorage
sessionStorage
IndexedDB
Cache API
BroadcastChannel
SharedWorker

Поддержка браузерами:

Chrome 125+ (апрель 2024): Полная поддержка хранилища
Safari: Частичная поддержка (только cookies)
Firefox: В разработке

13.4 Удаление Mutation Events (Chrome 127)

Критическое изменение: Mutation Events удалены из Chrome 127 (июль 2024)

Что такое Mutation Events?

Старый API для наблюдения за изменениями DOM:

javascript

// УСТАРЕЛО — Удалено в Chrome 127
element.addEventListener('DOMNodeInserted', () => {
    console.log('Узел вставлен');
});

element.addEventListener('DOMAttrModified', () => {
    console.log('Атрибут изменён');
});

Удалённые события

DOMNodeInserted
DOMNodeRemoved
DOMSubtreeModified
DOMAttrModified
DOMCharacterDataModified

Замена: MutationObserver

javascript

// Современный подход
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        console.log('Mutation:', mutation.type);
    });
});

observer.observe(element, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,
});

Почему удалены:

Проблемы с производительностью (синхронные)
Существует лучшая альтернатива (MutationObserver)
Устарели много лет назад

Хронология:

Chrome 126 (май 2024): Последняя версия с поддержкой
Chrome 127 (июль 2024): Удалены

13.5 Удаление AppCache (Safari 18.0)

Критическое изменение: ApplicationCache (AppCache) удалён из Safari 18.0

Что такое AppCache?

Старый механизм офлайн-кэширования:

html

<!-- УСТАРЕЛО -->
<html manifest="app.appcache"></html>

Замена: Service Workers

javascript

// Современный подход
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
}

Почему удалён:

Устарел с 2015 года
Service Workers превосходят
Проблемы безопасности
Ограниченная функциональность

Хронология:

Устарел: 2015
Safari 18.0 (сентябрь 2024): Удалён

13.6 Document Picture-in-Picture (Chrome 130)

Возможность: Полный контроль над окнами picture-in-picture с любым HTML-контентом

За пределами Video PiP

Обычный video PiP поддерживает только видео-элементы. Document PiP позволяет любой HTML:

javascript

const pipWindow = await documentPictureInPicture.requestWindow({
    width: 400,
    height: 300,
});

// Добавить любой HTML в PiP-окно
pipWindow.document.body.innerHTML = `
    <div>
        <h1>Пользовательский PiP-контент</h1>
        <button>Интерактивная кнопка</button>
        <canvas id="game"></canvas>
    </div>
`;

Сценарии использования

Пользовательские видео-контролы в PiP
Мини-музыкальный плеер
Окно видеочата
Виджеты для продуктивности
Игровые окна

Поддержка браузерами:

Chrome 130+ (октябрь 2024): Реализовано
Firefox: Рассматривается
Safari: Пока нет

Источники:

14. Результаты опроса State of HTML 2024

14.1 Обзор опроса

Период: 12 сентября — 5 ноября 2024 Респонденты: 5402 Охват: Расширен на веб-платформу в целом (браузерные API, проблемы, accessibility, аналитика, производительность)

14.2 Ключевые выводы

Наиболее популярные новые возможности

Customizable Select: Наиболее добавляемый в Reading Lists
Anchor Positioning: 11% интерес (и State of CSS, и HTML)
View Transition API: 9% в CSS, 8% в HTML

Низкая осведомлённость о возможностях

Возможности, страдающие от недостатка осведомлённости:

Isolated Web Apps
EditContext API
Элемент <model> для VR/AR

Статус: Большинство не слышали об этих

Хорошо используемые возможности

Продвинутые возможности с высоким adoption:

Lazy loading (loading="lazy")
Атрибуты srcset и sizes (responsive images)
Элемент <picture>

Статус: Широко используются, разработчики планируют продолжать использовать

Настроения разработчиков

Движется ли веб-платформа в правильном направлении?

58% согласны
18% полностью согласны
Всего положительных: 76%

Проблемы разработчиков

Наиболее запрашиваемые HTML-элементы:

Data tables (51% запросили)
Tabs
Toggle-элементы

Вызовы поддержки браузерами

Наибольший вызов: Поддержка старых браузеров

Особенно сложно для:

Popover API
Anchor positioning
Multi-page View Transitions

14.3 Выводы для 2024

Результаты показывают сильный интерес к:

Улучшениям элементов форм
Layout-примитивам (tabs, toggles)
Улучшенным возможностям стилизации
Подходам progressive enhancement

Источники:

15. Interop 2024: Сводка фокусных областей HTML

15.1 Обзор

Interop 2024: Совместные усилия браузерных вендоров по улучшению интероперабельности веб-платформы

Участники:

Apple (Safari/WebKit)
Google (Chrome)
Microsoft (Edge)
Mozilla (Firefox)
Igalia
Bocoup

15.2 Финальные результаты

Общая интероперабельность: 97% (самый высокий когда-либо достигнутый)

15.3 HTML-связанные фокусные области

Стандартизация механизма popover
Консистентное поведение dismissal
Позиционирование top-layer
Статус: Достигнут Baseline (январь 2025)

2. Declarative Shadow DOM

Включение server-side rendering с Shadow DOM
Консистентная реализация во всех браузерах
Статус: Достигнут Baseline (август 2024)

3. Accessibility

Реализация WAI-ARIA
Accessible Name and Description Computation (AccName)
Консистентность модели ролей
Результат: Значительные улучшения во всех браузерах

4. Custom Properties

Консистентность CSS-переменных
Влияет на стилизацию HTML
Результат: Стандартизированное поведение

5. HTTPS URLs для WebSocket

Разрешить схемы http(s) в конструкторе WebSocket
Включить относительные URL
Результат: Реализовано во всех браузерах

6. Обработка URL

Стандартизация парсинга URL
Влияние на HTML-формы и навигацию
Результат: Консистентное поведение

15.4 Фокусные области с влиянием на HTML

CSS-возможности, влияющие на HTML

@starting-style: Анимация элементов, входящих в DOM
transition-behavior: Transitions дискретных свойств
Стилизация Scrollbar: Кастомизация внешнего вида scrollbar
Text text-wrap: balance: Улучшенный layout текста
Относительный цветовой синтаксис: Динамический theming

15.5 Метрики успеха

Процент прохождения тестов: С ~85% (2023) до 97% (2024)

Влияние на разработчиков:

Меньше браузер-специфичных workarounds
Более быстрое принятие возможностей
Более консистентная веб-платформа

15.6 Взгляд вперёд: Interop 2025

Анонсированные фокусные области (для контекста):

CSS Anchor Positioning
Улучшенные элементы форм
View Transitions
И другие...

Источники:

16. Deprecations и Removals

16.1 Возможности, удалённые в 2024

1. Mutation Events (Chrome 127, июль 2024)

Удалённые события:

DOMNodeInserted
DOMNodeRemoved
DOMSubtreeModified
DOMAttrModified
DOMCharacterDataModified

Замена: MutationObserver API

Хронология:

Устарели: Много лет назад
Chrome 126: Последняя версия с поддержкой
Chrome 127 (июль 2024): Удалены

Миграция:

javascript

// Старое (удалено)
element.addEventListener('DOMNodeInserted', handler);

// Новое
const observer = new MutationObserver(handler);
observer.observe(element, { childList: true });

2. ApplicationCache (Safari 18.0, сентябрь 2024)

Удалённая возможность: <html manifest="app.appcache">

Замена: Service Workers + Cache API

Хронология:

Устарел: 2015
Safari 18.0 (сентябрь 2024): Удалён

Миграция:

javascript

// Старое (удалено)
<html manifest="app.appcache">

// Новое
navigator.serviceWorker.register('/sw.js');

16.2 Возможности, устаревшие (но не удалённые)

1. Атрибут `type` на списках (Firefox 122)

Устарел на <ol>:

type="disc"
type="circle"
type="square"
type="none"

Устарел на <ul>:

type="1"
type="a"
type="A"
type="i"
type="I"

Замена: CSS list-style-type

css

/* Вместо <ol type="A"> */
ol {
    list-style-type: upper-alpha;
}

/* Вместо <ul type="square"> */
ul {
    list-style-type: square;
}

Статус: Всё ещё работает, но не рекомендуется

16.3 Будущие deprecations для отслеживания

Потенциальные будущие removals

Старый синтаксис WebVTT
Нестандартные атрибуты (браузер-специфичные)
Устаревшие атрибуты форм

Источники:

17. Хронология версий браузеров

17.1 Релизы Chrome/Edge (2024)

Версия	Дата релиза	Ключевые HTML-возможности
121	17 января	Улучшения Speculation Rules
122	14 февраля	Storage Buckets API
123	13 марта	Свойство `field-sizing`
124	16 апреля	Атрибут `writingsuggestions`, scroll-контейнеры фокусируются
125	14 мая	Storage Access API (не-cookie), CSS anchor positioning
126	11 июня	Cross-document view transitions
127	16 июля	Mutation Events удалены
128	20 августа	Улучшения Ruby, стандартизация CSS zoom
129	17 сентября	Улучшения CSS
130	15 октября	Document Picture-in-Picture
131	12 ноября	Псевдоэлемент `::details-content`
132	10 декабря	(Релиз, детали ожидаются)

17.2 Релизы Firefox (2024)

Версия	Дата релиза	Ключевые HTML-возможности
121	19 декабря 2023	Lazy loading iframes
122	23 января	`<hr>` в `<select>`, Declarative Shadow DOM (экспериментально)
123	20 февраля	Declarative Shadow DOM (стабильно) — веха Baseline
124	19 марта	Улучшения
125	16 апреля	Popover API
126	14 мая	Улучшения
127	11 июня	Улучшения
128	9 июля	Улучшения
129	6 августа	Улучшения
130	3 сентября	Атрибут `name` для `<details>`, `dir`/`lang` в Shadow DOM
131	1 октября	Улучшения
132	29 октября	Улучшения
133	26 ноября	`interactive-widget` viewport meta, изменения transient activation

17.3 Релизы Safari (2024)

Версия	Дата релиза	Платформа	Ключевые HTML-возможности
17.2	Декабрь 2023	macOS, iOS	(До 2024)
17.3	22 января	macOS, iOS	Улучшения
17.4	5 марта	macOS, iOS, iPadOS	Нативный switch, WebVTT entities, `::spelling-error`, `::grammar-error`
17.5	13 мая	macOS, iOS	`text-wrap: balance`
17.6	29 июля	macOS, iOS	Исправления
18.0	16 сентября	macOS 14+, iOS 18	`writingsuggestions`, брайлевские ARIA, AppCache удалён
18.1	28 октября	macOS, iOS	Улучшения
18.2	11 декабря	macOS, iOS, iPadOS, visionOS	`input type="week"` на iOS, `blocking="render"`, улучшения ruby

17.4 Вехи Baseline (2024)

Возможность	Дата Baseline	Браузер/версия, обеспечивший
Declarative Shadow DOM	5 августа 2024	Firefox 123 (фев 2024)
Popover API	27 января 2025	Safari 18.3 (исправление iOS)
Элемент `<search>`	2023 (широко принят 2024)	—
Атрибут `inert`	Апрель 2023 (широко используется 2024)	—

18. Ключевые спецификации и стандарты

18.1 WHATWG HTML Living Standard

URL: https://html.spec.whatwg.org/

Дополнения 2024:

Стандартизирован Popover API
Declarative Shadow DOM
Invoker Commands (атрибуты command и commandfor)
Атрибут autocorrect
Кастомизируемый <select> (в процессе)
Элемент <selectedcontent> (предложен)

Review Drafts:

Январь 2024: https://html.spec.whatwg.org/review-drafts/2024-01/

18.2 Спецификации W3C

ARIA 1.3 (First Public Working Draft — январь 2024)

URL: https://w3c.github.io/aria/

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

Роли suggestion, comment, mark
aria-description, aria-braillelabel, aria-brailleroledescription
aria-details множественные IDREFS

ARIA в HTML

URL: https://www.w3.org/TR/2024/REC-html-aria-20241223/

Статус: W3C Recommendation (23 декабря 2024)

Назначение: Определить, как HTML-элементы соотносятся с ARIA-ролями

CSS-спецификации, влияющие на HTML

CSS Basic User Interface Module Level 4
- Свойство field-sizing
- appearance: base-select
CSS View Transitions
- Cross-document transitions
- Правило @view-transition
CSS Anchor Positioning
- Влияет на позиционирование popover и select

18.3 Позиции браузерных стандартов (2024)

Позиции Mozilla (Firefox)

Popover API: Положительная → Выпущен (125)
Declarative Shadow DOM: Положительная → Выпущен (123)
Invoker Commands: Положительная → В разработке
Кастомизируемый select: Рассматривается

Позиции WebKit (Safari)

Popover API: Поддерживающая → Выпущен (17.0+)
Declarative Shadow DOM: Поддерживающая → Выпущен (17.4)
Invoker Commands: Поддерживающая
Кастомизируемый select: Положительные сигналы

Позиции Chrome

Ведущая реализация большинства возможностей 2024
Активное участие в Open UI community group
Быстрая итерация на экспериментальных возможностях

19. Ключевые ресурсы и документация

19.1 Официальная документация

19.2 Ресурсы web.dev

Baseline: https://web.dev/baseline
Interop 2024: https://web.dev/blog/interop-2024
Popover Baseline: https://web.dev/blog/popover-baseline
Ежемесячные обновления платформы: https://web.dev/blog/

19.3 Can I Use

Общее: https://caniuse.com/
Popover: https://caniuse.com/?search=popover
Declarative Shadow DOM: https://caniuse.com/declarative-shadow-dom
Dialog: https://caniuse.com/dialog
Lazy loading: https://caniuse.com/loading-lazy-attr

19.4 Open UI

Invoker Commands: https://open-ui.org/components/invokers.explainer/
Кастомизируемый Select: https://open-ui.org/components/selectlist/
Community Group: https://github.com/openui/open-ui

19.5 Interop 2024

Dashboard: https://wpt.fyi/interop-2024
GitHub: https://github.com/web-platform-tests/interop/blob/main/2024/README.md

20. Сводка и влияние

20.1 Основные достижения 2024 года

1. Вехи Baseline

Declarative Shadow DOM: Достигнут Baseline (август 2024)
Popover API: Достигнут статус Baseline (январь 2025, разработка в 2024)
Значительное улучшение межбраузерной консистентности

2. Революция элементов форм

Нативный switch-контрол (Safari)
<hr> в <select> (все браузеры)
field-sizing для автоматически растущих inputs (Chrome)
Путь к кастомизируемому select

3. Улучшения Accessibility

ARIA 1.3 First Public Working Draft
Новые роли и брайлевские атрибуты
Атрибут inert широко принят
Улучшенное наследование Shadow DOM

4. Анимация и Transitions

Возможны анимации Dialog
Анимации элемента Details (Chrome 131)
@starting-style и transition-behavior
Cross-document view transitions

5. Успех Interop

Достигнута 97% интероперабельность
Высочайший процент прохождения тестов
Сильное сотрудничество между вендорами

20.2 Парадигмальные сдвиги

От JavaScript к HTML/CSS

Многие возможности, ранее требовавшие JavaScript, теперь возможны с HTML/CSS:

Popovers (было: пользовательские JS-библиотеки)
Анимации Dialog (было: сложный JS)
Анимации Details (было: jQuery slideToggle)
Invoker commands (было: обработчики кликов)
Автоматически растущие textarea (было: логика resize на JS)

От Polyfills к нативному

Возможности, переходящие от polyfills/библиотек к нативной поддержке браузеров:

Создание Shadow DOM (декларативное)
Управление Popover
Блокировка фокуса (dialog)
Lazy loading

Progressive Enhancement

Современный подход подчёркивает:

Работает без JavaScript
Улучшается с JavaScript
Доступно по умолчанию
Производительность по дизайну

20.3 Преимущества для разработчиков

Меньше кода: Нативные возможности заменяют пользовательские реализации
Улучшенная производительность: Браузерно-оптимизированные реализации
Улучшенная Accessibility: Встроенная поддержка a11y
Более быстрая разработка: Меньше времени на polyfills и workarounds
Более лёгкое обслуживание: Стандартные API вместо обновлений библиотек

20.4 Остающиеся вызовы

Вариабельность поддержки браузерами

Новые возможности требуют времени для достижения всех браузеров
Поддержка старых браузеров всё ещё нужна для многих проектов
Требуются стратегии progressive enhancement

Принятие возможностей

Осведомлённость разработчиков о новых возможностях
Документация и ресурсы обучения
Преодоление старых привычек (например, использование div вместо семантического HTML)

Пробелы, выявленные опросом State of HTML

Необходимость нативного компонента data tables
Запрос на нативные tabs
Запрос на нативные toggle-элементы
Улучшения валидации форм

20.5 Взгляд в будущее

2025 и далее

Вероятные разработки:

Кастомизируемый select достигнет стабильных браузеров
Выпуск Invoker commands
Больше достижений Baseline
Продолжение усилий Interop (анонсирован Interop 2025)

Области для отслеживания:

Зрелость Web Components
Интеграция AI в HTML (подсказки при вводе и т.д.)
Оптимизации производительности
Мобильно-специфичные улучшения

21. Ключевые выводы

21.1 Основные тренды 2024 года

Декларативный подход: Переход к HTML-первому решению проблем UI
Интероперабельность: Беспрецедентное сотрудничество браузерных вендоров
Accessibility First: Встроенная доступность как стандарт, а не дополнение
Формы и ввод: Значительные улучшения элементов форм
Анимация: Нативные возможности для анимации интерактивных элементов
Web Components: Зрелость инструментов для создания переиспользуемых компонентов

21.2 Технологии, готовые к production

Безопасно использовать:

✅ Popover API (с января 2025, Baseline)
✅ Declarative Shadow DOM (Baseline август 2024)
✅ <dialog> с улучшениями анимации
✅ Атрибут inert (широко поддерживается)
✅ loading="lazy" для <img> и <iframe>
✅ Элемент <search> (Baseline 2023)

Требуют progressive enhancement:

⚠️ Атрибут name для <details> — полифилл для Firefox
⚠️ Кастомизируемый <select> — экспериментально, требует fallback
⚠️ field-sizing — только Chromium
⚠️ Invoker Commands — ещё не выпущено

21.3 Рекомендации по внедрению

Немедленно внедрять:
- Popover API вместо пользовательских решений
- Declarative Shadow DOM для Web Components с SSR
- Улучшения анимации для <dialog>
- loading="lazy" для всего below-the-fold контента
Использовать с осторожностью:
- Новые элементы форм с feature detection
- Кастомизируемый select с fallback
- Атрибут name для <details> с полифиллом
Следить за развитием:
- Invoker Commands (готовится к выпуску)
- Кастомизируемый select (сбор отзывов)
- Дальнейшие улучшения форм

22. Источники

Официальные релиз-ноуты

Chrome Platform Status: https://chromestatus.com/
Chrome Release Notes: https://developer.chrome.com/release-notes/
Chrome Blog: https://developer.chrome.com/blog
WebKit Blog: https://webkit.org/blog/
- Safari 17.4: https://webkit.org/blog/15063/webkit-features-in-safari-17-4/
- Safari 18.0: https://webkit.org/blog/15865/webkit-features-in-safari-18-0/
- Safari 18.2: https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
Firefox Release Notes (MDN): https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases
- Firefox 123: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/123
- Firefox 130: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130
- Firefox 133: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/133
Mozilla Hacks: https://hacks.mozilla.org/

Спецификации

WHATWG HTML Living Standard: https://html.spec.whatwg.org/
W3C ARIA 1.3: https://w3c.github.io/aria/
ARIA в HTML: https://www.w3.org/TR/2024/REC-html-aria-20241223/
Open UI: https://open-ui.org/
W3C WebVTT: https://www.w3.org/TR/webvtt1/

Ресурсы веб-платформы

web.dev: https://web.dev/
web.dev Baseline: https://web.dev/baseline
web.dev Interop 2024: https://web.dev/blog/interop-2024
MDN Web Docs: https://developer.mozilla.org/
Can I Use: https://caniuse.com/

Interop 2024

Interop 2024 Dashboard: https://wpt.fyi/interop-2024
Interop GitHub: https://github.com/web-platform-tests/interop/blob/main/2024/README.md
WebKit Interop Success: https://webkit.org/blog/16413/the-success-of-interop-2024/

Ресурсы сообщества

State of HTML 2024: https://2024.stateofhtml.com/
Open UI Community Group: https://github.com/openui/open-ui
CSS-Tricks: https://css-tricks.com/
web-platform-tests GitHub: https://github.com/web-platform-tests/wpt

Технические статьи

Introducing the Popover API: https://developer.chrome.com/blog/introducing-popover-api
Popover API lands in Baseline: https://web.dev/blog/popover-api
Declarative Shadow DOM: https://web.dev/articles/declarative-shadow-dom
RFC Customizable Select: https://developer.chrome.com/blog/rfc-customizable-select
Styling Details Element: https://developer.chrome.com/blog/styling-details
Browser-level Image Lazy Loading: https://web.dev/articles/browser-level-image-lazy-loading
Blocking Render: https://csswizardry.com/2024/08/blocking-render-why-whould-you-do-that/

GitHub Pull Requests и Issues

WHATWG HTML PR #9841 (Invoker Commands): https://github.com/whatwg/html/pull/9841
WHATWG HTML PR #9400 (Details name): https://github.com/whatwg/html/pull/9400
WHATWG HTML PR #7320 (Search element): https://github.com/whatwg/html/pull/7320
Mozilla Standards Positions #608: https://github.com/mozilla/standards-positions/issues/608

Дополнительные ресурсы

Medium: Animate Details Element: https://medium.com/@jgustavo.wd/solved-how-to-fully-animate-the-details-html-element-with-only-css-no-javascript-b7d32c53a9d7
Interactive Widget: https://zwyx.dev/til/2024/03/27/interactive-widget
HTMHell Advent Calendar: https://htmhell.dev/adventcalendar/2024/4/
Adactio Journal: https://adactio.com/journal/21803
WeAreDevelopers Magazine: https://www.wearedevelopers.com/en/magazine/506/the-state-of-html-2024-what-can-we-learn-from-it
State of CSS/HTML 2024: https://web.dev/blog/state-of-css-html-2024

Дата создания отчёта: 18 ноября 2024
Research ID: frontend-baseline-2023-2025
Автор: DeepResearch Agent
Связанные отчёты: HTML 2023, CSS 2024, JavaScript 2024

HTML — изменения 2024 года ​

Обзор года ​

1. Popover API ​

1.1 Обзор ​

1.2 Статус Baseline ​

1.3 Хронология поддержки браузерами ​

1.4 Ключевые возможности ​

HTML-атрибуты ​

Chrome-специфичные дополнения (2024) ​

1.5 Поведение Top Layer ​

1.6 Сценарии использования ​

1.7 Практический пример ​

1.8 Interop 2024 ​

2. Declarative Shadow DOM ​

2.1 Обзор ​

2.2 Статус Baseline ​

2.3 Хронология поддержки браузерами ​

2.4 Реализация ​

Синтаксис HTML ​

Значения атрибута shadowrootmode: ​

Реализация Firefox (Firefox 122) ​

2.5 Ключевые преимущества ​

2.6 Практический пример ​

2.7 Сценарии использования ​

2.8 Interop 2024 ​

3. Улучшения элемента Dialog ​

3.1 Статус Baseline ​

3.2 Эволюция браузеров ​

3.3 Улучшения анимации в 2024 ​

Chrome 131 (ноябрь 2024): псевдоэлемент ::details-content ​

Новые CSS-свойства для анимации (Interop 2024) ​

3.4 Возможности элемента Dialog ​

HTML-атрибуты ​

Методы ​

Стилизация ​

3.5 Улучшения accessibility ​

Управление фокусом ​

Интеграция ARIA ​

3.6 Изменения спецификации ​

Изменение поведения Safari 17 ​

4. Улучшения элемента Details ​

4.1 Обзор ​

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

1. Атрибут name (Firefox 130, сентябрь 2024) ​

2. Псевдоэлемент ::details-content (Chrome 131, ноябрь 2024) ​

3. Поддержка свойства Display (Chrome 131) ​

4.3 Возможности анимации (2024) ​

Современный подход (Chromium) ​

Полный пример ​

4.4 Сводная таблица поддержки ​

5. Улучшения элементов форм ​

5.1 Нативный switch-контрол (Safari 17.4, март 2024) ​

5.2 <hr> в <select> (Firefox 122, январь 2024) ​

5.3 Field Sizing (Chrome 123, март 2024) ​

5.4 Управление подсказками при вводе (Chrome 125, Safari 18.0) ​

5.5 Стандартизация Autocorrect (2024) ​

5.6 Accessibility для полей даты/времени (Safari 18.0) ​

5.7 Input Type Week на iOS (Safari 18.2, декабрь 2024) ​

6. Кастомизируемый элемент Select ​

6.1 Обзор ​

6.2 Эволюция ​

6.3 Ключевые возможности ​

1. appearance: base-select (CSS) ​

2. Элемент <selectedcontent> (позже <selectedoption>) ​

3. Новые псевдоэлементы ​

6.4 Пример ​

6.5 Интеграция с другими возможностями ​

6.6 Поддержка браузерами ​

6.7 Запрос обратной связи ​

6.8 Участие Open UI ​

6.9 Традиционные ограничения (решаемые) ​

7. Invoker Commands / Command-атрибуты ​

7.1 Обзор ​

7.2 Эволюция названий атрибутов ​

7.3 Синтаксис ​

7.4 Принцип работы ​

7.5 Встроенные команды ​

Для Dialog ​

Для Popover ​

7.6 Поведение по умолчанию ​

HTML — изменения 2024 года

Обзор года

1. Popover API

1.1 Обзор

1.2 Статус Baseline

1.3 Хронология поддержки браузерами

1.4 Ключевые возможности

HTML-атрибуты

Chrome-специфичные дополнения (2024)

1.5 Поведение Top Layer

1.6 Сценарии использования

1.7 Практический пример

1.8 Interop 2024

2. Declarative Shadow DOM

2.1 Обзор

2.2 Статус Baseline

2.3 Хронология поддержки браузерами

2.4 Реализация

Синтаксис HTML

Значения атрибута `shadowrootmode`:

Реализация Firefox (Firefox 122)

2.5 Ключевые преимущества

2.6 Практический пример

2.7 Сценарии использования

2.8 Interop 2024

3. Улучшения элемента Dialog

3.1 Статус Baseline

3.2 Эволюция браузеров

3.3 Улучшения анимации в 2024

Chrome 131 (ноябрь 2024): псевдоэлемент `::details-content`

Новые CSS-свойства для анимации (Interop 2024)

3.4 Возможности элемента Dialog

HTML-атрибуты

Методы

Стилизация

3.5 Улучшения accessibility

Управление фокусом

Интеграция ARIA

3.6 Изменения спецификации

Изменение поведения Safari 17

4. Улучшения элемента Details

4.1 Обзор

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

1. Атрибут `name` (Firefox 130, сентябрь 2024)

2. Псевдоэлемент `::details-content` (Chrome 131, ноябрь 2024)

3. Поддержка свойства Display (Chrome 131)

4.3 Возможности анимации (2024)

Современный подход (Chromium)

Полный пример

4.4 Сводная таблица поддержки

5. Улучшения элементов форм

5.1 Нативный switch-контрол (Safari 17.4, март 2024)

5.2 `<hr>` в `<select>` (Firefox 122, январь 2024)

5.3 Field Sizing (Chrome 123, март 2024)

5.4 Управление подсказками при вводе (Chrome 125, Safari 18.0)

5.5 Стандартизация Autocorrect (2024)

5.6 Accessibility для полей даты/времени (Safari 18.0)

5.7 Input Type Week на iOS (Safari 18.2, декабрь 2024)

6. Кастомизируемый элемент Select

6.1 Обзор

6.2 Эволюция

6.3 Ключевые возможности

1. `appearance: base-select` (CSS)

2. Элемент `<selectedcontent>` (позже `<selectedoption>`)

3. Новые псевдоэлементы

6.4 Пример

6.5 Интеграция с другими возможностями

6.6 Поддержка браузерами

6.7 Запрос обратной связи

6.8 Участие Open UI

6.9 Традиционные ограничения (решаемые)

7. Invoker Commands / Command-атрибуты

7.1 Обзор

7.2 Эволюция названий атрибутов

7.3 Синтаксис

7.4 Принцип работы

7.5 Встроенные команды

Для Dialog

Для Popover

7.6 Поведение по умолчанию