詳細度調整擬似クラスの使い所を考えてみた

Transcript

1. 詳細度調整疑似クラスの使い所を
 考えてみた Presented By @glico800

2. 自己紹介 glico Sho Ezawa ( ) / @glico800 ビザスクlite の

   Webエンジニア
 フロントエンドやUIデザインが好き
 妻・リクガメ・シマリスの４人家族 ?

3. もくじ 1. 注意事項 2. 詳細度調整疑似クラスとは 3. 使い所を考えてみた
 4. まとめ

4. 1. 注意事項

5. 注意事項 Working Draft 今後仕様の変更や採用の見送りがある可能性 があります。

 詳細度調整疑似クラスは、2019/10/01 時点では W3C 勧告プロセスにおける の段階で

   あり、 予めご了承ください。

6. 2. 詳細度調整擬似クラスとは

7. 詳細度調整疑似クラス :where() 詳細度の計算時に無視 - 引数として与えたセレクタを する疑似クラス

 - 英語では “The Specificity-adjustment

   Psudo-class” - 2019/10/01 時点で W3C 勧告プロセスにおける Working Draft の状態

8. サンプル * Specificity is calculated by https://specificity.keegan.st

9. 3. 使い所を考えてみた

10. どうしてわざわざ使い所を考えてみたのか 乱用すると保守性が下がりそう
 擬似クラスを使うセレ クタ ちゃんと使 えば便利そう - 悪名高い !important と同様に詳細度に干渉するの

    で、 - とはいえ、:hover のような はどうしても詳細度が高くなるため、 “!important” war

11. 公式サンプルの解説 - リンクの文字装飾なし、ホバー時は下線 - ナビゲーション上のリンクだけ非マウスホバー時でも下線を付けたい。 参考: https://www.w3.org/TR/selectors-4/#zero-matches

12. :where() を使わなくても実現できる - リンクの文字装飾なし、ホバー時は下線 - ナビゲーション上のリンクだけ非マウスホバー時でも下線を付けたい。 参考: https://www.w3.org/TR/selectors-4/#zero-matches

13. もう少し実用的な例はないか…

14. 詳細度が高くなりがちなケース :hover, :checked, :required, :first-child, ... input[type=”radio”], a[target=”_blank”] , ...

    input[type=”radio”]:checked, a[target=”_blank”]:visited, ... - 擬似クラスを使うケース
 - 属性セレクタを使うケース
 - 上記を両方使うケース


15. ラジオボタンのスタイル例 - クラスセレクタやクラスセレクタ＋擬似クラスだと 詳細度が負けてしまう 詳細度 : 0.1.0 詳細度 : 0.2.1

16. :where() を使うと >> クラスセレクタだけでも詳細度が勝てる！ << 詳細度 : 0.0.1 詳細度 :

    0.1.0

17. まとめ

18. まとめ セレクタの詳細度を無視できる
 乱用には注意
 詳細度が高くなりがちなスタイル >> 用途を限定して使うのが良さそう！ << - 詳細度調整擬似クラス :where()

    を使うと引数に与 えた - 詳細度に干渉するため - 擬似クラスや属性セレクタなどを使ったセレクタの で使うと良さそう 


19. ご清聴ありがとうございました