CSS で条件付きスタイルを実現するにはどうすればよいですか?

CSS の条件付きスタイル: 代替手段の探索

従来、if/else 条件は CSS でネイティブにサポートされていません。ただし、条件付きスタイルを実現するにはさまざまな方法があります。

CSS クラス

1 つの方法では、CSS クラスを使用して、条件ごとに異なるスタイルを定義します。たとえば、次の 2 つのクラスを作成できます:

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

CSS ファイル内:

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

このアプローチは広くサポートされており、条件の実行時評価が可能です。

CSS プリプロセッサ

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;
}

それを CSS で使用します:

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

サーバー側の前処理

サーバー側のプリプロセッサは生成できます動的な値に基づく条件付き CSS。たとえば、次のようなコードを作成できます。

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

ただし、このアプローチではサーバー側のレンダリングが必要なため、パフォーマンスに影響が出る可能性があります。

純粋な CSS テクニック

最後に、Ahmad Shadeed の記事では、外部メカニズムに依存せずに条件付き UI シナリオに対処するためのさまざまな純粋な CSS テクニックを示しています。

以上がCSS で条件付きスタイルを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。