CSSセレクタを戦わせてみた⚔ 2024/04/19 BARフロントえんどう #2 @tocomi

⾃⼰紹介 @tocomi0112 (Kenta TSUNEMI) 🏢 テックタッチ株式会社 (https://techtouch.jp/) ♨ フロントエンドエンジニア # 趣味 ⚾ 野球観戦 (スワローズファン) 🏇 競⾺ (⽳党) 🎮 ゲーム (FF7REBIRTH プレイ中) 🥸 ネタアプリ開発

これまで作ったネタアプリ Slack で⼤喜利できるアプリ 歴史上の⼈物が反応してくれるSNS モアイが⼤喜利のお題考えてくれる

ネタアプリ CSS にまつわるネタアプリを作ってみました！

ネタアプリ CSSセレクタ詳細度バトラー⚔

アプリ概要 Chrome 拡張機能 表⽰中のwebページ上の CSSセレクターを使ってバトル⚔ ⾃分のセレクターと相⼿のセレク ターのどちらが強いかで、 「たたかう」か「にげる」か正解 のアクションが決まる (最後にデモします！)

詳細度 参考: https://developer.mozilla.org/ja/docs/Web/CSS/Specificity 1 - 2 - 1 ID列 #example CLASS列 .myClass [type="radio"] :hover TYPE列 h1 ::placeholder 優先度 ⾼ 低

詳細度の⽐較 1 - 2 - 3 0 - 4 - 5 0 - 0 - 10 > > ID = 100ポイント, CLASS = 10ポイント, TYPE = 1ポイント のように ポイント制で説明されることもあるが厳密には誤り。 0 - 1 - 0 0 - 0 - 11 > ID, CLASS, TYPE の順で⽐較が⾏われる。 その時点で数値に⼤⼩があればそれ以降の数値は⽐較されない。

詳細度の計算 詳細度の計算には、 specificity というライブラリを利⽤。 詳細度の算出(calculate)や詳細度同⼠の⽐較(compare)をしてくれる。

ネタアプリ デモします🎮

備考 (chrome拡張の話) popup からページの DOM には アクセスできないので、 content_script を介して DOM にアクセス、セレクタ⼀覧を取 得する。

備考 リポジトリ https://github.com/tocomi/css-specificity-battler Chrome 拡張 https://chromewebstore.google.com/detail/lceeemdjolalmackjjpfa agjcdplpfdk?hl=ja

おわり🗿