Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
詳細度調整擬似クラスの使い所を考えてみた
Search
Sho Ezawa
October 03, 2019
Programming
1
1k
詳細度調整擬似クラスの使い所を考えてみた
Meguro.css #7 @ ラクスル での登壇資料
https://megurocss.connpass.com/event/145780/
Sho Ezawa
October 03, 2019
Tweet
Share
More Decks by Sho Ezawa
See All by Sho Ezawa
Rails 7.1 の新機能が使いたくて調べてみた
glico800
1
310
デザインエンジニア?を模索している話
glico800
1
60
なぜスタートアップで部活をやるのか
glico800
0
460
Figmaで作る動くペーパープロトタイプ
glico800
0
590
弱いパスワードの作り方
glico800
1
160
Other Decks in Programming
See All in Programming
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
330
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
ComposeでのPicture in Picture
takathemax
0
140
オープンソースコントリビュート入門
_katsuma
0
150
Vibe Coding の話をしよう
schroneko
14
3.9k
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
280
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
実践Webフロントパフォーマンスチューニング
cp20
45
10k
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.2k
リアーキテクチャの現場で向き合う 既存サービスの読み解きと設計判断
ymiyamu
0
140
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
150
VibeCoding時代のエンジニアリング
daisuketakeda
0
270
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Fireside Chat
paigeccino
37
3.4k
Side Projects
sachag
453
42k
Code Review Best Practice
trishagee
68
18k
How GitHub (no longer) Works
holman
314
140k
Optimizing for Happiness
mojombo
378
70k
Done Done
chrislema
184
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Speed Design
sergeychernyshev
29
940
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
詳細度調整疑似クラスの使い所を 考えてみた Presented By @glico800
自己紹介 glico Sho Ezawa ( ) / @glico800 ビザスクlite の
Webエンジニア フロントエンドやUIデザインが好き 妻・リクガメ・シマリスの4人家族 ?
もくじ 1. 注意事項 2. 詳細度調整疑似クラスとは 3. 使い所を考えてみた 4. まとめ
1. 注意事項
注意事項 Working Draft 今後仕様の変更や採用の見送りがある可能性 があります。 詳細度調整疑似クラスは、2019/10/01 時点では W3C 勧告プロセスにおける の段階で
あり、 予めご了承ください。
2. 詳細度調整擬似クラスとは
詳細度調整疑似クラス :where() 詳細度の計算時に無視 - 引数として与えたセレクタを する疑似クラス - 英語では “The Specificity-adjustment
Psudo-class” - 2019/10/01 時点で W3C 勧告プロセスにおける Working Draft の状態
サンプル * Specificity is calculated by https://specificity.keegan.st
3. 使い所を考えてみた
どうしてわざわざ使い所を考えてみたのか 乱用すると保守性が下がりそう 擬似クラスを使うセレ クタ ちゃんと使 えば便利そう - 悪名高い !important と同様に詳細度に干渉するの
で、 - とはいえ、:hover のような はどうしても詳細度が高くなるため、 “!important” war
公式サンプルの解説 - リンクの文字装飾なし、ホバー時は下線 - ナビゲーション上のリンクだけ非マウスホバー時でも下線を付けたい。 参考: https://www.w3.org/TR/selectors-4/#zero-matches
:where() を使わなくても実現できる - リンクの文字装飾なし、ホバー時は下線 - ナビゲーション上のリンクだけ非マウスホバー時でも下線を付けたい。 参考: https://www.w3.org/TR/selectors-4/#zero-matches
もう少し実用的な例はないか…
詳細度が高くなりがちなケース :hover, :checked, :required, :first-child, ... input[type=”radio”], a[target=”_blank”] , ...
input[type=”radio”]:checked, a[target=”_blank”]:visited, ... - 擬似クラスを使うケース - 属性セレクタを使うケース - 上記を両方使うケース
ラジオボタンのスタイル例 - クラスセレクタやクラスセレクタ+擬似クラスだと 詳細度が負けてしまう 詳細度 : 0.1.0 詳細度 : 0.2.1
:where() を使うと >> クラスセレクタだけでも詳細度が勝てる! << 詳細度 : 0.0.1 詳細度 :
0.1.0
まとめ
まとめ セレクタの詳細度を無視できる 乱用には注意 詳細度が高くなりがちなスタイル >> 用途を限定して使うのが良さそう! << - 詳細度調整擬似クラス :where()
を使うと引数に与 えた - 詳細度に干渉するため - 擬似クラスや属性セレクタなどを使ったセレクタの で使うと良さそう
ご清聴ありがとうございました