CSS if() 条件函数生成器
可视化生成 CSS 条件值函数（if()，CSS Values Module Level 5，
Chrome 137+ 起实验性支持）：完整支持 style() 样式查询、
media() 媒体查询、supports() 特性查询三种条件类型与
else 默认值；多分支动态增删，按顺序求值，第一个为 true 的分支返回其值。
内置原理说明面板——实时展示求值顺序与当前环境命中分支。
iframe 沙箱预览支持自定义属性输入验证 style() 条件命中。
内置暗色模式切换、响应式宽度、特性检测降级、多主题切换、打印样式等 8 组预设。
适用于基于自定义属性的主题切换、单属性响应式适配、特性检测降级、替代多重
@media / @supports 查询等现代前端开发场景。所有处理在浏览器本地完成。
测试元素自身的自定义属性值，如 style(--theme: dark)
测试元素自身的自定义属性值，如 style(--theme: dark)
当前为 color 属性生成 if() 声明，共 3 个分支（含 else）。 求值规则：浏览器按顺序求值各条件，第一个为 true 的分支返回其值；全为 false 时返回 else 值。 当前预览环境下：#e5e5e5（自定义属性 --theme = "dark" 命中 style() 条件）。 语法提醒：if 与 ( 之间不能有空格，否则整个声明无效；条件与值之间用冒号分隔，分支之间用分号分隔。
核心规则：if() 不优雅降级——不支持的浏览器会忽略整个声明， 因此推荐先写一条静态回退声明，再用 if() 覆盖。 注意 style() 条件目前只支持自定义属性查询， 不支持常规 CSS 属性。
/* 不支持 if() 的浏览器回退 */
.demo {
color: #1a1a1a;
}
/* 支持 if() 的浏览器（Chrome 137+）覆盖上面的回退 */
.demo {
color: if( style(--theme: dark) : #e5e5e5; style(--theme: light) : #1a1a1a; else : #1a1a1a);
}常见问题
什么是 CSS if() 条件函数？它解决了什么问题？
if() 是 CSS Values Module Level 5 引入的条件值函数，语法为
if(<条件> : <值>; <条件> : <值>; else : <值>)——
浏览器按顺序求值各条件，第一个为 true 的分支返回其值；全为 false 时返回
else 值。
它解决了 CSS 条件样式的三大痛点：一是单属性条件化，过去要根据条件改变一个属性值
必须写完整的 @media 或 @supports 规则块，代码分散；二是
组件级条件难，全局 at-rule 无法精确针对单个元素的自定义属性做条件；
三是多分支冗长，多重媒体查询需要嵌套或重复定义。if() 把条件判断
内联到一条属性声明，按顺序短路求值，组件级可控，代码集中。
if() 支持哪三种条件类型？分别用在什么场景？
if() 支持三种条件类型，覆盖 CSS 中所有条件查询场景：
1. style() 样式查询：测试元素自身的自定义属性值，语法
style(--theme: dark)。适用于基于 CSS 变量的主题切换、组件状态切换、设计令牌驱动等。
注意：目前仅支持自定义属性，不支持普通 CSS 属性查询。
2. media() 媒体查询：测试媒体特性，语法 media(min-width: 768px) 或
media(prefers-color-scheme: dark)。适用于单属性的响应式适配、暗色模式、打印样式等，
替代写整个 @media 规则块。
3. supports() 特性查询：测试浏览器是否支持某属性值，语法
supports(color: lch(0 0 0))。适用于渐进增强、新特性降级、
浏览器兼容性检测等场景。
三类条件可混合使用于同一个 if() 中，按顺序短路求值。
if() 的语法有哪些关键规则与易错点？
if() 语法有四个关键规则与易错点：
1. if 与 ( 之间不能有空格：写成 if (...) 会使整个声明无效，
必须紧贴写作 if(...)。这是最常见的语法错误。
2. 条件与值用冒号分隔：每个分支格式为 <条件> : <值>，
冒号两侧可有空格。
3. 分支之间用分号分隔：多个分支用 ; 分隔，最后一个分支的分号可选。
4. else 是关键字不是函数：else 是始终为 true 的兜底条件，
写作 else : <值>，不能写作 else()。
此外，单个条件或值无效不会使整个 if() 失效，解析器会跳过该分支继续求值。
若所有分支都无效，if() 返回 guaranteed-invalid，属性回退到 initial。
if() 的浏览器兼容性如何？旧浏览器怎么降级？
兼容性：if() 自 Chrome 137+（2025 年）起实验性支持，
目前尚未进入 Baseline，Safari 与 Firefox 暂未稳定支持。
生产环境使用前请确认目标浏览器，或做好降级。
降级策略：if() 不会优雅降级——不支持的浏览器会
整个声明无效，必须显式提供回退。推荐写法：
1. 先写静态回退声明：.demo { color: #1a1a1a; }
2. 再用 if() 覆盖：.demo { color: if(style(--theme: dark) : #e5e5e5; else : #1a1a1a); }
旧浏览器停留在 #1a1a1a，新浏览器按条件求值覆盖。
也可用 @supports (color: if(1 : red; else : blue)) 做特性检测，
仅在支持时应用 if()。本工具生成的代码已自动包含静态回退声明（可在面板中开关）。
if() 与 @media / @supports / @container 有什么区别？
四者都是 CSS 条件机制，但作用域与粒度不同，互补而非替代：
@media：作用于整个规则块，基于媒体特性（视口宽度、暗色模式等）切换多组样式。
适合整体布局切换。
@supports：作用于整个规则块，基于浏览器特性支持切换多组样式。
适合渐进增强整体方案。
@container：作用于整个规则块，基于容器尺寸或样式查询切换多组样式。
适合组件容器响应式。
if()：作用于单个属性值，把条件判断内联到一条声明中。
适合单属性条件化——只改一个值时无需写完整规则块。
经验：需要切换多个属性用 at-rule；只切换单个属性用 if()。
if() 的 style() 条件相比 @container style() 查询，
可直接作用于元素自身，无需查找容器父级。
if() 中的 style() 查询能测试普通 CSS 属性吗？
不能。当前 style() 条件仅支持自定义属性
（CSS 变量，如 --theme、--size），不支持普通 CSS 属性查询。
例如 style(display: flex) 不会工作，
但 style(--layout: flex) 可以。
这是规范现状的限制，未来版本可能扩展支持普通属性。变通做法是：
把要查询的状态用自定义属性"代理"——在元素上设置 --state: active，
然后用 style(--state: active) 查询。
本工具的 style() 分支默认提示输入自定义属性表达式（如 --theme: dark），
预览区提供"自定义属性输入"框，可手动设置 --theme: dark 等值实时验证条件命中。
if() 能嵌套使用吗？支持 and / or / not 逻辑吗？
可以嵌套。if() 函数的值部分可以再嵌套 if()，
实现多层条件判断。例如：
color: if(style(--theme: dark) : if(style(--variant: muted) : #888; else : #fff); else : #1a1a1a);
外层判断主题，内层在暗色主题下再判断变体。
逻辑运算符：三类条件内部都支持 and / or / not 逻辑组合。
例如：
- style(--theme: dark and --variant: muted)（同时满足）
- media(min-width: 768px and prefers-color-scheme: dark)（视口与暗色同时满足）
- supports(not (color: lch(0 0 0)))（不支持 lch 时降级）
嵌套与逻辑组合可结合使用，但建议适度，过深的嵌套会降低可读性。
复杂条件建议拆分为多个声明或使用 at-rule。
这个工具的预览安全吗？数据会上传吗？
完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 条件分支编辑、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，样式与 HTML 完全隔离在 iframe 内，
不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox="allow-same-origin" 属性限制能力，
预览内容无法执行脚本、提交表单或访问父页面。
- 生成的 if() CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何 CSS 条件值与生产场景。