Свойство outline-offset

Свойство outline-offset

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

.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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree