# 【CSS】if()函數
從```Chrome 137```開始，可以使用CSS ```if()```函數了
### Syntax

property: if(
  condition-1: value-1; 
  condition-2: value-2; 
  condition-3: value-3; 
  else: value-4
);

### if的condition支持三種query
* style query(```style()```)
* media query(```media()```)
* feature query(```supports()```)

例如:

background-color: if(style(--scheme: dark): #eeeeee;)
padding: if(media(width > 700px): 0 auto;)
display: if(supports(display: grid): grid; else: flex);

也可以在query中使用```and```、```or```、```not``` 等邏輯子

background-color: if(
  style((--scheme: dark) or (--scheme: very-dark)): black;
);
border-color: if(
  media((width > 700px) and (width < 1000px)): blue;
);
margin-top: if(
  supports(not selector(:buffering)): 1em;
);

:::danger
這邊要注意的是style query只支持custom properties
>Note that container style queries currently don't support regular CSS properties, just CSS custom properties. For example, the following won't work:
>```
>// NOT SUPPORT
> if(
> background-color: if(style(color: white): black;);
> )
>```
:::

### Providing fallback values
不加```else```也可以
如果沒有```else```，```if()```不成立時，property的值就會被設定成```initial```
>Note: Remember to include the ```else``` condition. In ```if()```-supporting browsers, if no ```else``` value were included and ```--size``` was not equal to ```"2xl"```, the padding would be set to ```initial```.
>```css
>padding: 1em;
>padding: if(style(--size: "2xl"): 1em; else: 0.25em);
>```

### Whole and partial values
可以用if()判斷想要設定的property
> An if() function can be set as the value of any CSS property, but it can also be used to determine parts of property values. For example, the following sets a different border-color inside a border shorthand property, depending on whether lch() colors are supported:
>```CSS
>border: if(
> supports(color: lch(75% 0 0)): 3px solid lch(75% 0 0);
> else: 3px solid silver;
>);
>```
>However, we could use the if() function to determine the border-color component only:
>```
>border: 3px solid
> if(
> supports(color: lch(75% 0 0)): lch(75% 0 0); else: silver;
> );
>```

### Nesting if() functions

可以嵌套，也可以放在其他函數裡面，例如```calc()```
>Because an ```if()``` function can take the place of whole property values or individual components, it is possible to nest ```if()``` functions within other ```if()``` functions, and inside other functions such as ```calc()```.

color: if(
  style(--scheme: ice):
    if(
      media(prefers-color-scheme: dark): #caf0f8;
      else: #03045e;
    );
  style(--scheme: fire):
    if(
      media(prefers-color-scheme: dark): #ffc971;
      else: #621708;
    );
  else: black
);

width: calc(if(
    style(--scheme: wide): 70%;
    else: 50%;
  ) - 50px);

### 範例
使用select來更換div背景色
[CodePen](https://codepen.io/stephen533422/pen/jEWEXoX)

### reference
* https://developer.mozilla.org/en-US/docs/Web/CSS/if
* https://developer.chrome.com/blog/if-article
* https://www.zhangxinxu.com/wordpress/2025/07/css-if-function/