Властивість outline-offset

21

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

.example {
outline: 2px solid 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. Обведення неправильно малюється, коли у елемента є дочірній елемент, який перекриває кордону батьків (наприклад, з-за негативних магдіп’ов або абсолютного позиціонування). Тому outline-offset буде ставитися до розширеної кордоні, створеної дочірнім елементом, а не батьком. Щоб краще зрозуміти, дивіться CodePen, цю гілку Stack Overflow і баг репорт (дякуємо читача Matt Vanes за відправку бага).