08.CSS if() 函数

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

本章概述

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

学习目标

• 理解CSS if()函数的基本概念和语法

• 掌握不同类型的条件判断方法

• 学会在实际项目中应用if()函数

• 了解if()函数与其他CSS特性的结合使用

• 掌握浏览器兼容性和渐进增强策略

CSS if()函数基础

基本语法

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

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

简单示例

.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变量）的值：

.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 );