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

yuheiy · Dec 31, 2023 · a58c68e · a58c68e
1 parent 07c51a9
commit a58c68e
Showing 1 changed file with 15 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
@@ -25,7 +25,7 @@ button {
 
 ```css
 .card:focus-within {
-  outline: auto; /* for Firefox, Safari */
+  outline: auto;
   outline: auto -webkit-focus-ring-color; /* for Chrome */
 }
 ```
@@ -56,6 +56,20 @@ Firefoxにおいては、`accent-color`が指定されている場合、その
 }
 ```
 
+これらの二重の宣言はブラウザで次のように動作する。
+
+|         | `outline: auto`                  | `outline: auto -webkit-focus-ring-color` |
+| ------- | -------------------------------- | ---------------------------------------- |
+| Chrome  | ❌（`currentcolor`で描画される） | ✅（カスケードによって優先される）       |
+| Firefox | ✅                               | ❌（パースエラーのため無視される）       |
+| Safari  | ✅                               | ✅（カスケードによって優先される）       |
+
+デフォルトのスタイルを適用するためには、Chromeでは`outline: auto -webkit-focus-ring-color`を使用する必要がある。このやり方の場合、カスケードによって前者の`outline: auto`は打ち消されて、後者の宣言が優先される。
+
+Firefoxでは`outline: auto`を使用する必要がある。後者の`outline: auto -webkit-focus-ring-color`はパースエラーになって無視されて、前者の宣言が適用される。
+
+Safariではそのどちらの宣言を使用してもデフォルトのスタイルが適用される。標準仕様を採用するという意味では、前者の`outline: auto`を使用するのが好ましいが、このやり方では、カスケードによって後者の`outline: auto -webkit-focus-ring-color`が優先されることになる。
+
 ## 参考文献
 
 - [[css-ui] Tweaking outline-style: auto colors. · Issue #7761 · w3c/csswg-drafts](https://github.com/w3c/csswg-drafts/issues/7761)