Сведение воедино

Свойство outline, как и свойство border для рамок, есть сокращенная форма для одновременного задания стиля, ширины и цвета контура. Как и другие варианты сокращенной записи, outline сводит воедино несколько свойств. Для него характерна такая же схема поведения, как и для остальных свойств, допускающих сокращенную форму записи и переопределяющих ранее заданные значения. Таким образом, в следующем примере контур будет использовать ключевое слово invert, поскольку оно вводится вторым объявлением:

a:focus {outline-color: red; outline: thick solid;}

Поскольку контур должен иметь единый стиль, ширину и цвет, то нет сокращенной формы задания контуров, кроме outline. Такие свойства, как outline-top или outline-right, не существуют. Для того чтобы имитировать инверсную рамку, можно задать ширину контура в единицах длины и создать поля элемента такой же или большей ширины. Поскольку контур отрисовывается поверх поля, он заполнит часть его пространства:

div#callbox {outline: 5px solid invert; margin: 5px;}
input:focus {outline: 1em double gray;}

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


Если для обозначения фокуса автор применяет рамки, макет документа может смещаться. Контуры могут обеспечить эффект, аналогичный применению рамок, но без резких скачков. Контуры справляются с этой задачей, потому что, по определению, отрисовываются поверх всего остального блока элемента. Поскольку в CSS2 контуры не могут перекрывать видимые части блока их элемента, а могут перекрывать только поля (которые являются прозрачными), это небольшая проблема. Если будущая версия CSS разрешит контурам смещаться и перекрывать рамки или другие видимые части блока элемента, вопрос их размещения приобретет большее значение. Еще одна неясность CSS2 состоит в том, что он явно уклоняется от определения поведения двух контуров, перекрывающих друг друга, и того, что происходит с контурами элементов, частично перекрытых другими элементами. Все это можно свести воедино в следующем примере:

div#one {outline: 1em solid invert;}
div#two {outline: 1em solid invert; margin: -2em -2em 0 2em;
background: white;}

Теперь предположим, что div#two следует в документе непосредственно за div#one. Он перекроет первый div, а его фон перекроет части контура первого div. Я не привел рисунка к этому примеру, потому что в спецификации CSS2 ничего не говорится о том, что могло бы произойти в этом случае.


Должен ли быть видимым контур первого div, перекрывающий фон и содержимое второго div? Также должны образоваться области, в которых пересекаются два инверсных контура; что должно произойти там? Происходит ли двойная инверсия пикселов и таким образом восстановление исходного их состояния? И должны ли быть пикселы инвертированы один раз? Мы не знаем. Ни одна из иллюстраций не была бы ни верной, ни неверной, это был бы просто возможный результат – и не обязательно, что это был бы именно тот результат, на котором остановятся агенты пользователя или который определит будущая версия CSS.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Графические курсоры
Задание стиля контура
Изменение курсора
Контуры
Курсоры