From 743db4aef21c2be65fa65c02735d4709d7f71a70 Mon Sep 17 00:00:00 2001 From: Yuhei Yasuda Date: Sun, 31 Dec 2023 11:26:55 +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, 7 insertions(+), 7 deletions(-) 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 80378f9..301d01c 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 @@ -32,22 +32,22 @@ button { デフォルトのフォーカスリングを適用するための方法はブラウザによって異なるため、この方法では、それぞれに対応するために`outline`プロパティを二重に宣言する。 -まずChromeでは、次の条件に一致するときにデフォルトのフォーカスリングが描画される。 +まずFirefox/Safariでは、次の条件に一致するときにデフォルトのフォーカスリングが描画される。 - `outline-style`として`auto`が指定されている - `outline-width`として0より大きい``が指定されている -- `outline-color`として`-webkit-focus-ring-color`が指定されている -`-webkit-focus-ring-color`はブラウザ独自の仕様であり、標準化されていない。`outline-color`の値を指定しなければ、`currentcolor`がフォーカスリングの色として適用されることになる。 +`outline-style`の値が`auto`の場合、`outline-color`の値は無視される。 + +Firefoxにおいては、`accent-color`が指定されている場合、その値がフォーカスリングの色として適用される。 -一方でFirefox/Safariでは、次の条件に一致するときにデフォルトのフォーカスリングが描画される。 +一方Chromeでは、次の条件に一致するときにデフォルトのフォーカスリングが描画される。 - `outline-style`として`auto`が指定されている - `outline-width`として0より大きい``が指定されている +- `outline-color`として`-webkit-focus-ring-color`が指定されている -`outline-style`の値が`auto`の場合、`outline-color`の値は無視される。 - -Firefoxにおいては、`accent-color`が指定されている場合、その値がフォーカスリングの色として適用される。 +`-webkit-focus-ring-color`はブラウザ独自の仕様であり、標準化されていない。`outline-color`の値を指定しなければ、`currentcolor`がフォーカスリングの色として適用されることになる。 ## 参考文献