Добро пожаловать в очередной выпуск What’s !important. Выпуск №15 наполнен практическими техниками для создания современных, доступных и адаптивных веб-интерфейсов. Мы рассмотрим boundary-aware CSS, дизайн на основе времени, постоянное решение для full-bleed макетов, обновления кастомизируемого элемента <select>, а также подборку из 35 новых функций веб-платформы, анонсированных на Google I/O 2026.

Boundary-Aware CSS с функцией view()

Преети Сэм продемонстрировала, как использовать функцию view() для создания boundary-aware CSS. Эта техника позволяет элементам адаптировать своё положение или внешний вид в зависимости от видимости в пределах области просмотра. Три примера на CodePen показывают практические реализации: липкая навигация, меняющая стиль на границе скролла; тултип, меняющий направление при достижении края; и индикатор прогресса, отслеживающий видимость элемента.

По смежной теме Master.dev опубликовал материал о том, как сделать интерактивные элементы невидимыми, но доступными с помощью CSS. В статье отмечается, что для полной доступности требуется дополнительная работа, и предлагается новое значение для атрибута hidden в качестве потенциального решения.

Макет Grid Lanes: доступность и reading-flow

Дэн Холлоран написал о макете grid lanes (ранее называемом «masonry layout»). Мануэль Матузович выразил обеспокоенность по поводу его доступности. В продолжение Матузович предложил использовать свойство reading-flow для обеспечения доступности grid lanes — этот подход пока не тестировался в браузерах, но выглядит многообещающим.

Веб-дизайн на основе времени

Софи Кунин показала, как менять внешний вид сайта в зависимости от времени суток с помощью Temporal API и color-mix(). Эффект схож с динамическими обоями macOS: тонкие сдвиги цветовой палитры и контраста, соответствующие локальному времени пользователя. Для бизнеса на Кипре, работающего с несколькими часовыми поясами (например, ЕС и Ближний Восток), это может улучшить пользовательский опыт за счёт адаптации читаемости или брендовых сигналов.

Full-Bleed CSS: современное решение

Дэвид Башелл решил классическую проблему full-bleed CSS: сделать элемент растянутым на всю ширину области просмотра без переполнения, даже если он вложен в контейнер. Трюк заключается в использовании единиц контейнерных запросов (cqw). Это особенно полезно для hero-секций, баннеров и разделителей на сайтах с ограниченными макетами.

FixCSS: пересмотр сожалений CSS

Рабочая группа CSS ведёт публичный список того, что они изменили бы в CSS, если бы могли начать заново. Вдохновившись этим списком, Деклан Чидлоу создал FixCSS — инструмент, применяющий «исправления» рабочей группы на практике. Самое заметное изменение — замена border-radius на corner-radius, что соответствует предпочтению WG в пользу более интуитивных названий.

Улучшенный кастомизируемый <select>

Джейк Арчибальд решил проблемы с размерами кастомизируемого элемента <select>. Его решение улучшает UX, гарантируя, что выпадающий список правильно масштабируется под содержимое и учитывает ограничения контейнера — это важно для форм на многоязычных сайтах (английский, русский, греческий).

35 новых функций веб-платформы (Google I/O 2026)

Брамус и Уна Краветс представили 35 функций на Google I/O 2026 — от экспериментальных до готовых к Baseline. Основные моменты:

  • AccentColor и AccentColorText (теперь в Baseline) — учитывают системные акцентные цвета пользователя.
  • Поддержка <image> для light-dark() — пока нет поддержки в Safari.
  • Контейнерные запросы через запятую — поддержки в Safari нет.
  • background-clip: border-area — поддержки в Firefox нет.
  • Скругление углов для polygon() — поддержки в Safari и Firefox нет.
  • Анимируемый zoom — поддержки в Safari и Firefox нет.
  • text-fit — поддержки в Safari и Firefox нет.
  • flex-wrap: balance — поддержки в Safari и Firefox нет.
  • named-feature() — поддержки в Safari и Firefox нет.
  • Атрибут focusgroup — поддержки в Safari и Firefox нет.
  • overscroll-behavior: chain — поддержки в Safari и Firefox нет.

Командам разработчиков, работающим над проектами для клиентов из ЕС, стоит учитывать, что многие функции не имеют кросс-браузерной поддержки. Планируйте прогрессивное улучшение и тестируйте на реальных пользовательских агентах. Такие функции, как AccentColor и container queries, можно использовать уже сейчас; для остальных требуются запасные варианты.

На этом выпуск №15 завершён. Увидимся через две недели.