modern-css-html

モダン CSS と HTML

現在のプラットフォーム機能を使って CSS と HTML を記述します。レガシーなハックや不要な JavaScript ではなく、ネイティブ機能を優先してください。

ほかのスキルとの役割分担

• このスキルはネイティブな実装方法を担当します。
• fluid-design は、物理演算、中断、ジェスチャーの要件が CSS の範囲を超える場合に、インタラクションの感触を担当します。
• semantic-html-first は、要素と ARIA の境界を担当します。
• 要件を満たせるネイティブな CSS／HTML 機能があり、サポート状況に問題がなければ、それを使ってください。

ブラウザーのサポート方針

タスクで単一エンジンの実験が明示的に許可されていない限り、WebKit（Safari）と Blink（Chrome／Edge）の両方で利用できる機能を対象とします。

• 両エンジンで広く利用可能： デフォルトで採用します。
• 両エンジンで新たに利用可能： @supports を使って段階的に機能を強化します。
• 単一エンジンのみ、または不安定： オプションとして説明し、クロスエンジンで使える方法も提示します。

推奨事項に変動しやすい全体の対応率を固定値で記載しないでください。対応状況に確信がない場合は再確認し、「両エンジン対応／機能強化／フォールバック」の形で判断を示してください。

基本方針

HTML

• ARIA ウィジェットよりも、ネイティブ要素（button、a、details、dialog、select、フォームコントロール）を優先します。
• div だらけの構造ではなく、セマンティックな構造（main、nav、section、見出し）を優先します。
• サポート状況に問題がなければ、独自のフローティング要素の積み重ねより Popover API と CSS Anchor Positioning を優先します。

レイアウト

• マージンのハックではなく gap を、4 方向の物理的なオフセットではなく inset を、パディングのハックではなく aspect-ratio を使います。
• モバイルの全画面表示には 100dvh を使い、方向に応じた余白には論理プロパティを使います。
• コンポーネントのレスポンシブ対応にはコンテナクエリを、メディアクエリには範囲構文を使います。
• JavaScript の代替になる場合は、subgrid、grid-template-areas、position: sticky、スクロールスナップを使います。

色とテーマ

• oklch() でパレットを作成します。
• color-mix() と相対色構文で状態ごとの色を導出します。
• 重複する配色ブロックより、color-scheme と組み合わせた light-dark() を優先します。

モーション

• translate、rotate、scale、opacity のアニメーションを優先します。
• サポートされている場合は、表示／非表示の切り替えに @starting-style と transition-behavior: allow-discrete を使います。
• サポート状況に問題がなければ、Intersection Observer によるクラスの切り替えより CSS のスクロール駆動タイムラインを優先します。
• スプリング、ジェスチャー、中断可能な物理演算については fluid-design を参照してください。

レビューチェックリスト

• このコントロールに適したネイティブ HTML 要素はありますか？
• レイアウト、色、モーションをライブラリなしで CSS だけで実現できますか？
• 色は場当たり的な 16 進数ではなく、トークンや oklch で指定されていますか？
• 必要なフォールバックは @supports で記述されていますか？
• モーションを軽減する設定に対して、実質的な代替手段がありますか？
• 方向に依存する UI で、物理的な left/right プロパティを避けていますか？
• JavaScript が残っている場合、CSS／HTML では補えない部分を担っていますか？

参考資料

• 該当するパターンを実装する場合は、タスク別レシピを読んでください。
• 機能やフォールバックを選ぶ場合は、機能に関する注記を読んでください。 現在の判断に関連する参考資料だけを読み込んでください。