CSSだけで「if」を考える時代が来た？

「CSSに if はない」は、もう半分だけ正しい

CSSを学んでいると、必ず一度はこう言われます。

CSSに if 文はありません。条件分岐は JavaScript の役割です

この説明は、考え方としては正しいのですが、表現としては少し古くなり始めています。

最近、Chrome の開発者向け公式ブログで、CSS にネイティブの if() 関数を導入する提案・実装が公開されました。

これを見て、

• CSSに if が書けるようになるの？
• Sass の if と何が違う？
• 教材や実務で使っていい段階？

と疑問を持った方も多いと思います。

この記事では、

• JavaScriptを使わず
• Sassも前提にせず
• 「CSSだけ」で if をどう考えるか

を軸に、新しい if() 関数の位置づけと、現実的な判断基準を整理します。

そもそも「if」とは何か（処理ではなく考え方）

if 文とは、簡単に言えば　条件によって結果を変える　という考え方です。JavaScript では次のように書きます。

if (isMobile) {
  size = 44;
} else {
  size = 30;
}

これを CSSの視点に置き換えると、　ある条件のときだけ、見た目が変わる　という意味になります。

ここで重要なのは、CSSは「処理を実行する言語」ではないという点です。

実はCSSは、最初から「if的」だった

CSSに if はない、と言われがちですが、実は CSS は最初から条件だらけです。

button:hover {
  background: red;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

input:checked + .menu {
  display: block;
}

なぜ「CSSに if はない」と言われ続けてきたのか

理由はとてもシンプルです。CSSにはこれまで、「1つのプロパティの値を条件で切り替える書き方」が存在しなかったからです。

そのため、

• 条件ごとにルールを分ける
• @media を増やす
• クラスを付け替える

といった 回り道 が必要でした。

新しく登場した CSS の if() 関数

そこで登場したのが、CSSネイティブの if() 関数です。

構文のイメージは次のような形です。

property: if(条件: 値A; else: 値B);

つまり、

• 同じプロパティの中で
• 条件によって値を切り替えられる

というのが最大の特徴です。

button {
  padding: if(media(any-pointer: coarse): 16px; else: 8px);
}

JavaScriptのifと「似ているが、別物」

ここは誤解しやすいポイントです。

CSS の if() は、

• 変数に代入する
• 処理を実行する
• 状態を変更する

といったことは 一切できません。あくまで、条件に応じて「見た目の値」を選ぶための仕組みです。

つまりこれは、

• JavaScript の代替ではなく
• CSS設計を整理するための進化

と考えるのが正解です。

ブラウザ対応状況の現実ここからが、実務・教材で最も重要

Can I Use の情報を見ると、CSS の if() 関数は 現時点では限定的な対応状況です。

つまり、「一部のブラウザでは動くが、全体ではまだ早い」という分類になります。

これは、experimental（実験的）〜 early adoption 段階と考えるのが妥当です。

フォールバック前提でどう考えるべきか

CSS の if() 関数は、現時点では「使えたらラッキー」ではなく「使えない前提で設計する」必要があります。

ここで重要なのは、

非対応ブラウザで壊れないこと

です。

button {
  padding: 8px; /* まずは全ブラウザ共通 */
}

/* if() が使える環境だけ上書き */
button {
  padding: if(media(any-pointer: coarse): 16px; else: 8px);
}

Sass の if と混同しないために

@if $theme == dark {
  body {
    background: #000;
  }
}