新规矩来了：写样式也能像聊天一样做选择！
过去写网页样式特别折腾。比如手机横屏竖屏要分别写，新版老版浏览器要分别调。现在好了，新版Chrome带来的`if`功能，让你在CSS里直接做选择题！像在代码里直接写："如果手机横着放，就这样排；竖着放，就那样排。" 简单明了，省心多了。
以前调屏幕方向得这么写：
```css
/ 旧方法：分开两段写 /
@media {
.card-container {
flex-direction: row; / 横屏横着排 /
}
}
@media {
.card-container {
flex-direction: column; / 竖屏竖着排 /
}
}
```
现在一句话搞定：
```css
/ 新方法：一句话选 /
.card-container {
flex-direction: if: row; / 横屏横排 /
else: column / 其他全竖排 /
);
}
```
就这么直白！你想给手机做适配，不用再跳去另一个地方写规则，在原来位置加个`if`就行。眼睛不用来回扫，代码干净得像刚收拾好的屋子。
浏览器有新旧，功能支持也不一样。以前碰到新功能你得小心翼翼试试看：
```css
/ 旧方法：先试水再用 /
.modal {
background: white; / 老浏览器用纯白 /
}
@supports ) {
.modal {
background: rgba; / 支持特效才用透明白 /
backdrop-filter: blur; / 毛玻璃效果 /
}
}
```
现在呢？像点菜一样直接选：
```css
/ 新方法：直接下单 /
.modal {
background: if): rgba; / 支持就透明白 /
else: white; / 不行就纯白 /
);
backdrop-filter: blur; / 效果直接写上试试 /
}
```
最实用的还是能“看状态”变样式。比如做深色浅色切换，以前很麻烦：
```html
<div class="text" data-theme="dark">欢迎使用内联 if</div>
```
```css
/ 旧方法：读属性再对应 /
.text[data-theme="dark"] {
color: f1f1f1; / 深色背景用浅字 /
}
.text[data-theme="light"] {
color: 222; / 浅色背景用深字 /
}
```
现在好了，就地判断：
```css
/ 新方法：当场看颜色 /
.text {
--theme: attr; / 拿到值放变量里 /
color: if: f1f1f1; / 等于深色就用浅字 /
style: 222; / 等于浅色用深字 /
else: 444; / 没设置用灰字 /
);
}
```
`if`到底哪里好？第一，不用分块写代码了，逻辑和结果都在一起，找东西不再满世界翻。第二，`style`让你用自己元素的状态，不靠祖宗元素帮忙。第三，能和新东西混搭，玩出更多花样。
你琢磨下，这改变像不像点菜？不用看一本菜单，服务员直接问你："横屏竖屏？支持毛玻璃吗？深色还是浅色？" 你说什么，他立刻给。前端新手学起来不费劲，老手也能甩掉一堆重复代码。
现在只有新版Chrome支持，但别急，好东西推广都快。Firefox、Safari的工程师不可能看不见这热闹，过不了多久大家都能用上！
想想看，这改变背后是什么？是让人干活更舒服。码农写代码少折腾，用户看页面更顺眼。这不就挺好么？那些复杂的逻辑现在简单了，写CSS也变得像说话一样直来直去。下次你调页面颜色，不用费劲扒拉找地方，直接写个"如果...就...不就完了？
CSS，变得更好使了。