更新
にししふぁくとりーHOMEに掲載している「今日のひとこと」の過去ログ(掲載履歴)です。 RSS
2023/06/16 (Fri) 13:20:27 No.9662 〔1337文字〕
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 |
で、ここからが本題なのだが、borderとは異なって、outlineで引いた枠線は角丸にできない……と長年思っていた。2021年には、Firefox、Chrome、Edgeではoutlineも角丸にできるようになったが、Safariでは角丸にできないままだった。……のだが、今年の3月にリリースされた Safari 16.4 で outlineの角丸をサポートするようになったと知った。これでようやく、border-radius プロパティで角丸にしている要素にoutlineで線を引いても、ちゃんとそのborder-radiusの値に従って線が引かれることを前提にしても良くなりそうだ。まだ今は Safari 16.4 未満のユーザがそれなりに居るだろうから、仕事のサイトで使うわけにはいかない可能性はあるが。
……と思ったのだが、Safari 16.4の公式リリースには確かに、 と書かれているのだが、Can I UseでCSS property: outline項目でSafariの欄を見ると、注釈に のように書かれていた。公式でサポートはされたが、まだ何か描画上の不具合はあるのか……。outlineに対する装飾の有無によって、角丸にできたりできなかったりするっぽい?