CSS の条件文: 代替アプローチ

現代の Web 開発では、動的変数に基づいてユーザー エクスペリエンスをシームレスに適応させることが不可欠です。 CSS はスタイル設定には強力ですが、if/else などの従来の条件文がありません。ただし、同様の機能を実現できる代替手段がいくつかあります。

1 つのアプローチは、クラスを利用することです。特定のクラスを使用して HTML 要素を操作することにより、それらのクラスの有無に基づいてさまざまなスタイルを適用できます。次の例を考えてみましょう:

Text
Text

p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}

Sass のような CSS プリプロセッサも、条件分岐に対する高度な機能を提供します。含まれている条件ステートメントにより、より複雑なロジックが可能になります。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  }
  @else if $type == matador {
    color: red;
  }
  @else if $type == monster {
    color: green;
  }
  @else {
    color: black;
  }
}

最新の CSS で導入されたカスタム プロパティは、動的なスタイル設定のための貴重なツールを提供します。これらは変数のように動作し、実行時に評価されます:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

サーバー側制御の場合、PHP などの言語でスタイルシートを前処理すると、動的変更が可能になります:

p {
  background-position: = (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

CSS には従来の if/else 構文がありませんが、これらの代替構文は、動的で応答性の高いユーザー インターフェイスを作成するための柔軟で効果的な方法を提供します。