Браузерные стандарты и верстка: релиз Safari 27, выравнивание по строке lh и якорные сноски

Современная веб-разработка переживает активный этап переноса сложных задач компоновки интерфейсов из языка программирования JavaScript непосредственно в декларативные механизмы каскадных таблиц стилей CSS. Свежие релизы браузерных движков расширяют палитру стандартных инструментов верстки: от точного математического выравнивания пиктограмм по высоте первой строки текста до контекстного позиционирования плавающих сносок и тултипов через развивающийся стандарт Anchor Positioning.

Safari 27 и WebKit

Выход бета-версии Safari 27 знаменует очередной плановый шаг в выравнивании совместимости движка WebKit с конкурирующими браузерными реализациями. Согласно опубликованным примечаниям к выпуску, инженеры Apple устранили более полусотни ошибок взаимодействия стандартных спецификаций.

Среди ключевых изменений выделяются стабилизация поддержки относительных типографических единиц измерения высоты строки lh и rlh, а также расширение реализации спецификации CSS Anchor Positioning. Исторически различия в рендеринге строчных боксов между Safari, Chrome и Firefox заставляли разработчиков использовать сложные компенсирующие правила и JavaScript-полифилы. Устранение шероховатостей в WebKit сокращает потребность в платформенных хаках и приближает веб к единому поведению во всех ключевых операционных системах.

Иконки по высоте строки

Классическая задача размещения декоративной иконки рядом с текстовой подписью регулярно преподносит неприятные сюрпризы при изменении размера шрифта или адаптивном переносе текста на несколько строк. Стандартное объявление align-items: center в flex-контейнере центрирует иконку относительно всей геометрической высоты текстового блока: как только подпись занимает две или три строки, пиктограмма сползает в середину абзаца. Попытка переключиться на align-items: flex-start поднимает иконку слишком высоко, нарушая оптическую связь с заглавными буквами первой строки.

Фронтенд-исследователь Ахмад Шадид предложил элегантное решение с использованием относительной единицы lh, представляющей точную высоту текущей строки текста. Чтобы иконка идеально встала по центру первой строки независимо от количества последующих строк и размера кегля, смещение рассчитывается как половина разницы между высотой строки и габаритами самой иконки:

.list-item {
  --icon-size: 1.25rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.list-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  /* Центрирование иконки строго по высоте первой строки текстового блока */
  transform: translateY(calc((1lh - var(--icon-size)) / 2));
}

Такая формула динамически адаптируется к изменениям font-size и line-height родительского контейнера, избавляя разработчиков от подгонки пиксельных отступов наугад.

Якорные сноски

Другая традиционная проблема веб-интерфейсов — верстка интерактивных сносок, выпадающих подсказок и контекстных меню рядом со словом в тексте. До недавнего времени для этого требовалось подключать тяжелые библиотеки позиционирования вроде Floating UI, отслеживающие координаты скролла и пересчитывающие top и left элемента через скрипты.

Спецификация CSS Anchor Positioning позволяет связать плавающий информационный блок с якорным словом или иконкой исключительно средствами браузерного движка. Развивая предыдущий пример с выравниванием элементов, мы можем превратить иконку-маркер в именованный якорь и привязать к нему всплывающую карточку сноски:

.list-icon-anchor {
  /* Объявление элемента в качестве якорной точки привязки */
  anchor-name: --footnote-anchor;
}

.footnote-popover {
  position: fixed;
  /* Привязка всплывающего блока к конкретному именованному якорю */
  position-anchor: --footnote-anchor;
  /* Выравнивание верхней границы всплывающего окна по нижней границе якоря */
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
  margin-top: calc(0.25lh);
}

Браузер берет на себя все геометрические расчеты: при прокрутке страницы или перестроении колонок сноска автоматически перемещается вместе со своим якорем в DOM-дереве.

Синхронное развитие браузерных стандартов наглядно доказывает, что каскадные таблицы стилей возвращают себе статус полноценной среды инженерной геометрии, освобождая клиентский JavaScript для чисто прикладной логики.