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
910
詳細度調整擬似クラスの使い所を考えてみた
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
0
120
デザインエンジニア?を模索している話
glico800
1
50
なぜスタートアップで部活をやるのか
glico800
0
400
Figmaで作る動くペーパープロトタイプ
glico800
0
420
弱いパスワードの作り方
glico800
1
160
Other Decks in Programming
See All in Programming
CSC307 Lecture 07
javiergs
PRO
0
220
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
生成AIをkintoneに連携してみた
hideg
0
230
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Temporalを取り巻く仕様を整理する
sajikix
0
120
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Introduction to GitOps
hwchiu
0
110
CSC307 Lecture 12
javiergs
PRO
0
220
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
The Mythical Team-Month
searls
217
43k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Rails Girls Zürich Keynote
gr2m
93
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
It's Worth the Effort
3n
181
27k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Fireside Chat
paigeccino
25
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
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()
を使うと引数に与 えた - 詳細度に干渉するため - 擬似クラスや属性セレクタなどを使ったセレクタの で使うと良さそう
ご清聴ありがとうございました