Зачем игнорируется ширина схемы?

Question

Я заметил, что когда я установил outline-style: auto в свой CSS, контур всегда будет шириной 2 пикселя, независимо от outline-width, если только outline-width равно 0, тогда нет контура.

Почему браузеры игнорируют outline-width в этом случае и как я могу изменить ширину? (Я знаю, что могу использовать outline-style: solid, но он просто не дает такого же эффекта).

div { 
 
    background-color: #CCC; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    outline-color: dodgerblue; 
 
    outline-style: auto; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div style="outline-width: 0px">0px</div> 
 
<div style="outline-width: 1px">1px</div> 
 
<div style="outline-width: 10px">10px</div> 
 
<div style="outline-width: 1em">1em</div>

Answer 1

Если вы используете, например outline-style: solid; он будет работать

Не признают установленную ширину, когда стиль auto сообщается как bug in Chrome, Край/IE11 не делает его если не установлен стиль, отличный от auto и Firefox render auto as solid

W3C говорят: (https://www.w3.org/TR/css-ui-3/#outline-style)

Значение auto позволяет агенту пользователя, чтобы сделать пользовательский контур стиль, как правило, стиль, который является либо пользовательский интерфейс по умолчанию для платформы, или, возможно, стиль, является более богатым, чем можно подробно описать в CSS, например округлый краевой контур с полупрозрачным внешними пикселями, которые кажутся светящимися. Как таковая, эта спецификация не определяет, как вводится или используется outline-color (если вообще) при визуализации контуров автоматического стиля. Пользовательские агенты могут обрабатывать auto как solid.

div { 
 
    background-color: #CCC; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    outline-color: red; 
 
    outline-style: solid; 
 
}

<div style="outline-width: 0px">0px</div> 
 
<div style="outline-width: 1px">1px</div> 
 
<div style="outline-width: 10px">10px</div> 
 
<div style="outline-width: 1em">1em</div>

Answer 2

Когда outline-style является auto, браузеры рисовать собственные, специфичные для платформы контуры. Это может привести к тому, что они игнорируют любые или все другие свойства контура, если они не поддерживаются их пользовательскими реализациями контуров. Это означает, что вы не сможете настроить ширину контура.

Интересно, что spec упоминает только браузеры быть свободными игнорировать outline-color, даже если это не имеет смысла, чтобы заставить их выполнять произвольные ненулевые значения из outline-width при рисовании контуров конкретной платформы, что не может даже поддерживать произвольные ширины в первую очередь (как это наиболее вероятно в случае с любым браузером, который вы тестируете).

Обратите внимание, что Firefox рассматривает outline-style: auto как outline-style: solid (который упоминается в спецификации, тоже), что означает, что будет визуализации контуров с шириной вы укажете. IE и Microsoft Edge, похоже, вообще не поддерживают outline-style: auto, что делает все это неактуальным для этих браузеров (я бы по крайней мере ожидал, что Microsoft Edge рассмотрит его как прочную, так как в Windows 10 все же стили фокуса по умолчанию, но Я отвлекся).