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
840
詳細度調整擬似クラスの使い所を考えてみた
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
70
デザインエンジニア?を模索している話
glico800
1
46
なぜスタートアップで部活をやるのか
glico800
0
370
Figmaで作る動くペーパープロトタイプ
glico800
0
400
弱いパスワードの作り方
glico800
1
150
Other Decks in Programming
See All in Programming
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
puregoの活用例
aethiopicuschan
0
220
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
7
3.3k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
170
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
OpenTelemetry のサービスという概念について
azukiazusa1
2
1.1k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
How GitHub (no longer) Works
holman
304
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Scaling GitHub
holman
457
140k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Optimizing for Happiness
mojombo
369
69k
Being A Developer After 40
akosma
56
580k
Build your cross-platform service in a week with App Engine
jlugia
224
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
353
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
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()
を使うと引数に与 えた - 詳細度に干渉するため - 擬似クラスや属性セレクタなどを使ったセレクタの で使うと良さそう
ご清聴ありがとうございました