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
330
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
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
11
3.6k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.9k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.5k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
510
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.7k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.3k
Other Decks in Programming
See All in Programming
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
10
1.8k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
200
contribution to astral-sh/uv
shunsock
0
550
オンデバイスAIとXcode
ryodeveloper
0
260
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
330
モテるデスク環境
mozumasu
3
1.3k
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
Go言語はstack overflowの夢を見るか?
logica0419
0
640
Introduce Hono CLI
yusukebe
6
3.1k
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
180
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
Featured
See All Featured
Bash Introduction
62gerente
615
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Making Projects Easy
brettharned
120
6.4k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Building an army of robots
kneath
306
46k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
130
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Code Review Best Practice
trishagee
72
19k
Building Applications with DynamoDB
mza
96
6.7k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Producing Creativity
orderedlist
PRO
348
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