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