CSS offset-anchor — синтаксис и примеры
CSS-свойство offset-anchor: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Когда применять
Для «offset-anchor» важно отделить назначение от случайного оформления. Свойство offset-anchor относится к области «движение и преобразования» и обычно работает после раскладки и требует учёта prefers-reduced-motion. При проверке в диалоге с возвратом фокуса после закрытия сначала зафиксируйте победившую декларацию во вкладке Computed для «offset-anchor», затем меняйте только одно условие за запуск.
Для «offset-anchor» сначала проверьте вычисленное значение offset-anchor, наследование и контекст родителя. После этого сравните исходное и изменённое состояние «offset-anchor» на одном и том же содержимом.
Синтаксис offset-anchor
Минимальная запись «offset-anchor» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.demo {
offset-anchor: translateY(-0.25rem);
}Как работает offset-anchor
Браузер обрабатывает «offset-anchor» в контексте области «движение и преобразования»: свойство offset-anchor относится к области «движение и преобразования» и обычно работает после раскладки и требует учёта prefers-reduced-motion. Для «offset-anchor» наблюдения через победившую декларацию во вкладке Computed и порядок фокуса в дереве доступности отделяют исходное условие от результата.
Проверка в проекте
- Проверьте вычисленное значение offset-anchor, наследование и контекст родителя; результат относится непосредственно к «offset-anchor».
- Проверить вычисленное значение в DevTools и источник победившего правила при разборе «offset-anchor».
- Проверьте «offset-anchor» в диалоге с возвратом фокуса после закрытия через победившую декларацию во вкладке Computed и запишите наблюдаемое изменение.
Критерий выбора «offset-anchor» — предсказуемая работа в заявленном контексте. Для «offset-anchor» подтвердите её через победившую декларацию во вкладке Computed и соблюдите ограничение: меняйте только одно условие за запуск.
Практика с offset-anchor
Перенесите «offset-anchor» в изолированном демо и испытайте его в диалоге с возвратом фокуса после закрытия. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «offset-anchor»: изолированная декларация offset-anchor без связанных ограничений может дать другой результат в реальном компоненте.
Сценарий: в диалоге с возвратом фокуса после закрытия.
Ошибки при работе с offset-anchor
Устойчивость
Изолированная декларация offset-anchor без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «offset-anchor».
Доступность
Зависимость результата от placeholder вместо постоянной подписи при использовании «offset-anchor».
Каскад
Подмена семантики визуально похожим div или span; для «offset-anchor» проверьте это отдельно.
Поддержка offset-anchor
Для «offset-anchor» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «offset-anchor»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о offset-anchor
Как понять, что «offset-anchor» выбрано правильно?
«offset-anchor» выбрано правильно, когда оно решает задачу «изменять визуальное положение или переход между состояниями интерфейса», сохраняет результат в диалоге с возвратом фокуса после закрытия и проходит предметную проверку: проверьте вычисленное значение offset-anchor, наследование и контекст родителя.
Нужен ли запасной вариант для «offset-anchor»?
Запасной вариант для «offset-anchor» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «offset-anchor» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.