Поиск

Динамические контуры: свойство '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
Начальное значение: invert
Применяется: все элементы
Наследование: нет
Процентное задание значений: нет
Ассоциированные устройства: устройства визуального форматирования, интерактивные устройства

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

Контур выводится непосредственно за пределами краевой линии границы.

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

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

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

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

Свойство 'outline' - это сокращенное свойство, оно устанавливает значения для всех трех свойств 'outline-style', 'outline-width' и 'outline-color'.

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

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

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

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

BUTTON { outline-width : thick }

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

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

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

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

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