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
CSS Linter による Baseline サポートの仕組み
Search
mattsuu
February 21, 2025
Programming
1
310
CSS Linter による Baseline サポートの仕組み
Browser and UI #1 CSS (2025/02/21) での発表資料
https://browser-and-ui.connpass.com/event/341857/
mattsuu
February 21, 2025
Tweet
Share
More Decks by mattsuu
See All by mattsuu
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.3k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.8k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.4k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
500
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.7k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.2k
Other Decks in Programming
See All in Programming
CSC509 Lecture 02
javiergs
PRO
0
400
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
CSC305 Lecture 04
javiergs
PRO
0
250
dynamic!
moro
9
6.5k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
580
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Automating Front-end Workflow
addyosmani
1371
200k
Git: the NoSQL Database
bkeepers
PRO
431
66k
A better future with KSS
kneath
239
17k
Scaling GitHub
holman
463
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Done Done
chrislema
185
16k
Side Projects
sachag
455
43k
Balancing Empowerment & Direction
lara
4
680
Navigating Team Friction
lara
189
15k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
CSS Linter による Baseline サポートの仕組み まっつー / @ryo_manba 2025/02/21 Browser
and UI #1 CSS
自己紹介 まっつー • メルカリ • フロントエンドエンジニア • HeroUI, Stylelint チームメンバー
• 𝕏: @ryo_manba • GitHub: @ryo-manba
Baseline • 主要ブラウザでの Web 標準のサポート状況 ◦ Chrome, Edge, Safari, Firefox
• 3つのステータス ◦ Widely available: 主要ブラウザでサポートされて2.5年 ◦ Newly available: 主要ブラウザでサポート ◦ Limited availability: 上記の基準を満たさない 3
Baseline を確認する 4
正しい定義を見落とす可能性 • clip-path (基本機能) → Widely • fill-box, stroke-box, view-box
→ Newly • Animatable clipping paths → Limited 5 mdn「Widely です」 開発者「よし、通れ!」
Linter でチェックしたい…
@eslint/css によるサポート • require-baseline ルールが追加 • Baseline の Widely か
Newly をオプションで指定し、 満たさない場合に警告を出す 7
require-baseline ルールの仕組み 1. Baseline のデータを取得する 2. @supports をチェックする 3. Baseline
のステータスを比較する 8
Baseline のデータを取得する • @web-features から取得 ◦ WebDX Community Group が提供するライブラリ
◦ YAML をパースして JavaScript オブジェクトにしているだけ → 操作性が低い、不要な情報も含まれている • @eslint/css で名前とレベルのみの形式に変換して管理 9
@supports のチェック @supports を利用している場合、警告を出す必要がない 10
@supports のネストへの対応 ネストを考慮して適用範囲を管理している 11
機能の Baseline ステータスを取得する 12
機能の Baseline ステータスを比較する 13
まとめ • @eslint/css の require-baseline ルールでは、 ◦ web-features から Baseline
の定義を取得 ◦ @supports の適用範囲をコンテキストとして管理 ◦ これらを元に Baseline ステータスを比較 • Baseline が活用しやすくなった! 14
余談: Stylelint のプラグインでも実現できる? • stylelint-no-unsupported-browser-features と browserslist を組み合わせれば近いことはできる • しかし、検知できない機能が複数ある
◦ 内部で利用している @doiuse の対応を待つしかない • @supports の対応もない Stylelint 本体がサポートするまでは難しそう… 15