CSSセレクタを戦わせてみた⚔️

2024/04/19
BARフロントえんどう #2
https://cybozu.connpass.com/event/311066/

リポジトリ
https://github.com/tocomi/css-specificity-battler

Chrome 拡張
https://chromewebstore.google.com/detail/lceeemdjolalmackjjpfaagjcdplpfdk?hl=ja

Transcript

1. CSSセレクタを戦わせてみた⚔ 2024/04/19 BARフロントえんどう #2 @tocomi
2. ⾃⼰紹介 @tocomi0112 (Kenta TSUNEMI) 🏢 テックタッチ株式会社 (https://techtouch.jp/) ♨ フロントエンドエンジニア # 趣味 ⚾ 野球観戦 (スワローズファン) 🏇 競⾺ (⽳党) 🎮 ゲーム (FF7REBIRTH プレイ中) 🥸 ネタアプリ開発
3. これまで作ったネタアプリ Slack で⼤喜利できるアプリ 歴史上の⼈物が反応してくれるSNS モアイが⼤喜利のお題考えてくれる
4. ネタアプリ CSS にまつわるネタアプリを作ってみました！
5. ネタアプリ CSSセレクタ詳細度バトラー⚔
6. アプリ概要 Chrome 拡張機能 表⽰中のwebページ上の CSSセレクターを使ってバトル⚔ ⾃分のセレクターと相⼿のセレク ターのどちらが強いかで、 「たたかう」か「にげる」か正解 のアクションが決まる (最後にデモします！)
7. 詳細度 参考: https://developer.mozilla.org/ja/docs/Web/CSS/Specificity 1 - 2 - 1 ID列 #example CLASS列 .myClass [type="radio"] :hover TYPE列 h1 ::placeholder 優先度 ⾼ 低
8. 詳細度の⽐較 1 - 2 - 3 0 - 4 - 5 0 - 0 - 10 > > ID = 100ポイント, CLASS = 10ポイント, TYPE = 1ポイント のように ポイント制で説明されることもあるが厳密には誤り。 0 - 1 - 0 0 - 0 - 11 > ID, CLASS, TYPE の順で⽐較が⾏われる。 その時点で数値に⼤⼩があればそれ以降の数値は⽐較されない。
9. 詳細度の計算 詳細度の計算には、 specificity というライブラリを利⽤。 詳細度の算出(calculate)や詳細度同⼠の⽐較(compare)をしてくれる。
10. ネタアプリ デモします🎮
11. 備考 (chrome拡張の話) popup からページの DOM には アクセスできないので、 content_script を介して DOM にアクセス、セレクタ⼀覧を取 得する。
12. 備考 リポジトリ https://github.com/tocomi/css-specificity-battler Chrome 拡張 https://chromewebstore.google.com/detail/lceeemdjolalmackjjpfa agjcdplpfdk?hl=ja
13. おわり🗿