From 474688dba1e34857fd667d8e460c93a1ac9c5ecf Mon Sep 17 00:00:00 2001 From: Yuhei Yasuda Date: Mon, 1 Jan 2024 06:26:33 +0900 Subject: [PATCH] update 2023-12-31-apply-default-focus-ring-styles --- .../2023-12-31-apply-default-focus-ring-styles.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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 e2bf759..d8d3dac 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 @@ -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)