CSS @whenルール：条件付きスタイル適用をマスターする

CSSの世界は常に進化しており、開発者にとってより強力で柔軟なWebページをスタイリングする方法を提供しています。そのような機能の1つとして注目を集めているのが、@whenルールです。これはCSS Conditional Rules Module Level 1としても知られています。このルールを使用すると、特定の条件が満たされた場合にのみCSSスタイルを条件付きで適用できます。レスポンシブデザイン、機能検出、およびより堅牢で適応性のあるスタイルシートを作成するための強力なツールです。

CSS @whenルールとは？

@whenルールは、CSSの条件付きat-ruleであり、特定の条件が真の場合にのみ適用されるスタイルを定義できます。CSSのifステートメントと考えてください。主にビューポートの特性（画面サイズ、向きなど）に焦点を当てているメディアクエリとは異なり、@whenは条件付きスタイリングを処理するためのより一般的で拡張可能な方法を提供します。@supportsや@mediaなどの既存の条件付きat-ruleを拡張したものです。

@whenを使用する主な利点

コードの可読性の向上：@whenブロック内に条件ロジックをカプセル化することで、CSSをより理解しやすく、保守しやすくします。特定のスタイル適用の背後にある意図が明確になります。
柔軟性の向上：@whenは、特に機能クエリやJavaScript駆動ロジック（CSSカスタムプロパティを使用）と組み合わせると、従来のメディアクエリよりも複雑な条件を処理できます。
機能検出の簡素化：@whenは@supportsとシームレスに統合されており、特定のブラウザ機能が利用可能な場合にのみスタイルを適用できます。これはプログレッシブエンハンスメントにとって重要です。
よりセマンティックなスタイリング：@whenを使用すると、要素の状態またはコンテキストに基づいて要素をスタイル設定できるため、よりセマンティックで保守可能なCSSになります。たとえば、JavaScriptによって設定されたデータ属性またはカスタムプロパティに基づいて要素をスタイル設定します。

@whenルールの構文

@whenルールの基本的な構文は次のとおりです。

@when <condition> {
  /* 条件がtrueの場合に適用するCSSルール */
}

<condition>は、trueまたはfalseに評価される有効なブール式です。この式には、多くの場合、次のものが含まれます。

メディアクエリ：ビューポートの特性（画面の幅、デバイスの向きなど）に基づく条件。
機能クエリ（@supports）：特定のCSS機能に対するブラウザのサポートに基づく条件。
ブール代数：論理演算子（and、or、not）を使用して複数の条件を組み合わせます。

@whenの実際の例

@whenルールのパワーと汎用性を示すために、いくつかの実際の例を見てみましょう。

1. @whenとメディアクエリを使用したレスポンシブデザイン

@whenの最も一般的なユースケースは、画面サイズに基づいてスタイルを調整するレスポンシブデザインです。メディアクエリだけでもこれを実現できますが、特に複雑な条件を扱う場合、@whenはより構造化され、読みやすいアプローチを提供します。

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

この例では、@whenブロック内のスタイルは、画面の幅が768pxから1023pxの間（一般的なタブレットサイズ）の場合にのみ適用されます。これにより、特定のビューポート範囲のスタイルを明確かつ簡潔に定義できます。

国際化に関する注意：レスポンシブデザインは、グローバルなオーディエンスにとって非常に重要です。地域によって画面サイズが異なることを考慮してください。たとえば、一部の国ではモバイルの使用率が高く、モバイルファーストのデザインがさらに重要になります。

2. @whenと@supportsを使用した機能検出

@whenを@supportsと組み合わせて、特定のCSS機能がブラウザでサポートされている場合にのみスタイルを適用できます。これにより、Webサイトを段階的に強化し、最新のブラウザを使用しているユーザーにはより良いエクスペリエンスを提供しながら、古いブラウザとの互換性を維持できます。

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* グリッドをサポートしていないブラウザのフォールバックスタイル */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* 古いブラウザの幅を調整 */
  }
}

ここでは、@supportsを使用して、ブラウザがCSS Grid Layoutをサポートしているかどうかを確認します。サポートしている場合は、グリッドベースのスタイルを.containerに適用します。そうでない場合は、flexboxを使用してフォールバックスタイルを提供し、同様のレイアウトが古いブラウザでも実現されるようにします。

グローバルアクセシビリティに関する注意：機能検出はアクセシビリティにとって重要です。古いブラウザは、新しいARIA属性またはセマンティックHTML5要素のサポートを欠いている場合があります。コンテンツが引き続きアクセス可能であることを保証するために、適切なフォールバックを提供してください。

3. メディアクエリと機能クエリの組み合わせ

@whenの真のパワーは、メディアクエリと機能クエリを組み合わせて、より複雑でニュアンスのある条件付きスタイリングルールを作成できることにあります。

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

