Новинки веб-платформы в июне 2026: растущие поля, :has() и загрузка изображений
- 5 июля 2026
В июне поле для комментария научилось расти по содержимому во всех актуальных основных браузерах. А :has(), вложенность CSS и несколько приёмов загрузки изображений стали широко доступными. Начните с формы и проверьте, какие картинки действительно нужны на первом экране.
Собрали полезное для вёрстки из июньского выпуска Web Features Explorer. Поддержку и даты сверили 9 октября 2026 года. Новое появление и широкая доступность в этом обзоре разделены: они отвечают на разные вопросы.
Статус касается доступности. Newly Available означает поддержку актуальных основных браузеров, в которых можно сравнить учебный пример, открыть состояние формы и проверить результат без установки экспериментальной версии или включения флагов. Widely Available получают возможности, которым после этого исполнилось 30 месяцев. Если ваше окружение включает старые версии или встроенные браузеры приложений, сверяйте их отдельно.
Что получили актуальные браузеры
field-sizing: поле растёт вместе с комментарием
Пользователь пишет пару строк в <textarea>, а затем вставляет большой отзыв. Тексту нужно место. С field-sizing: content поле подстраивается под содержимое; для такого роста не нужен обработчик каждого ввода. Возможность Newly Available с 16 июня, когда поддержку добавил Firefox 152.
<label for="comment">Комментарий к проекту</label>
<textarea id="comment" class="comment" name="comment" rows="4"
placeholder="Что получилось, а что хотите обсудить?"></textarea>.comment {
display: block;
box-sizing: border-box;
inline-size: 100%;
max-inline-size: 40rem;
min-block-size: 6rem;
resize: vertical;
font: inherit;
line-height: 1.5;
}
@supports (field-sizing: content) {
.comment {
field-sizing: content;
min-block-size: 6lh;
max-block-size: 12lh;
}
}Росту нужна граница. Ширину мы ограничили, поэтому при длинном тексте поле растёт по высоте и остаётся в пределах своего контейнера, даже если пользователь вставил целый абзац из другого документа. Если текст не помещается в максимальную высоту 12lh, появится прокрутка. Нижняя граница сохраняет место для начала ответа. Поле не схлопнется.
В поддерживающем браузере rows больше не определяет предпочтительную высоту такого поля. Размер текста-подсказки тоже влияет на исходный размер. Попробуйте ввод, удаление и вставку длинного абзаца, затем увеличьте масштаб страницы.
Старый браузер получит обычное поле с rows="4", минимальной высотой и ручным изменением размера. Для формы этого часто достаточно. Если автоматический рост обязателен, понадобится отдельный запасной обработчик. Не задавайте фиксированную высоту поверх field-sizing: content: поле потеряет возможность расти. Правила размеров — в MDN о field-sizing.
Что стало широко доступным
:has(): подсветите выбранную карточку
19 июня :has() стал широко доступным. Псевдокласс проверяет, есть ли относительно текущего элемента совпадение с переданным селектором. Для карточки выбора это убирает отдельный скрипт, который дублирует состояние флажка в классе.
<label class="plan">
<input type="checkbox" name="review">
<span>Добавить проверку проекта наставником</span>
</label>.plan {
display: block;
padding: 1rem;
border: 2px solid #b9b9b9;
border-radius: 0.5rem;
}
@supports selector(:has(input:checked)) {
.plan:has(input:checked) {
border-color: #5926c9;
background-color: #f1ecff;
}
}Отметьте флажок — изменится фон всей карточки. Снимите отметку, и базовое оформление вернётся. Флажок остаётся видимым. Он работает с клавиатуры, а рамка служит дополнительной подсказкой состояния, поэтому человек может проверить свой выбор даже в окружении, где новое оформление родительского элемента не появилось.
Ограничьте область поиска. Здесь это конкретная .plan и её поле. Не начинайте со сложного селектора, который проверяет всё дерево страницы при каждом изменении. У :has() есть правила специфичности, а вкладывать один :has() в другой нельзя. Для старого браузера остаётся рабочий флажок. Синтаксис и ограничения — в справочнике :has().
Вложенность CSS: держите состояния кнопки рядом
Держите состояния рядом. С 11 июня нативная вложенность CSS широко доступна. Браузер умеет читать вложенные правила сам. Например, основное оформление кнопки и её состояния можно держать в одном блоке.
<button class="action" type="button">Открыть задание</button>.action {
padding: 0.75rem 1rem;
border: 2px solid #5926c9;
border-radius: 0.5rem;
background-color: white;
color: #5926c9;
&:hover {
background-color: #f1ecff;
}
&:focus-visible {
outline: 3px solid #1b1b1b;
outline-offset: 3px;
}
}& обозначает селектор внешнего правила. Поэтому &:hover выбирает саму кнопку при наведении. Если написать вложенный :hover без &, получится проверка наведённого потомка — это другое условие.
Глубину лучше ограничить. Мы рекомендуем держать состояния рядом с компонентом, чтобы при чтении CSS не приходилось восстанавливать цепочку из пяти родителей и искать, какой элемент в ней отвечает за фокус. Нативный синтаксис не склеивает имя класса как &__title в Sass. Если проект должен обслуживать старые браузеры, сохраняйте плоские правила или используйте подходящее преобразование при сборке. О поведении & рассказывает MDN, различия с препроцессорами разобраны в руководстве по вложенности.
loading="lazy": отложите картинку ниже первого экрана
Отложенная загрузка изображений и iframe широко доступна с 19 июня. Браузер сам решает, когда начинать загрузку ресурса, который находится достаточно близко к видимой области.
<img class="project-preview" src="catalog-preview.jpg"
loading="lazy" width="800" height="600"
alt="Карточки товаров в учебном каталоге">.project-preview {
display: block;
max-width: 100%;
height: auto;
}Подготовьте файл catalog-preview.jpg с пропорциями 4:3 и разместите пример ниже первого экрана длинной страницы. Размеры заранее резервируют место, а картинка загружается по мере приближения пользователя к ней. Порог выбирает браузер. Запрос может начаться ещё до появления картинки на экране, когда пользователь только приблизился к следующей секции; поэтому точный момент сетевого запроса проверяйте в выбранном браузере, а не по высоте блока.
Главную картинку загружайте сразу. Если она станет крупнейшим видимым элементом и повлияет на LCP, показатель появления основного содержимого, lazy может задержать этот момент. Отдельно проверьте iframe: у него должен быть понятный title, а отложенная загрузка не отменяет ограничения встраивания и приватности. Запасной вариант — обычная загрузка по src. Поведение описано в MDN о loading.
Предзагрузка адаптивного изображения: сначала найдите задержку
Обратный сценарий: изображение первого экрана важно, но адрес становится известен браузеру только после выполнения скрипта. Тогда можно объявить ресурс раньше, в <head>. Адаптивная предзагрузка широко доступна с 11 июня.
<link rel="preload" as="image"
imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
imagesizes="(max-width: 800px) 100vw, 800px"
fetchpriority="high">Размеры должны совпадать. Для адаптивного выбора imagesrcset и imagesizes используют синтаксис srcset и sizes у изображения. Чтобы браузер выбрал тот же файл, используйте согласованные значения:
<img class="hero" src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(max-width: 800px) 100vw, 800px"
width="1200" height="675"
alt="Учебный проект с адаптивной сеткой каталога">.hero {
display: block;
width: 100%;
max-width: 800px;
height: auto;
}В примере подготовлены три варианта одной картинки с пропорциями 16:9. Атрибут href у предзагрузки намеренно не указан. Старый браузер без imagesrcset у <link> получит картинку из <img> обычным способом и не загрузит заранее случайный вариант.
Если <img> уже находится в начальной HTML-разметке и обнаруживается сразу, дополнительная предзагрузка часто не нужна. Сначала посмотрите цепочку запросов в инструментах разработчика. Несколько «важных» предзагрузок конкурируют за сеть; объявляйте лишь тот ресурс, для которого нашли задержку. Синтаксис описан в MDN о preload, а адаптивный выбор и случаи применения — в материале web.dev.
Что попробовать в своём проекте
Возьмите поле комментария и добавьте field-sizing как улучшение поверх работающего <textarea>. С изображениями начните с сети. Решение определяется местом картинки и временем её обнаружения: прежде чем добавить новый атрибут, выясните, какая картинка появилась в цепочке запросов поздно и чем вызвана эта задержка.
- Вставьте в поле длинный отзыв, затем удалите текст и увеличьте масштаб страницы.
- Выберите карточку флажком с клавиатуры; убедитесь, что состояние видно и без изменения фона.
- Проверьте, что картинка первого экрана начинает загружаться без ожидания прокрутки.
- Если добавили предзагрузку, сравните выбранный URL с запросом от
<img>и исключите вторую загрузку того же изображения.
Какая картинка на вашей странице нужна до первой прокрутки? Сможет ли человек прочитать длинный комментарий, когда поле достигнет максимальной высоты?
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.