CSS - if()

概要
説明
リンク

概要

形式	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 でサポートされました。現時点(2025年11月)では、Firefox や Safari は未対応のようです。

style()

下記の例は、背景色は --mode の値が dark か --light かによって背景色、ボーダー、文字色を変更しています。

CSS

.my-container-1 {
  --mode: dark;
  padding: 8px;
  background-color: if(style(--mode: dark): black; else: white);
  border: 1px solid if(style(--mode: dark): white; else: black);
  color: if(style(--mode: dark): white; else: black);
}

HTML

<div class="my-container-1">
  <p>This is ...</p>
</div>

表示

This is ...

2025年11月の Chrome 142 からは > や >= などの演算子も使用できるようになりました。下記の例では 80% 以上になると棒グラフを赤く表示しています。

CSS

.bar-graph {
  height: 20px;
  width: 300px;
  margin-bottom: 8px;
  --value: attr(data-value type(<percentage>));
  --barColor: if(style(var(--value) >= 80%): #f88; else: #88f);
  --bgColor: if(style(var(--value) >= 80%): #fdd; else: #ddf);
  background: linear-gradient(to right, var(--barColor) var(--value), var(--bgColor) var(--value));
}

HTML

<div class="bar-graph" data-value="70%"></div>
<div class="bar-graph" data-value="80%"></div>

表示

media()

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

CSS

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

HTML

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

表示

AAA

BBB

CCC

supports()

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

CSS

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

else

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

CSS

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

複数条件

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

CSS

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

and, or, not条件

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

CSS

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

リンク

http://www.tohoho-web.com/css/func/if.htm