CSS ifを使ったブレイクポイント

CSSのif関数

Chrome 137から使えるようになったCSSのif関数ですが、2025年6月29日時点では対応しているのがChromeとEdgeの2つのブラウザのみのようです。

ifを使った画面サイズのスタイルなどができそうかなと思って試してみました。

従来のブレイクポイントを使ったやり方

<div class="box">
    <p>Test Box</p>
</div>

.box {
  background-color: black;
  border-radius: 16px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  padding: 50px;
}

@media (max-width: 768px){
  .box {
    background-color: green;
    border-radius: 8px;
  }
}

@media (max-width: 375px){
  .box {
    background-color: pink;
    border-radius: 0;
  }
}

上記のコードは画面の大きさが小さくなると、背景色が黒→緑→ピンクに変わり、角丸がなくなっていきます。

ifを使ったやり方

if関数を使って書いてみました。

.box {
  background-color: if(
    media(max-width:375px): pink;
    media(max-width:768px): green;
    else: black;
  );
  border-radius: if(
    media(max-width:375px): 0;
    media(max-width:768px): 8px;
    else: 16px;
  );
  color: white;
  font-size: 40px;
  font-weight: bold;
  padding: 50px;
}

うまく機能していますね。

実際のソースコードは以下になります。

See the Pen CSS If function by Makoto Ogata (@makoto-ogata) on CodePen.

ブレイクポイントをrootで定義する

はじめからブレイクポイントを変数として定義して使い回せる事もできます。
その場合、以下のように書くことができます。

:root {
  --bp: if(
    media(max-width:375px): "sm";
    media(max-width:768px): "md";
    else: "lg";
  );
}

.box {
  background-color: if(
    style(--bp: "sm"): pink;
    style(--bp: "md"): green;
    else: black;
  );
  border-radius: if(
    style(--bp: "sm"): 0;
    style(--bp: "md"): 8px;
    else: 16px;
  );
  color: white;
  font-size: 40px;
  font-weight: bold;
  padding: 50px;
}

ifを使ってダークテーマの対応も出来そうですね。

p {
 color: if(
     media(prefers-color-scheme: dark): white;
     else: black;
 );
}

最後に

一つのclassの中で条件分岐ができるのは、メディアクエリを別途書く必要がなく、記述量が減って簡潔にCSSが書けるようになると思います。
まだChromeでしか使うことはできないですが、はやく全てのブラウザが対応してほしいと願うばかりです。

参考