我没想到 CSS if 函数这么强
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 25/100
- issue の種類
- ドキュメント
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- css
調査の方向性
The issue body contains a complete Chinese draft article about the CSS if() function, but it names no repository file, test, or publication entry point. First clarify whether the requested work is to publish, edit, or fact-check the article; done should be defined by an agreed final article and its intended location.
索引モデルが issue の本文から書いたものです。
説明
如果 CSS 能像 JavaScript 一样进行条件判断会怎样？
你可能会想，只是个条件判断，能有什么用？
那你就太小瞧这个功能了！
这篇文章带你展示它的强大。
PS：目前 CSS if() 函数已在 Chrome 137 中正式发布。
1. 基本用法
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: default-value);
函数会按顺序检查条件并应用第一个匹配的值。如果没有条件匹配，则使用 else 值。
2. 3 大使用场景
2.1. 深色模式
以前实现深色模式，要么用 JavaScript 切换 class，要么写两套样式。
现在你可以直接这样写：
body {
--theme: "dark"; /* 通过 JavaScript 或用户偏好切换 */
background: if(style(--theme: "dark"): #1a1a1a; else: white);
color: if(style(--theme: "dark"): #e4e4e4; else: #333);
}
2.2. 响应式布局
以前写响应式：
.container {
width: 100%;
}
@media (min-width: 576px) {
.container {
width: 540px;
}
}
@media (min-width: 768px) {
.container {
width: 720px;
}
}
@media (min-width: 992px) {
.container {
width: 960px;
}
}
/* 还有更多... */
现在你可以这样写：
.container {
width: if(media(width >= 1400px): 1320px; media(width >= 1200px): 1140px; media(width >= 992px): 960px; media(width >= 768px): 720px; media(width >= 576px): 540px; else: 100%);
padding-inline: if(media(width >= 768px): 2rem; else: 1rem);
}
代码更优雅，性能更快，维护起来也方便。
2.3. 优雅降级
假设你想用最新的颜色函数 lch()，但又担心旧浏览器不支持。以前你可能要这样写：
.element {
border-color: rgb(200, 100, 50); /* 兜底方案 */
border-color: lch(50% 100 150); /* 新浏览器会覆盖 */
}
现在可以用 supports() 明确地检测：
.element {
border-color: if(supports(color: lch(0 0 0)): lch(50% 100 150) ; supports(color: lab(0 0 0)): lab(50 100 -50) ; else: rgb(200, 100, 50));
}
浏览器会按顺序检查：支持 lch() 就用 lch()，不支持就看看支持不支持 lab()，都不支持就用传统的 rgb()。
3. 浏览器支持度
截至 2025 年 8 月：
-
✅ Chrome/Edge：从版本 137 开始
-
✅ Chrome Android：从版本 139 开始
-
❌ Firefox：开发中
-
❌ Safari：在路线图上
-
❌ Opera：尚未支持
所以如果你现在就想用，记得写好 fallback：
.button {
/* 所有浏览器的回退 */
padding: 1rem 2rem;
background: #007bff;
/* 现代浏览器会自动覆盖 */
padding: if(style(--size: small): 0.5rem 1rem; style(--size: large): 1.5rem 3rem; else: 1rem 2rem);
background: if(style(--variant: primary): #007bff; style(--variant: success): #28a745; style(--variant: danger): #dc3545; else: #6c757d);
}
4. 技术在进步
写到这里，我想起自己刚学前端那会儿。
每次看到新技术出来，就觉得“完了，我又落后了”。
后来慢慢发现，技术是用来解决问题的，不是用来制造焦虑的。
CSS if() 函数确实很酷，但它解决的问题——条件判断、响应式布局、浏览器兼容——这些问题我们用现有的方法也能解决，只是可能麻烦一点。
新技术的意义，不是让你觉得“我必须马上学会”，而是让你知道“原来还可以这样做”。
所以，如果你现在项目里用不上 if() 函数，没关系。把它收藏起来，等哪天浏览器支持好了，或者你遇到了它能解决的问题，再拿出来用。
前端学习是个长跑，不是短跑。慢慢来，别着急。
我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。
欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。
- 主要言語
- 言語のデータがありません
- スター
- 31.1k
- フォーク
- 4.6k
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
mqyqingfeng/Blog のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
mqyqingfeng/Blog#437 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 42/100
mqyqingfeng/Blog#448 · コメント 1 件 ·
-
難易度 1/5 1時間未満 初心者へのやさしさ 15/100
mqyqingfeng/Blog#447 ·
-
我一直想搞套自动化创作工作流，结果……オープン
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
mqyqingfeng/Blog#446 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 45/100
mqyqingfeng/Blog#445 ·
mqyqingfeng/Blog の issue をすべて見る
似ている issue
-
vuln:LOW
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 1 日以内に返信
-
agent-butler-finding bug
難易度 1/5 1〜3時間 初心者へのやさしさ 84/100
jordansmall/spindrift#6557 ·
メンテナーはふだん 1 日以内に返信
-
Blog update untriaged
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
-
sync-en
難易度 1/5 1〜3時間 初心者へのやさしさ 84/100
メンテナーはふだん 1 日以内に返信
-
sync-en
難易度 1/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信