Комментарии 7
Это вся функция свойства
outline-offset. Да, она очень простая, но, несмотря на свою простоту, очень важная. Здесь мне хочется ответить на вопрос: «А зачем нужно смещать обводку?»
Я бы добавил про ещё один крайне важный момент с outline — в отличие от border, она никак не влияет на общие параметры элемента в DOM.
То есть, независимо от ширины outline и от её позиции (по центру границ, со смещением внутрь, или со смещением наружу) — ширина/высота и позиция элемента в вёрстке всегда будут оставаться неизменными, точно указанными разработчиком.
Эта особенность outline просто бесценна, когда требуется точное и стабильное позиционирование.
P.S. Знаю, в случае с border можно вспомнить box-sizing: border-box — но это решение тоже работает довольно "костыльно", поскольку тоже вмешивается в вёрстку (сдвигая на ширину обводки уже внутренние отступы элемента).
С одной стороны - да. С другой стороны это провоцирует ошибки. Расположил кнопку рядом с другим контентом? Оп, outline внезапно "обрезается" и пропадает под фоном соседней колонки.
Увеличил z-index? Ой, оно полезло поверх модалок.
В общем, поскольку outline отрисовывается поверх других элементов - вызывает дополнительные усилия по z выравниванию всего, особенно при использовании сторонних либ с уже заданным позиционированием.
Согласен, если обводка нужна непременно наружу — приходится жонглировать z-index (хотя если элементы расположены именно встык, то в дизайне имеет смысл рассчитывать outline как раз вовнутрь элемента).
Но, думаю, это в любом случае более изящный вариант, чем когда при добавлении border начинает "плыть" вся строка (при ховере, например, как самый частый кейс).
можно использовать box-shadow, он так же не влияет на размеры самого элемента
Не так давно где-то встретил новые media-запросы, но легаси-проект, с которыми я очень часто работаю, отказался их принимать, я перестал ими там пользоваться, а потом и вовсе про них забыл. Теперь попробую опять начать применять.
Есть ещё нюанс с офсетом. Он никак не дружит с бордер-радиус
Неизвестно полезный CSS. Часть 8