CSS outline-offset — синтаксис и примеры
CSS-свойство outline-offset: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Суть темы
Практический смысл «outline-offset» связан с тем, чтобы определять визуальный слой элемента без изменения смысловой структуры документа. Свойство outline-offset относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои. Контрольная проверка «outline-offset» проходит в диалоге с возвратом фокуса после закрытия, а наблюдаемой точкой служит перестроение при смене writing-mode.
Для «outline-offset» сначала проверьте вычисленное значение outline-offset, наследование и контекст родителя. После этого сравните исходное и изменённое состояние «outline-offset» на одном и том же содержимом.
Синтаксис outline-offset
Для демонстрации «outline-offset» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.demo {
outline-offset: 1px solid currentColor;
}Как работает outline-offset
Чтобы объяснить работу «outline-offset», проследите путь от структуры и входного значения до отображения или поведения. Свойство outline-offset относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои. Контрольная точка для «outline-offset» — отображение в режиме печати.
Проверка в проекте
- Проверьте вычисленное значение outline-offset, наследование и контекст родителя; результат относится непосредственно к «outline-offset».
- Проверить печать и убедиться, что важное содержимое не исчезает при разборе «outline-offset».
- Проверьте «outline-offset» в диалоге с возвратом фокуса после закрытия через перестроение при смене writing-mode и запишите наблюдаемое изменение.
Критерий выбора «outline-offset» — предсказуемая работа в заявленном контексте. Для «outline-offset» подтвердите её через перестроение при смене writing-mode и соблюдите ограничение: используйте нативное действие вместо имитации клика.
Практика с outline-offset
Проверьте «outline-offset» на небольшом макете с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «outline-offset»: проверьте вычисленное значение outline-offset, наследование и контекст родителя.
Сценарий: в диалоге с возвратом фокуса после закрытия.
Ошибки при работе с outline-offset
Доступность
Изолированная декларация outline-offset без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «outline-offset».
Каскад
Загрузка тяжёлого ресурса до того, как он нужен пользователю при использовании «outline-offset».
Поддержка
Загрузка тяжёлого ресурса до того, как он нужен пользователю; для «outline-offset» проверьте это отдельно.
Поддержка outline-offset
Для «outline-offset» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «outline-offset»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о outline-offset
Как понять, что «outline-offset» выбрано правильно?
«outline-offset» выбрано правильно, когда оно решает задачу «определять визуальный слой элемента без изменения смысловой структуры документа», сохраняет результат в диалоге с возвратом фокуса после закрытия и проходит предметную проверку: проверьте вычисленное значение outline-offset, наследование и контекст родителя.
Нужен ли запасной вариант для «outline-offset»?
Запасной вариант для «outline-offset» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «outline-offset» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.