diff --git a/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx b/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx index 301d01c..e2bf759 100644 --- a/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx +++ b/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx @@ -47,7 +47,14 @@ Firefoxにおいては、`accent-color`が指定されている場合、その - `outline-width`として0より大きい``が指定されている - `outline-color`として`-webkit-focus-ring-color`が指定されている -`-webkit-focus-ring-color`はブラウザ独自の仕様であり、標準化されていない。`outline-color`の値を指定しなければ、`currentcolor`がフォーカスリングの色として適用されることになる。 +`-webkit-focus-ring-color`はブラウザの独自実装であり、標準化されていない。`outline-color`の値を指定しなければ、`currentcolor`がフォーカスリングの色として適用されることになる。 + +```css +.card:focus-within { + outline: auto; /* `outline-color`は暗黙的にgreenになる */ + color: green; +} +``` ## 参考文献