Mo_Ginger
@Mo_Ginger
только учусь

Div, который выглядит по-разному в каждом браузере?

Как это работает вообще?
Что за колдунство, объясните, пожалуйста.

https://codepen.io/MartijnCuppens/pen/MXojmw
  • Вопрос задан
  • 1755 просмотров
Решения вопроса 1
@itsjustmypage
Outline это контур элемента с внешней его стороны, то есть сразу за border. В отличие от border он никак не влияет на элементы, их ширину и расположение. Ключевое слово inset в свойстве outline: inset 100px green; устанавливает этот контур в виде псевдотрехмерной рамки за счёт осветления правой и нижней границ и затемнения левой и верхней относительно указанного цвета. Ширина 100px, цвет зелёный.

Баг создаёт свойство outline-offset: -125px;, которое задаёт смещение контура. При положительном значении контур будет расширяться во все стороны. А при отрицательном будет сжиматься внутрь элемента.

Спецификация CSS Basic User Interface Module Level 3 в статусе рекомендации говорит о том, что контур элемента со свойством outline-offset при отрицательном значении не должен становиться меньше, чем двукратная вычисляемая ширина контура. То есть если в примере у нас размеры элемента 100x100 пикселей и контур задан у нас шириной 100px, то при outline-offset: -125px; он должен сжаться внутрь элемента на 125px со всех сторон, а спецификация визуально ограничивает сжатие до outline-offset: -50px; (по 50px внутрь с каждой стороны элемента). То есть контур должен просто сойтись вместе со всех сторон, образуя квадрат в нашем случае и насколько больше не ставь отрицательное значение, больше он сжиматься не должен. Но реализация в браузерах не учитывает это поведение и выдаёт непонятные фигуры, если отрицательное значение слишком большое.

https://www.w3.org/TR/css-ui-3/#outline-offset
5b447ea6c9061121780680.jpeg

Поведение при отрицательном outline-offset должно быть как на гифке. Если дальше уменьшать значение, ничего меняться не должно. AMQ4hnM.gif
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@FinderOT
Frontend разработчик
Весь фокус в том, что разные браузеры по-разному обрабатывают свойство outline-offset, особенно отрицательный в вёбките и его потомках оно чудесно ломается
Ответ написан
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
уменьшите значения outline и outline-offset и увидите что никакого колдунства нет, например
outline: inset 2px green;
  outline-offset: -2px;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
SaveTime Москва
от 140 000 до 200 000 руб.
Apptech Санкт-Петербург
от 50 000 до 100 000 руб.
от 40 000 до 100 000 руб.
17 нояб. 2018, в 00:02
1000 руб./за проект
16 нояб. 2018, в 23:20
3000 руб./за проект
16 нояб. 2018, в 23:01
16000 руб./за проект