Свойство outline

Свойство outline: назначение, особенности и применение

Что такое свойство outline в CSS

Свойство outline используется в CSS для задания внешнего контура элемента, который не влияет на его размеры и положение. В отличие от свойства border, outline не занимает места в модели блока (box model) и не влияет на выравнивание и распределение пространства.

Outline часто применяется для отображения фокуса на элементах интерфейса, особенно в формах и интерактивных компонентах.

Основные параметры свойства outline

Свойство outline является сокращённой записью для трёх отдельных свойств:

• outline-color — задаёт цвет контура.

• outline-style — определяет стиль линии.

• outline-width — устанавливает ширину линии.

Запись может выглядеть следующим образом:

css
CopyEdit
outline: 2px solid red;

Это эквивалентно:

css
CopyEdit
outline-width: 2px;
outline-style: solid;
outline-color: red;

Поддерживаемые значения outline-style

Свойство outline-style принимает следующие значения:

• none — контур не отображается.

• solid — сплошная линия.

• dotted — пунктирная линия.

• dashed — штриховая линия.

• double — двойная линия.

• groove, ridge, inset, outset — декоративные стили, поведение которых зависит от браузера.

Отличия свойства outline от border

Сравнение outline и border:

1. Outline не влияет на размеры элемента, border — влияет.

2. Outline может быть не прямоугольным, если элемент трансформирован.

3. Outline не поддерживает закругление углов (border-radius).

4. Outline всегда отображается поверх других элементов и не может быть обрезан с помощью overflow: hidden.

Наследование и специфика применения

Свойство outline не наследуется, однако может быть установлено для любого блочного или строчного элемента. Чаще всего оно применяется к:

• кнопкам (button)

• ссылкам (a)

• полям форм (input, textarea, select)

Использование outline важно для обеспечения доступности: при навигации с клавиатуры контур позволяет определить, какой элемент находится в фокусе.

Практические примеры использования свойства outline

Пример 1: выделение активного элемента ввода

css
CopyEdit
input:focus {
  outline: 2px solid blue;
}

Пример 2: отключение outline (не рекомендуется без замены)

css
CopyEdit
button {
  outline: none;
}

Если outline отключается, рекомендуется заменить его на альтернативный визуальный индикатор фокуса для сохранения доступности.

Совместимость с браузерами

Свойство outline поддерживается всеми современными браузерами, включая:

• Google Chrome

• Mozilla Firefox

• Safari

• Microsoft Edge

• Opera

Поддержка на мобильных платформах также реализована стабильно.

Поддержка псевдоклассов

Свойство outline часто используется в сочетании с псевдоклассами:

• :focus — при получении фокуса

• :hover — при наведении курсора

• :active — при нажатии

Пример:

css
CopyEdit
a:focus {
  outline: 3px dashed orange;
}

FAQ

Какая разница между outline и border?
Outline не влияет на размеры элемента и не может быть закруглён. Border влияет на размеры и поддерживает border-radius.

Можно ли анимировать свойство outline?
Непосредственно анимация свойства outline ограничена. Однако можно использовать переходы (transition) для outline-color и outline-width.

Поддерживает ли outline прозрачность?
Да, outline-color может быть установлен с использованием rgba() или ключевого слова transparent.

Влияет ли outline на выравнивание элементов?
Нет, свойство outline не занимает места в модели блока и не влияет на выравнивание.

Безопасно ли полностью отключать outline?
Отключение outline без предоставления замены нарушает стандарты доступности и может негативно повлиять на пользователей, использующих клавиатуру.