この例では、画面の幅が少なくとも768pxかつブラウザがbackdrop-filterプロパティをサポートしている場合にのみ、.modal要素にぼやけた背景が表示されます。これにより、最新のブラウザで視覚的に魅力的なエフェクトを作成しながら、古いブラウザでの潜在的なパフォーマンスの問題やレンダリングの不具合を回避できます。

4. カスタムプロパティ（CSS変数）に基づくスタイリング

@whenは、CSSカスタムプロパティ（CSS変数とも呼ばれる）と組み合わせて、動的で状態駆動型のスタイリングを作成することもできます。JavaScriptを使用してカスタムプロパティの値を更新し、@whenを使用してその値に基づいて異なるスタイルを適用できます。

まず、カスタムプロパティを定義します。

:root {
  --theme-color: #007bff; /* デフォルトのテーマカラー */
  --is-dark-mode: false;
}

次に、@whenを使用して、カスタムプロパティの値に基づいてスタイルを適用します。

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

最後に、JavaScriptを使用して--is-dark-modeカスタムプロパティの値を切り替えます。

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

これにより、ユーザーはライトテーマとダークテーマを切り替えることができ、CSSはカスタムプロパティの値に基づいて動的に更新されます。`@when`でのCSS変数の直接比較は、ブラウザ全体で普遍的にサポートされていない可能性があることに注意してください。代わりに、ゼロ以外の値をチェックするメディアクエリを使用する回避策が必要になる場合があります。

@when ( --is-dark-mode > 0 ) { ... }

ただし、これが正しく機能するためには、カスタムプロパティに数値が設定されていることを確認してください。

アクセシビリティに関する注意：代替テーマ（ダークモードなど）を提供することは、アクセシビリティにとって非常に重要です。視覚障害のあるユーザーは、高コントラストテーマの恩恵を受ける可能性があります。テーマスイッチがキーボードとスクリーンリーダーでアクセスできることを確認してください。

5. データ属性に基づくスタイリング

データ属性とともに@whenを使用して、データ値に基づいて要素をスタイル設定することもできます。これは、ユーザーの操作またはデータの更新に基づいて要素の外観が変化する動的なインターフェイスを作成する場合に役立ちます。

たとえば、タスクのリストがあり、各タスクにはステータスを示すdata-status属性（「todo」、「in-progress」、「completed」など）があるとします。@whenを使用して、ステータスに基づいて各タスクのスタイルを個別に設定できます。

[data-status="todo"] {
  /* todoタスクのデフォルトスタイル */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

注：attribute()テスト条件のサポートは、現在、すべてのブラウザで制限されているか、完全に実装されていない可能性があります。常に十分にテストしてください。

ブラウザの互換性とポリフィル

2024年後半の時点で、@whenルールのブラウザサポートはまだ進化しています。多くの最新ブラウザがコア機能をサポートしていますが、一部の古いブラウザはサポートしていない可能性があります。したがって、互換性テーブルを確認し、必要に応じて適切なフォールバックまたはポリフィルを使用することが重要です。

常にCan I use...などのリソースを参照して、@whenおよび関連機能の現在のブラウザサポートステータスを確認してください。

@whenを使用するためのベストプラクティス

条件を単純に保つ：@whenブロック内で過度に複雑な条件を避けてください。複雑なロジックをより小さく、より管理しやすいチャンクに分割します。
フォールバックを提供する：@whenルールで使用している機能をサポートしていないブラウザのために、常にフォールバックスタイルを提供してください。これにより、異なるブラウザ間で一貫したエクスペリエンスが保証されます。
徹底的にテストする：さまざまなブラウザとデバイスでCSSをテストして、@whenルールが期待どおりに機能していることを確認してください。
意味のあるコメントを使用する：各@whenルールの目的と、それが基づいている条件を説明するために、CSSにコメントを追加します。これにより、コードが理解しやすく、保守しやすくなります。
パフォーマンスを考慮する：@whenルールを過度に使用することは避けてください。パフォーマンスに影響を与える可能性があります。評価する必要があるルールの数を最小限に抑えるようにCSSを最適化します。

結論

@whenルールは、CSSツールボックスへの強力な追加機能であり、開発者はより柔軟で表現力豊かな方法でスタイルを条件付きで適用できます。メディアクエリ、機能クエリ、CSSカスタムプロパティと組み合わせることで、より堅牢で適応性があり、保守可能なスタイルシートを作成できます。ブラウザのサポートはまだ進化していますが、@whenは検討し、最新のWeb開発ワークフローに組み込む価値のある機能です。

Webが進化し続けるにつれて、@whenのような機能をマスターすることは、世界中のユーザーに魅力的でアクセスしやすく、パフォーマンスの高いエクスペリエンスを作成するために不可欠になります。条件付きスタイリングの力を活用し、CSS開発で新しい可能性を解き放ちましょう。