08.CSS if() 函数

@大迁世界2025-12-17 14:07

CSS if() 函数允许基于条件（如媒体查询、自定义属性或特性支持）设置不同的属性值，为CSS带来了真正的条件逻辑。

本章概述

CSS if() 函数是CSS中最具革命性的特性之一，它为CSS引入了真正的条件逻辑。通过if()函数，我们可以在单个属性声明中根据不同条件设置不同的值，无需编写多个CSS规则块，大大简化了响应式设计和主题切换的实现。

学习目标

理解CSS if()函数的基本概念和语法
掌握不同类型的条件判断方法
学会在实际项目中应用if()函数
了解if()函数与其他CSS特性的结合使用
掌握浏览器兼容性和渐进增强策略

CSS if()函数基础

基本语法

CSS if()函数的基本语法结构：

go 复制代码

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

简单示例

go 复制代码

.card {
  --status: attr(data-status type(<custom-ident>));

  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    else: gray
  );
}

支持的条件类型

1. 样式查询 - style()

检查CSS自定义属性（CSS变量）的值：

go 复制代码

.card {
  --theme: light;
  --size: medium;
  
  /* 基于主题的背景色 */
  background: if(
    style(--theme: dark): #1a1a1a;
    style(--theme: light): #ffffff;
    else: #f5f5f5
  );
  
  /* 基于尺寸的内边距 */
  padding: if(
    style(--size: large): 2rem;
    style(--size: medium): 1.5rem;
    style(--size: small): 1rem;
    else: 1rem
  );