css-first

CSS First

JavaScript を提案する前に、セマンティック HTML と CSS でインターフェースの作業を解決します。ユーザーの対象ブラウザーに適合する場合は、最新の標準ベースの CSS を優先し、サポートが不十分な場合も段階的な拡張によって中核となる体験を維持します。

ワークフロー

1. 視覚的またはインタラクション上の意図を特定し、プロジェクトのフレームワーク、対象ブラウザー、書字方向、既存の規約を確認します。
2. 該当するパターンがないか、css-demos/INDEX.md を検索します。
3. サポート状況や最新性が重要な場合は、references/live-mdn-fetch.md を使って最新の Baseline レコードを取得します。リポジトリに含まれるラベルは、恒久的な事実ではなく、日付付きのスナップショットとして扱います。
4. セマンティックな適合性、アクセシビリティ、相互運用性、保守コストに基づいて解決策を順位付けします。論理プロパティとネイティブ CSS の機能を優先します。
5. 選択した機能が Limited Availability、または WebStatus レコードがない場合は、実用的なフォールバックを用意し、可能であれば @supports で拡張機能を条件付きで適用します。
6. 環境に実ブラウザーがある場合は、実際のブラウザーで構文と動作を検証します。

Baseline 用語

Web Platform Status の定義どおりに使用してください。世界全体の使用率を Baseline ラベルに置き換えないでください。

API のステータス	ラベル	意味
widely	🟢 幅広く利用可能	主要ブラウザー一式で、30 か月以上にわたり相互運用性が確保されています
newly	🔵 新たに利用可能	主要ブラウザー一式で、30 か月未満の相互運用性が確保されています
limited	🟡 利用可能範囲に制限あり	主要ブラウザーでの対応が不完全なため、Baseline ではありません
missing	🟣 実験的／不明	使用可能な WebStatus レコードがありません。仕様とブラウザーのリリースを確認してください

ブラウザーのバージョンごとの割合は補足データとして役立つ場合がありますが、Baseline の分類を決めるために使用してはいけません。

ルール

タスクに必要なリファレンスだけを読みます。

• references/rules/css-only-enforcement.md — CSS で十分な場合と、JavaScript が本当に必要な場合を判断します。
• references/rules/logical-properties-first.md — 書字方向を考慮したプロパティを優先します。
• references/rules/modern-css-features.md — Chrome 148–152 の追加機能を含む、最新機能を選択します。
• references/rules/semantic-intent-analysis.md — リクエストを適切な CSS のプリミティブに対応付けます。
• references/rules/framework-awareness.md — 例をリポジトリに合わせます。
• references/rules/browser-support-consideration.md — Baseline とサポート状況を正確に報告します。
• references/rules/progressive-enhancement.md — 動作する中核機能にオプション機能を重ねます。
• references/rules/browser-verification.md — ブラウザー上の動作を検証します。

Chrome の最新追加機能

デモカタログには、Chrome 148 から Chrome 152 でリリースまたは発表された、作成者向け CSS が含まれています。名前のみのコンテナークエリーやカンマ区切りのコンテナークエリー、at-rule() と named-feature() のサポートテスト、アニメーション可能な zoom、角丸の polygon()、text-fit、background-clip: border-area、CSS の image() 値、画像値の light-dark()、flex-wrap: balance、overscroll-behavior: chain、印刷用の page-margin-safety、SVG の path-length、ruby-overhang、メディア状態の疑似クラス、alpha()、window-drag、インストール済みアプリのアクセントシステムカラーなどがあります。

機能のデモヘッダーと最新の WebStatus エントリーを併せて確認してください。Chrome でリリースされていても、それだけで Baseline になるわけではありません。

スナップショットのメンテナンス

このスキルディレクトリから、次を実行します。

python3 scripts/update_baseline.py --check
python3 scripts/update_baseline.py --write

--check はファイルを変更せずに差分を報告します。--write は公式の WebStatus API を参照して、対応するデモのヘッダーと css-demos/INDEX.md 内の 対応するエントリーを更新します。WebStatus に記録がない機能は手動で管理し、 リリースノートまたは仕様を参照する必要があります。

クイックリファレンス

目的	推奨する CSS	デモ
コンポーネントのレスポンシブ対応	コンテナークエリー	css-demos/container/size-queries.css
親要素を考慮したスタイル	:has()	css-demos/layout/has-selector.css
折り返されたフレックス行の均等化	flex-wrap: balance	css-demos/layout/flex-wrap-balance.css
入場時のアニメーション	@starting-style	css-demos/animation/starting-style.css
スクロールエフェクト	スクロールドリブンアニメーション	css-demos/animation/scroll-driven.css
ネイティブなツールチップの配置	アンカーポジショニング	css-demos/positioning/anchor-positioning.css
レスポンシブな見出しのサイズ調整	text-fit	css-demos/visual/text-fit.css
テーマに応じた画像	light-dark() / image()	css-demos/visual/css-image-values.css
メディアの再生状態	:playing、:paused などの関連する疑似クラス	css-demos/interaction/media-state-pseudos.css
インストール済みアプリのドラッグ領域	window-drag	css-demos/interaction/window-drag.css
モーションの低減	prefers-reduced-motion	css-demos/accessibility/prefers-reduced-motion.css
装飾のバリエーション	random()	css-demos/functions/random-function.css
範囲の正規化	progress()	css-demos/functions/progress-function.css

構文と注意事項については MDN を、Baseline については WebStatus を参照してください。

• https://developer.mozilla.org/en-US/docs/Web/CSS
• https://webstatus.dev/
• https://web.dev/baseline/