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

Meguro.css #7 @ ラクスル での登壇資料
https://megurocss.connpass.com/event/145780/

Transcript

1. 詳細度調整疑似クラスの使い所を

   考えてみた
   Presented By @glico800
   

   View Slide

2. 自己紹介
   glico
   Sho Ezawa ( ) / @glico800
   
   ビザスクlite の Webエンジニア

   フロントエンドやUIデザインが好き

   妻・リクガメ・シマリスの４人家族
   ?
   

   View Slide

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

   4. まとめ
   

   View Slide

4. 1. 注意事項
   

   View Slide

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


   詳細度調整疑似クラスは、2019/10/01 時点では
   W3C 勧告プロセスにおける の段階で
   あり、
   予めご了承ください。
   

   View Slide

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

   View Slide

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


   - 英語では “The Specificity-adjustment
   Psudo-class”
   
   - 2019/10/01 時点で W3C 勧告プロセスにおける
   Working Draft の状態
   

   View Slide

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

   View Slide

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

   View Slide

10. どうしてわざわざ使い所を考えてみたのか
    乱用すると保守性が下がりそう

    擬似クラスを使うセレ
    クタ ちゃんと使
    えば便利そう
    - 悪名高い !important と同様に詳細度に干渉するの
    で、
    - とはいえ、:hover のような
    はどうしても詳細度が高くなるため、
    “!important” war
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    - 属性セレクタを使うケース

    - 上記を両方使うケース

    

    View Slide

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

    View Slide

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

    View Slide

17. まとめ
    

    View Slide

18. まとめ
    セレクタの詳細度を無視できる

    乱用には注意

    詳細度が高くなりがちなスタイル
    >> 用途を限定して使うのが良さそう！ <<
    - 詳細度調整擬似クラス :where() を使うと引数に与
    えた
    - 詳細度に干渉するため
    - 擬似クラスや属性セレクタなどを使ったセレクタの
    で使うと良さそう
    

    

    View Slide

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

    View Slide