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
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
330
デザインエンジニア?を模索している話
glico800
1
65
なぜスタートアップで部活をやるのか
glico800
0
470
Figmaで作る動くペーパープロトタイプ
glico800
0
630
弱いパスワードの作り方
glico800
1
170
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
700
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
280
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
290
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
540
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
ニーリーにおけるプロダクトエンジニア
nealle
0
580
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
570
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Faster Mobile Websites
deanohume
307
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
It's Worth the Effort
3n
185
28k
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()
を使うと引数に与 えた - 詳細度に干渉するため - 擬似クラスや属性セレクタなどを使ったセレクタの で使うと良さそう
ご清聴ありがとうございました