Новинки WebKit в Safari 27.1 и 27.2: экраны-раскладушки и стилизация селектов

Если спросить любого опытного верстальщика, какой нативный элемент HTML он ненавидит сильнее всего, ответ будет предсказуем: выпадающий список <select>. На протяжении тридцати лет существования веба этот скромный элемент оставался непреодолимой стеной между дизайнерами и браузерными движками.

Браузеры рендерили выпадающий список через системные графические примитивы операционной системы. Покрасить фон, скруглить рамку или аккуратно выровнять текст было невозможно: разработчикам приходилось прятать нативный тег и собирать громоздкие кастомные меню на JavaScript с десятком <div>. В результате страдали пользователи: такие меню ломали навигацию с клавиатуры, глючили при масштабировании на смартфонах и превращались в кашу для программ экранного доступа (VoiceOver). Ранее мы наблюдали похожую битву веб-платформы за нативность в материале Firefox 157 и нативная стилизация тултипов: новые возможности веб-платформы, где всплывающие подсказки наконец-то избавились от сторонних библиотек геометрии.

Второй фронт перемен — форм-факторы устройств. Появление складных смартфонов с гибкими или сдвоенными экранами (включая аппаратные анонсы устройств вроде iPhone Duo) поставило верстку в тупик: как сайту узнать, что пользователь согнул экран домиком или развернул его как книгу?

Осенние релизы движка WebKit в версиях Safari 27.1 и 27.2 под кураторством Джен Симмонс отвечают на оба вызова, внедряя стандарты W3C прямо в CSS.

Складные экраны: Device Posture API и переменные окружения

До сих пор адаптивная верстка знала лишь размеры видимой области (viewport) и плотность пикселей. Складные устройства разрушили эту простую модель: физический экран может быть один, но сгиб делит его на два независимых визуальных сегмента.

Спецификация Device Posture API вводит в CSS новые медиавыражения, сообщающие о физической позе гаджета:

• (device-posture: folded) — устройство согнуто под углом (режим книги или ноутбука);
• (device-posture: continuous) — экран полностью распрямлен в единую плоскость.

В дополнение к этому Viewport Segments API сообщает точное геометрическое деление экрана. Браузер предоставляет медиа-запросы (horizontal-viewport-segments: 2) (вертикальная линия сгиба, как разворот книги) и (vertical-viewport-segments: 2) (горизонтальная линия сгиба, как ноутбук на столе).

Чтобы дизайнерам не приходилось вычислять координаты сгиба через JavaScript, WebKit внедрил шесть стандартных переменных окружения: env(viewport-segment-width x y), viewport-segment-height, а также отступы top, bottom, left и right.

Практика верстки под экраны-книжки через CSS Media Queries

Давай посмотрим, как элегантно адаптировать интерфейс ридера или интернет-магазина под двухэкранную раскладушку без единой строчки скриптов:

/* Базовая адаптивная сетка для обычных смартфонов и мониторов */
.book-reader {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Проверка позы устройства: если экран сложен пополам как книга */
@media (device-posture: folded) and (horizontal-viewport-segments: 2) {
  .book-reader {
    display: grid;
    /* Делим интерфейс по физической геометрии двух половинок экрана */
    grid-template-columns:
      env(viewport-segment-width 0 0)
      env(viewport-segment-width 1 0);
    gap: env(viewport-segment-left 1 0);
  }

  .left-page {
    grid-column: 1;
    padding-right: 24px;
  }

  .right-page {
    grid-column: 2;
    padding-left: 24px;
  }
}

Когда пользователь держит сложенный смартфон в руках, Safari автоматически раскладывает контент по двум виртуальным колонкам, аккуратно огибая физический шарнир. В JavaScript текущий режим доступен через свойство navigator.devicePosture.type, которое генерирует событие change при механическом сгибании корпуса.

Конец эпохи кастомных выпадашек: псевдоэлемент ::field-content

В Safari 27.2 сделан гигантский шаг к финализации спецификации Customizable Select. В Safari 27.0 разработчики получили свойство appearance: base-select, разрешившее стилизовать выпадающий список. Однако для оформления текста выбранного элемента требовалось оборачивать разметку в специальный тег <selectedcontent>.

В Safari 27.2 появился нативный псевдоэлемент ::field-content. Теперь стилизация нативного селекта выглядит так же естественно, как оформление обычного текстового поля:

<!-- Нативная семантическая форма заказа без кастомных div-оберток -->
<form class="checkout-form">
  <label for="delivery-service">Служба доставки:</label>
  <select id="delivery-service" class="modern-select">
    <option value="express">Экспресс-курьер (доставка сегодня)</option>
    <option value="standard">Стандартная доставка (2-3 дня)</option>
    <option value="pickup">Самовывоз из пункта выдачи</option>
  </select>
</form>

<style>
/* Активируем режим глубокой кастомизации нативного контрола */
.modern-select {
  appearance: base-select;
  font-family: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #f8fafc;
  color: #334155;
  width: 100%;
}

/* Стилизация текста выбранного пункта через нативный псевдоэлемент */
.modern-select::field-content {
  font-weight: 600;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

Псевдоэлемент ::field-content автоматически наследует обрезание длинных строк (text-overflow) от родителя. Стрелочка выпадающего списка оформляется через псевдоэлемент ::picker-icon, который теперь использует flex: 1 для идеального распределения свободного пространства внутри кнопки.

Безопасное выравнивание поп-апов и Grid Lanes fit-tolerance

Помимо селектов и складных экранов, WebKit принес важные улучшения в позиционирование всплывающих слоев:

• Безопасное выравнивание (Safe Alignment): Ключевое слово safe в правилах выравнивания (например, align-self: safe center) гарантирует, что если всплывающее меню или диалог не помещаются на маленьком экране, браузер не обрежет верхнюю часть контента за пределами видимости, а аккуратно включит прокрутку;
• Рефакторинг Grid Lanes: Свойство flow-tolerance переименовано в fit-tolerance. Оно задает допуск по высоте колонок (по умолчанию 1em), позволяя браузеру уравнивать соседние колонки сетки без разрыва логического порядка фокуса при навигации клавишей Tab. Мы ранее затрагивали тенденции расширения нативного CSS в статье Трансформация веб-платформы: кастомизация скролла в Chrome 154, протоколы MCP и новшества Chrome 155.