アウトライン幅が無視されるのはなぜですか？

Question

私は、outline-widthが0でない限り、outline-widthに関係なく、自分のCSSにoutline-style: autoを設定するとアウトラインが常に2ピクセル幅であることに気付きました。

この場合、ブラウザで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はsolid

として autoと表示されます。

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-widthの任意の非ゼロ値を尊重するためにそれらを強制的に意味がないにもかかわらず、outline-colorを無視して自由であることのブラウザに言及最初に（これは、どのブラウザでもこれをテストしている可能性が高いためです）。それは、指定した幅で輪郭を描画することを意味Firefoxは（あまりにも、仕様に記載されている）outline-style: solidとしてoutline-style: autoを扱う

注意、。 IEとMicrosoft Edgeはoutline-style: autoを一切サポートしていないようだが、これはこれらのブラウザとは無関係なものになっている（私は少なくともMicrosoft Edgeには、Windows 10がデフォルトでフォーカススタイルを描画する方法私は逃げる）。