Как сверстать

На 9 октября в обзоре есть новые возможности для изображений, списков и текста. Все они пока поддерживаются частью браузеров. Самый полезный старт — добавить JPEG XL с запасной фотографией в привычном формате.

Это промежуточный выпуск за 1–9 октября 2026 года. Месяц ещё продолжается. Сверяемся с октябрьской страницей Web Features Explorer и выбираем изменения для вёрстки и фронтенда.

Хронологию взяли из Explorer и дополнили релизом Edge 155 от 8 октября: в его примечаниях подтверждены все четыре возможности выпуска. Chrome 155 вышел шестого октября. Возможности остаются ограниченно доступными из-за отсутствия поддержки в Firefox или Safari.

Сентябрь принёс CSS-функции для тёмной темы и расчётов. А группировка данных и объединение сигналов отмены перешли в широко доступные возможности. Начнём с оформления карточки: здесь результат видно сразу.

Выпуск собран по сентябрьским заметкам Web Features Explorer, поддержка сверена на 9 октября 2026 года. Выбрали то, что пригодится в вёрстке и браузерном JavaScript.

У новинок бывают разные даты. Newly Available означает, что возможность поддерживают актуальные основные браузеры. Через 30 месяцев она получает статус Widely Available. Поэтому широко доступная функция могла появиться несколько лет назад; старые браузеры всё равно нужно учитывать отдельно.

В августе CSS получил сведения о положении элемента среди соседей, а декларативный теневой DOM стал широко доступным. Разберём список с задержками анимации, изолированный бейдж и новый способ соединять значения итератора в строку.

Темы взяли из августовского выпуска Web Features Explorer. Факты сверены на 9 октября 2026 года. Newly Available означает поддержку актуальных основных браузеров; Widely Available наступает спустя 30 месяцев. В старых версиях и встроенных браузерах приложений поддержка может отличаться.

В июле AVIF и несколько возможностей CSS и JavaScript получили статус широко доступных. Для вёрстки это повод проверить изображения и декоративные формы, а для фронтенда — поработать с асинхронными данными и календарями.

Выбрали прикладные темы из июльского выпуска Web Features Explorer. Статусы и примеры сверены на 9 октября 2026 года. Дата в обзоре отмечает изменение доступности: часть этих возможностей появилась в браузерах значительно раньше июля.

Newly Available означает, что возможность поддерживают актуальные основные браузеры. До статуса Widely Available проходит ещё 30 месяцев. Старые версии и встроенные браузеры приложений нужно проверять отдельно, ориентируясь на аудиторию своего проекта.

В июне поле для комментария научилось расти по содержимому во всех актуальных основных браузерах. А :has(), вложенность CSS и несколько приёмов загрузки изображений стали широко доступными. Начните с формы и проверьте, какие картинки действительно нужны на первом экране.

Собрали полезное для вёрстки из июньского выпуска Web Features Explorer. Поддержку и даты сверили 9 октября 2026 года. Новое появление и широкая доступность в этом обзоре разделены: они отвечают на разные вопросы.

Статус касается доступности. Newly Available означает поддержку актуальных основных браузеров, в которых можно сравнить учебный пример, открыть состояние формы и проверить результат без установки экспериментальной версии или включения флагов. Widely Available получают возможности, которым после этого исполнилось 30 месяцев. Если ваше окружение включает старые версии или встроенные браузеры приложений, сверяйте их отдельно.

Тег <details> уже давно позволяет делать раскрывающиеся блоки без единой строки JavaScript. Но у него была одна проблема: несколько таких блоков работали независимо — открытие одного никак не влияло на другие. Аккордеон, в котором открыт только один раздел, приходилось делать через JS. В 2024 году это изменилось: у <details> появился атрибут name.

Если дать нескольким элементам <details> одинаковый атрибут name, браузер объединит их в группу. Когда открывается один элемент — остальные из группы автоматически закрываются. Это поведение точно как у радиокнопок с одинаковым name.

<details name="faq">
  <summary>Вопрос первый</summary>
  <p>Ответ на первый вопрос.</p>
</details>

<details name="faq">
  <summary>Вопрос второй</summary>
  <p>Ответ на второй вопрос.</p>
</details>

<details name="faq">
  <summary>Вопрос третий</summary>
  <p>Ответ на третий вопрос.</p>
</details>

Это и есть эксклюзивный аккордеон. Ноль JavaScript, ноль дополнительных библиотек.

В мае в актуальных браузерах появились запросы к стилям контейнера и псевдокласс :open. Теперь карточку можно сделать компактной по настройке контейнера, а раскрытый блок — подсветить. Разберём эти приёмы вместе с ошибками формы и всплывающими подсказками.

Основа выпуска — майские новинки Web Features Explorer. Поддержку и хронологию сверили 9 октября 2026 года. Выбрали изменения для карточек, форм и небольших всплывающих интерфейсов.

Сначала — актуальные браузеры. Newly Available означает, что выбранный приём заработал в их последних стабильных версиях, поэтому пример из статьи можно сравнить в каждом из них, прежде чем принимать решение для проекта. До статуса Widely Available проходит 30 месяцев: знакомая возможность получает время распространиться. Оба статуса помогают планировать работу, но поддержку старых браузеров и встроенных браузеров приложений проверяйте по требованиям проекта.

Перенос слов в заголовках и текстовых блоках — деталь, на которую пользователи не обращают внимания, когда она хороша, и сразу замечают, когда что-то не так. Одиноко висящее слово в последней строке заголовка, или строки разной длины там, где хотелось симметрии — такое встречается часто. CSS text-wrap предлагает два умных режима для решения этой проблемы.

В апреле браузеры договорились о контрастном цвете текста, а привычные поиск и ARIA получили статус широкой доступности. Начните с этих изменений: их можно проверить на одной кнопке и форме, прежде чем трогать весь проект.

Продолжаем мартовский обзор по апрельской подборке Web Features Explorer. Хронологию и поддержку сверили 9 октября 2026 года. Выбрали возможности для вёрстки и браузерного JavaScript.

Даты говорят о доступности. Newly Available означает, что возможность заработала в актуальных основных браузерах, поэтому учебный пример можно проверить в каждом из них и сравнить результат, который пользователь увидит на странице. Widely Available появляется через 30 месяцев после этого. Знакомый тег тоже может оказаться новостью. Для старых браузеров и встроенных браузеров приложений поддержка требует отдельной проверки.

Запрограммировать модальное окно — одна из самых частых задач во фронтенде. Раньше для этого брали готовую библиотеку, писали десятки строк JavaScript, вручную блокировали прокрутку страницы, управляли фокусом и добавляли затемнение через отдельный div. Всё это работало, но требовало много кода и было легко сломать.

В HTML уже давно есть специальный элемент для этого — тег <dialog>. Долго его поддержка была неполной, но с 2022 года он работает во всех современных браузерах, и теперь им можно пользоваться без оговорок.