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
260
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.6k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.1k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
470
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.5k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4k
Other Decks in Programming
See All in Programming
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
XP, Testing and ninja testing
m_seki
3
200
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
260
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
XSLTで作るBrainfuck処理系
makki_d
0
210
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
560
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Why Our Code Smells
bkeepers
PRO
337
57k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Thoughts on Productivity
jonyablonski
69
4.7k
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