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
320
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
510
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
520
Devvox Belgium - Agentic AI Patterns
kdubois
1
100
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
550
私はどうやって技術力を上げたのか
yusukebe
43
18k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
970
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
150
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
680
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Fireside Chat
paigeccino
40
3.7k
GitHub's CSS Performance
jonrohan
1032
470k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Code Reviewing Like a Champion
maltzj
525
40k
The Invisible Side of Design
smashingmag
301
51k
Producing Creativity
orderedlist
PRO
347
40k
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