Свойство outline-offset

Дата публикации: 2017-05-25

От автора: свойство outline-offset в CSS сдвигает внешнюю обводку с края рамки элемента на указанную величину. Обводка (не рамка) не занимает места на странице (как абсолютно позиционированные элементы), поэтому ее можно сдвинуть на любое значение, и она никак не повлияет на положение или раскладку окружающих элементов.

.example {
  outline: solid 2px blue;
  outline-offset: 10px;
}

.example {

outline: solid 2px blue;

outline-offset: 10px;

}

Обводка задается через свойство outline и часто используется для создания кольца фокусировки для доступности. Свойство outline-offset позволяет изменять положение кольца фокусировки.

Значения

Свойство outline-offset принимает один тип значений, длину:

0 (по умолчанию);

любая другая валидная длина в заданных единицах измерения (в том числе отрицательные значения).

Обратите внимание, что outline-offset, как и outline-width, не принимает значения в процентах.

Позиционирование обводки

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

С помощью outline-offset можно изменить положение обводки относительно края рамки. Поиграйтесь с демо ниже, в нем можно интерактивно изменить сдвиг обводки с помощью слайдера. Значение сдвига отображается на странице по время сдвига слайдера:

Как уже было сказано, свойство outline-offset принимает отрицательные значения. Отрицательные значения сдвигают обводку в противоположную сторону (к центру элемента), как показано в интерактивном демо ниже. Обратите внимание, что обводка начинается на -40px:

Заметка: если открыть демо сверху в Firefox, то сначала обводка отобразится корректно, но когда вы начнете двигать слайдер, обводка начнет дергаться и займет неправильное положение. Скролинг элемента за пределы видимости и обратно вынуждает браузер перерисовывать обводку в неправильном месте. Баг замечен только в Firefox.

Не входит в сокращение outline

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

Свойство outline-offset не используется в сокращениях, поэтому его необходимо объявлять отдельно от самой обводки.

Поддержка в браузерах

Данные взяты с Caniuse. За более подробной информацией перейдите на сайт. Цифра указывает на то, что свойство поддерживается в этой версии и выше.

Индикатор «partial» для IE означает, что IE не поддерживает outline-offset, но поддерживает сокращение outline и три его свойства.

Помимо упомянутого в разделе «позиционирование обводки» бага есть еще один баг в Firefox. Обводка неправильно рисуется, когда у элемента есть дочерний элемент, перекрывающий границы родителя (например, из-за отрицательных margin’ов или абсолютного позиционирования). Поэтому outline-offset будет относиться к расширенной границе, созданной дочерним элементом, а не родителем. Чтобы лучше понять, смотрите CodePen, эту ветку Stack Overflow и баг репорт (благодарим читателя Matt Vanes за отправку бага).

Автор: Louis Lazaris

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки: css