CSS也支持if了

是的,你没看错,CSS也支持if了!不过,这是一个上相对较新的功能,目前还没有得到广泛的支持。我当前使用的是chrome137版本,相信其它浏览器也会陆续支持。

什么是css if函数

CSS if函数是一种条件语句,它可以根据条件来选择不同的样式。可以更加灵活地编写响应式的CSS样式。

基本语法

css 复制代码
property: if(condition: value-if-true; else: value-if-false);

那要怎么用呢

其实最容易想到的的应用场景就是深浅色主题切换了,我们可以根据用户设置来选择不同的样式。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      width: 100px;
      height: 20px;
      background-color: if(style(--theme: dark): red; else: blue);
    }
  </style>
</head>
<body>
  <div style="--theme: dark"></div>
  <div style="--theme: light"></div>
</body>
</html>

效果如下:

当然你也可以在一个if函数写多个条件,语法如下

css 复制代码
property: if(
  condition1: value-if-true1; 
  condition2: value-if-true2; 
  else: value-if-false
);

我们可以这样用它

html 复制代码
<style>
  .button {
    color: white;
    padding: 10px 20px;
    display: inline-block;
    background: if(style(--btn-type:primary): #4299e1;
        style(--btn-type: success): #48bb78;
        style(--btn-type: danger): #f56565;
        style(--btn-type: warning): #ed8936;
        else: #2d3748);
  }
</style>

<div class="button" style="--btn-type: primary">Primary</div>
<div class="button" style="--btn-type: success">Success</div>
<div class="button" style="--btn-type: danger">Danger</div>
<div class="button" style="--btn-type: warning">Warning</div>

效果如下:


新特性,功能可能还不够完善,实际应用场景还需要大家去探索。单从上面的例子来看,貌似直接使用传统方式也没有什么问题。但是使用if函数,可以把逻辑集中,不至于分散在多个不行的class中,或者不同media query中

相关推荐
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐9 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台9 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121389 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css