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

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

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

https://codepen.io/MartijnCuppens/pen/MXojmw
  • Вопрос задан
  • 1443 просмотра
Пригласить эксперта
Ответы на вопрос 3
  • @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
    Ответ написан
  • @FinderOT
    Frontend разработчик
    Весь фокус в том, что разные браузеры по-разному обрабатывают свойство outline-offset, особенно отрицательный в вёбките и его потомках оно чудесно ломается
    Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы