CSS - if()

• トップ
• CSSリファレンス
• if()

• 概要
• 説明
  • style()
  • media()
  • supports()
  • else
  • 複数条件
  • and, or, not条件
• リンク

概要

形式	if([ <if-branch> ; ]* <if-branch> ;?)
詳細	<if-branch> = <if-condition> : <value>? <if-condition> = style( style-conditions ) | media( media-conditions ) | supports( supports-conditions ) | else
サポート	https://caniuse.com/mdn-css_types_if

説明

CSS の中で if 文を使用できる機能です。Chrome 137 でサポートされました。

style()

下記の例は、背景色は --mode の値が dark であれば黒、さもなくば白に、文字色は --mode の値が dark であれば白、さもなくば黒に指定します。

.dark {
  --mode: dark;
}
.light {
  --mode: light;
}
div:is(.dark, .light) {
  padding: 8px;
  background-color: if(style(--mode: dark): black; else: white);
  color: if(style(--mode: dark): white; else: black);
}

<div class="dark">Dark mode</div>
<div class="light">Light mode</div>

media()

@media によるメディアクエリと同様の判断を行います。下記の例では、ブラウザの横幅が 768px より狭いときはブロックレイアウト(縦並び)を、さもなくばフレックスレイアウト(横並び)を指定しています。

.my-container {
  display: if(media(width < 768px): block; else: flex);
  & > div {
    flex: 1;
    border: 1px solid #ccc;
    text-align: center;
  }
}

<div class="my-container">
  <div>AAA</div>
  <div>BBB</div>
  <div>CCC</div>
</div>

supports()

指定したCSSをブラウザがサポートしているか否かを判断します。Chrome 137 でもまだサポートされていないようです。@supports を用いることで機能としては代替できます。

.grid {
  display: if(supports(display: grid): grid; else: block;);
}

else

else は前述の条件のいずれにもマッチしなかった時の値を指定します。

.my-container {
  display: if(media(width < 768px): block; else: flex);
}

複数条件

下記の様に複数の条件を記述することもできます。

.my-test {
  color: if(
    style(--mode: cool): blue;
    style(--mode: hot): red;
    style(--mode: eco): green;
    else: black;
  );
}

and, or, not条件

下記の様に and, or, not を用いた条件文を記述することもできます。

.my-test {
  color: if(style((--mode: hot) or (--mode: fire)): red; else: black);
}

リンク

• https://drafts.csswg.org/css-values-5/#if-notation
• https://caniuse.com/mdn-css_types_if

---