if/else ステートメントを使用せずに CSS で条件付きロジックを実装するにはどうすればよいですか?

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

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

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

<p class="normal">Text</p>
<p class="active">Text</p>

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 構文に加えて、これらの代替方法は、動的で応答性の高いユーザー インターフェイスを作成するための柔軟で効果的な方法を提供します。

以上がif/else ステートメントを使用せずに CSS で条件付きロジックを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。