modern-css

モダン CSS

求められる動作と対応ブラウザーに適したネイティブ CSS 機能を選んでください。ユーザーの明示的な指示は、このスキルのガイドラインより優先されます。変更が依頼の一部でない限り、プロジェクトのフレームワーク、プリプロセッサー、トークン、スタイル規約を維持してください。

スタイリングの問題を解決する

対象のマークアップやスタイル、求められる見た目やインタラクション、ブラウザーの対象範囲を入力として使用します。プロジェクトの設定から対象範囲を推測できる場合は、そこから判断してください。サポート情報がなく、その情報によって実装が変わる場合は、確認するか、保守的なフォールバックを明示してください。

同梱されているサポート表は、過去の調査時点のスナップショットであり、現在の互換性を保証するものではありません。サポート状況が重要な場合は、対象機能について MDN の互換性データ または Web Platform Status を確認してください。

必要なこと	出発点
行と列、または整列したネストトラック	Grid ／ Subgrid
一次元の配置	Flexbox
コンポーネントが利用できるスペースに基づくレイアウト	コンテナークエリー
カスケードの上書きや詳細度の競合	レイヤー、スコープ、セレクターの詳細度
テーマや派生色	カスタムプロパティ、色関数、color-scheme
モーション、ポップオーバー、スクロール効果	機能別リファレンスとフォールバック

使いやすさを維持する

• 対応ブラウザーでレイアウトとインタラクションを維持してください。機能を利用できない場合は、プログレッシブエンハンスメントまたは機能検出を使用してください。
• カスケードの変更は、既存のオリジン、重要度、レイヤーの順序に合わせてください。レイヤーを追加すると、優先順位が変わる可能性があります。
• インタラクティブなコンポーネントを変更する場合は、動きを抑える設定を尊重し、フォーカスやキーボード操作を維持してください。
• モダン CSS は選択肢として活用し、JavaScript の削除や、正常に動作しているコントロールの再構築を必須にしないでください。置き換えが適切かどうかは、サポート状況と同等の動作が得られるかで判断してください。
• リセットやスタイルシートの再編成はタスクの範囲内に留めてください。コンポーネントの編集にグローバルなリセットは必要ありません。

依頼されたスタイル変更または説明を提供し、実装時には影響を受けるレイアウトや状態を確認してください。未確認のブラウザー上の制限は、例をサポートの証拠として扱わず、明示してください。

リファレンス

関連する範囲のみを読み込み、その内容から具体的な機能を探してください。

タスク	リファレンス
レイヤー、スコープ、ネスト、詳細度	CASCADE.md
Grid、Flexbox、コンテナー、固有サイズ	LAYOUT.md
関係セレクター、フォーカス、疑似要素	SELECTORS.md
色空間、パレット、ダークモード	COLOR.md
カスタムプロパティ、関数、デザイントークン	TOKENS.md
トランジション、キーフレーム、開始／終了、ビュー遷移	ANIMATION.md
スクロールタイムライン、スティッキー状態、カルーセル	SCROLL.md
ダイアログ、ポップオーバー、アンカー、セレクト、フィールドサイズ	COMPONENTS.md
レンダリング性能、タイポグラフィ、書字方向	PERFORMANCE.md
簡潔な構文や機能検出の検索	CHEATSHEET.md