18.4. Динамические контуры: свойство 'outline'.

Иногда, авторы стилевых таблиц могут захотеть создать контуры вокруг визуальных объектов, таких как: кнопки, активные поля форм, карты-изображения и т.д., для их выделения. Контуры CSS2 отличаются от границ следующим образом:

1. Контуры не занимают пространство.
2. Контуры могут быть непрямоугольными.

Свойства контура управляют стилем этих динамических структур.

'outline'
Тип значения: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Начальная величина: смотрите индивидуальные свойства
Применяется: ко всем элементам
Наследование: нет
Процентная база: нет
Медиа: визуальные, интерактивные

'outline-width'
Тип значения: <border-width> | inherit
Начальная величина: medium
Применяется: ко всем элементам
Наследование: нет
Процентная база: нет
Медиа: визуальные, интерактивные

'outline-style'
Тип значения: <border-style> | inherit
Начальная величина: none
Применяется: ко всем элементам
Наследование: нет
Процентная база: нет
Медиа: визуальные, интерактивные

'outline-color'
Тип значения: <color> | invert | inherit
Начальная величина: inherit
Применяется: ко всем элементам
Наследование: нет
Процентная база: нет
Медиа: визуальные, интерактивные

Контур, созданный его свойствами, рисуется "поверх" блока (или окна), т.е. контур всегда наверху, и не влияет на положение или размер этого блока или других. Поэтому, показываемые или подавляемые контуры не влияют на переформатирование.

Контуры рисуются, начиная с внешней стороны края границы.

Контуры могут быть непрямоугольными. Например, если элемент перегнут в нескольких местах, то контур, как минимум, очертит такие формы всех блоковых элементов. В отличие от границ, контуры не открыты в конце или начале строчного блока, они всегда полностью соединены.

Свойство 'outline-width' принимает то же значение, что и 'border-width'.

Свойство 'outline-style' принимает те же значения, что и 'border-style' за исключением неразрешенного стиля контура 'hidden'.

Свойство 'outline-color' принимает все цвета, а также ключевое слово 'invert'. 'Invert' выполняется для инверсии цвета пикселей на экране. Это обыкновенный трюк для обеспечения видимости границы в фокусе, несмотря на фоновый цвет.

Свойство 'outline' является сокращенным свойством для определения всех трех: 'outline-style', 'outline-width' и 'outline-color'.

Обратите внимание на то, что контур одинаков по всем сторонам. В отличие от границ, нет свойств 'outline-top' или 'outline-left'.

Эти спецификации не определяют, как рисуются множественные перекрывающиеся контуры, или как рисуются контуры для блоков, которые частично затемнены за другими элементами.

Обратите внимание. Так как контур в фокусе не влияет на форматирование (т.е. нет пространства для него в блочной модели), он может перекрывать другие элементы на странице.

Ниже приведен пример толстого контура вокруг элемента BUTTON:

BUTTON { outline-width : thick }

Можно использовать сценарии для динамического изменения ширины контура без провоцирования переформатирования.

18.4.1. Контуры и фокус.

Графические интерфейсы пользователя могут использовать контуры вокруг элементов для сообщения, какой элемент на странице находится в фокусе. Эти контуры являются дополнением к границам, и переключение контуров не должно переформатировать документы. Фокус является субъектом взаимодействия пользователя с документом (например, для вводимого текста, выбора кнопки и т.д.). Устройства вывода, поддерживающие интерактивные медиа-группы, должны сохранять отслеживание, где находится фокус, а также должны представлять его. Это можно сделать, используя динамические контуры вместе с псевдо-классом :focus.

Например, для рисования толстой черной линии вокруг элемента, когда он находится в фокусе, и толстой красной линии, когда он активен, можно использовать следующие правила:

:focus  { outline: thick solid black }
:active { outline: thick solid red }