Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

我没想到 CSS if 函数这么强

Abierto
  • ¿Algo no está bien?
#409 0 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
25/100
Tipo de issue
Documentación
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
css
Área
documentation

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

如果 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 值。

CSS if函数基本用法

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 干货。

Lenguaje dominante
Sin datos de lenguaje
Estrellas
31.1k
Forks
4.6k
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de mqyqingfeng/Blog

Todos los issues de mqyqingfeng/Blog

Issues similares

Más issues de Documentation

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.