CSSのif構文は夢を見るか

2025/01/30（木）18:00-19:00

※これから紹介する構文はまだ実装段階ではないので大きく構文が変わるまたはそもそも実装されない可能性もあります

https://gyazo.com/8e53f0612584bdc5aaf5c63a9841a9a5

CSSでif文が書けるようになる未来が来るかも？？

Explainer

code:css

if(

<if-condition>: <declaration-value>? ;

<if-condition>: <declaration-value>? ;

…

<if-condition>: <declaration-value>? ;

)

先頭から順番に条件を評価して、最初にtrueになった条件に対応するdeclaration-valueを返す

全部falseなら何も返さないという挙動

if-conditionの中には以下を含めることができる

@media

カスタムプロパティ

多分こんな感じ（ダークテーマ）

code:css

<style>

/* custom property */

:root {

--color: black;

}

/* dark theme */

.dark {

--color: black;

}

/* light theme */

.light {

--color: white;

}

.box {

color: var(--color);

/* if() function */

background-color: if(

style(--color: white): white;

else: black

);

padding: 10px;

margin: 5px 0;

}

</style>

<div class="box dark">Dark Theme</div>

<div class="box light">Light Theme</div>

code:css

<style>

.box {

width: 200px;

height: 100px;

/* if() function */

background-color: if(

media(max-width: 767px): red;

else: blue

);

display: flex;

justify-content: center;

align-items: center;

margin: 20px;

}

</style>

うーんいいじゃん！

https://gyazo.com/a417488affeac221eab7d32173cdde27

本当ですか？

CSSに条件を持ち込むことへの抵抗

そのif文自体が間違っているかの検知はCSS上ではできなそう（だってCSSだもん！）

複雑な条件を入れ込むことも可能でそうすると可読性が低くなりそう

一方でテーマなどの切り替えはif文で楽に書けそう

夢をみるか？

昨今テーマなどを管理する方法が充実しているので、そこまで必要性を感じていない。

賛否両論があることはいいことなので注目はします！

ご清聴ありがとうございました🙌🙌

追記