はじめに
みなさんは、CSSで条件分岐ができるようになったのをご存じでしょうか？
これまでは、画面サイズなどの条件によってスタイルを変えたい場合は、
メディアクエリを使ったり、JavaScriptでスタイルを付け替えたりしていたと思います。
しかし、Chrome 137 以降では、「if() 関数」が使えるようになり、
特定のプロパティだけを条件に応じて、変更することができるようになりました。
そのため、この記事ではif() について紹介します。
if() 関数とは？
if() 関数は、指定した条件に応じて、特定の値を返す関数です。
基本的な構文は以下のようになります。
if ( /* 条件 */: /* trueの場合 */; else: /* falseの場合 */;)
複数条件の場合は以下のようになります。
if ( /* 条件① */ : /* 条件①がtrueの場合 */;
/* 条件② */ : /* 条件②がtrueの場合 */;
else: /* falseの場合 */;
)
基本的な使い方は、以下の通りです。
<p> タグのwidthが700px以上の時に、font-sizeを24pxにして
それ以外は、16pxにしています。
p {
font-size: if(media(width > 700px): 24px; else: 16px;)
}
条件式で使えるもの
条件で使える値
条件式で使える値は以下の3つです。
-
スタイルクエリー
- カスタムプロパティの値
-
style(--hoge: fuga):--hogeがfugaだったら
:root { --scheme: dark }
p {
color: if(style(--scheme: dark): #FFFFFF; else: #000000;)
}
-
メディアクエリー
- 端末の状態・特徴に応じた値
-
media(prefers-color-scheme: dark):color-schemeがdarkだったら
p {
color: if(media(prefers-color-scheme: dark): #FFFFFF; else: #000000;)
}
-
機能クエリー
- CSSプロパティやプロパティ値
-
supports(color: #ff0000): colorが#ff0000だったら
p {
text-decoration: if(supports(color: #FFFFFF): underline;)
}
条件で使える論理式
- 論理積（and）
/* (--scheme: dark) and (--contrast: hi) */
p {
color: if(style((--scheme: dark) and (--contrast: hi)): #FFFFFF; else: #000000;)
}
- 論理和（or）
/* (--scheme: dark) or (--scheme: light-dark) */
p {
color: if(style((--scheme: dark) or (--scheme: light-dark)): #FFFFFF; else: #000000;)
}
- 論理否定（not）
/* not style(--scheme: dark) */
p {
color: if(not style(--scheme: dark): #FFFFFF; else: #000000;)
}
まとめ
この記事では、CSSで条件分岐ができるようになった if() 関数について紹介しました。
ぜひこの if() 関数を試してみて、よりスマートなスタイル実装に活かしてみてください！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。