update 2023-12-31-apply-default-focus-ring-styles

yuheiy · Dec 31, 2023 · 8dd0bf1 · 8dd0bf1
1 parent 743db4a
commit 8dd0bf1
Showing 1 changed file with 8 additions and 1 deletion.
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
@@ -47,7 +47,14 @@ Firefoxにおいては、`accent-color`が指定されている場合、その
 - `outline-width`として0より大きい`<length>`が指定されている
 - `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;
+}
+```
 
 ## 参考文献