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
120
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
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.3k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5.7k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
410
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
5
1.3k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.7k
Other Decks in Programming
See All in Programming
技術を根付かせる / How to make technology take root
kubode
1
250
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
170
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
GAEログのコスト削減
mot_techtalk
0
120
SwiftUI Viewの責務分離
elmetal
PRO
2
250
Immutable ActiveRecord
megane42
0
140
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
590
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
チームリードになって変わったこと
isaka1022
0
210
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Site-Speed That Sticks
csswizardry
4
390
A Philosophy of Restraint
colly
203
16k
Into the Great Unknown - MozCon
thekraken
35
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Navigating Team Friction
lara
183
15k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Docker and Python
trallard
44
3.3k
Why Our Code Smells
bkeepers
PRO
336
57k
GitHub's CSS Performance
jonrohan
1030
460k
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