什么? CSS 将支持 if() 函数了?

CSS Working Group 简称 CSSWG, 在近期的会议中决定将 if() 添加到 CSS Values Module Level 5 中。

详情可见:css-meeting-bot 、[css-values] if() function

当我看到这个消息的时候,心中直呼这很逆天了,我们知道像 less 这些 css 这些预处理器也是支持 if() 函数的, 例如 less中的 if 函数,但是他们都是 静态编译 的,在打包 build 的时候,就会把这个 if() 函数移除掉,替换成编译时确定的样式,这意味着我们无法动态地去调整样式。

所以,如果 css 原生支持 if() 函数的话,我们就可以利用 if() 函数在运行时的动态性,省去大量的 js 逻辑处理了, 使得我们在处理样式交互上方便很多。

因此,我想说的是,这个函数一旦落地实现在浏览器的那天,我相信那一天一定是一个历史性的时刻。

闲言少叙,下面让我们看看这个 if() 函数怎么用吧。

基本使用

虽然现在还没有发布,没有环境可以让我们真实体验效果,但是我们可以从官方的css-conditional-values文档中管中窥豹, 了解一些常用的语法。

由于是草案,最终的标准可能会对此做一些调整

  • 基础语法

if()函数允许用户根据特定条件将css的属性值(或其部分)设置为不同的值。

  • condition 指的是条件判断
  • consequent 当条件 condition 为 true 的时候应用的 css 值
  • <<antecedent>>? 可选值,不传为空,当条件 condition 为 false 的时候应用的 css 值

看起来就和js的三元表达式一样

if() 函数还支持构建 css 属性值的部分属性

同时if() 函数也支持嵌套定义

这里使用 = 进行变量比较

但是这种嵌套使得阅读起来不方面,if() 函数同时还支持扁平化的写法

这样写就清晰很多了,满足哪个分支就返回对应的属性值

应用场景

if() 函数我相信会让主题切换更加方便快捷

比如一个设置背景颜色随主题变化进行动态调整的代码就可以写成这样:

小结

虽然 if() 函数距离正式落地还有很长的路要走,按照以往的惯例,这一个过程顺利的话也要1-2年的时间。不过也是可以值得期待的。

如果这篇文章对你有帮助,欢迎点赞、关注➕、转发 ✔ !

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/797866.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

给 「大模型初学者」 的 LLaMA 3 核心技术剖析

编者按&#xff1a; 本文旨在带领读者深入了解 LLaMA 3 的核心技术 —— 使用 RMSNorm 进行预归一化、SwiGLU 激活函数、旋转编码&#xff08;RoPE&#xff09;和字节对编码&#xff08;BPE&#xff09;算法。RMSNorm 技术让模型能够识别文本中的重点&#xff0c;SwiGLU 激活函…

传输层重点协议

目录 一、TCP协议 TCP协议段落格式 原理 1、确认应答机制 2、超时重传机制 3、连接管理机制 三次握手 四次挥手 &#xff08;1&#xff09;不能合并为三次挥手的原因 &#xff08;2&#xff09;延时应答机制—实现合并 &#xff08;3&#xff09;TIME_WAIT的作用 &…

代码随想录——不同路径Ⅱ(Leetcode 63)

题目链接 动态规划 class Solution {public int uniquePathsWithObstacles(int[][] obstacleGrid) {int m obstacleGrid.length;int n obstacleGrid[0].length;int[][] dp new int[m][n];// 遇到障碍则从(0,0)到达for(int i 0; i < m && obstacleGrid[i][0] …

基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件

基于Vue和UCharts的前端组件化开发&#xff1a;实现高效、可维护的词云图与进度条组件 摘要 随着前端技术的迅速发展和业务场景的日益复杂&#xff0c;传统的整块应用开发方式已无法满足现代开发的需求。组件化开发作为一种有效的解决方案&#xff0c;能够将系统拆分为独立、…

浏览器出现 502 Bad Gateway的原理分析以及解决方法

目录 前言1. 问题所示2. 原理分析3. 解决方法 前言 此类问题主要作为疑难杂症 1. 问题所示 2. 原理分析 502 Bad Gateway 错误表示服务器作为网关或代理时&#xff0c;从上游服务器收到了无效的响应 通常出现在充当代理或网关的网络服务器上&#xff0c;例如 Nginx、Apache…

Go 语言返回组装数据

文章id 文章标题 ..... 分类 字段 &#xff1a;[分类名&#xff0c;分类描述 .... ]标签字段 : [标签名, 标签id ..... ]type ArticleWithCategoryLabel struct {system.SysArticleCategoryName system.SysCategorie json:"category_name"LabelName system.SysLab…

2024年7月13日全国青少年信息素养大赛Python复赛小学高年级组真题

第一题 题目描述 握情况。他决定让每个人输入一个正整数 N (0≤N≤1000)&#xff0c;然后计算并输出(5*N)的值。请用 在一个神秘的王国里&#xff0c;国王希望通过一个简单的测试来评估他的子民对基 础数学运算的掌 Python 编写程序&#xff0c;程序执行后要求用户输入一个正…

50、haproxy+keepalive+nginx

keepalivehaproxy 客户端&#xff1a;192.168.168.21haproxy1&#xff1a;192.168.168.43haproxy2&#xff1a;192.168.168.44vip&#xff1a;192.168.168.100nginx1:192.168.168.31nginx2:192.168.168.32haproxykeepalive做高可用nginx做后台haproxy1haproxy2一起操作&#x…

121. 小红的区间翻转(卡码网周赛第二十五期(23年B站笔试真题))

题目链接 121. 小红的区间翻转&#xff08;卡码网周赛第二十五期&#xff08;23年B站笔试真题&#xff09;&#xff09; 题目描述 小红拿到了两个长度为 n 的数组 a 和 b&#xff0c;她仅可以执行一次以下翻转操作&#xff1a;选择a数组中的一个区间[i, j]&#xff0c;&#x…

监控房价和挂牌数量的工具-以成都房价为例

介绍 本文将介绍如何通过zervice提供的工具来监控成都房价&#xff08;其他城市或者地区类似&#xff09;&#xff0c;包括价格和挂牌数量。可以对购房一族提供数据参考。 数据来源 数据来源方面&#xff0c;本文以成都为例&#xff0c;我们会使用链家数据-> 选择地图找房…

《Linux系统编程篇》Visual Studio Code配置下载,中文配置,连接远程ssh ——基础篇

引言 vscode绝对值得推荐&#xff0c;非常好用&#xff0c;如果你能体会其中的奥妙的话。 工欲善其事&#xff0c;必先利其器 ——孔子 文章目录 引言下载VS Code配置VS Code中文扩展连接服务器 连接服务器测试确定服务器的IP地址VS code 配置ssh信息选择连接到主机选择这个添…

【JVM实战篇】内存调优:内存泄露危害+内存监控工具介绍+内存泄露原因介绍

文章目录 内存调优内存溢出和内存泄漏内存泄露带来什么问题内存泄露案例演示内存泄漏的常见场景场景一场景二 解决内存溢出的方法常用内存监控工具Top命令优缺点 VisualVM软件、插件优缺点监控本地Java进程监控服务器的Java进程&#xff08;生产环境不推荐使用&#xff09; Art…

微信小程序毕业设计-青少年科普教学系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

ubuntu服务器安装labelimg报错记录

文章目录 报错提示查看报错原因安装报错 报错提示 按照步骤安装完labelimg后&#xff0c;在终端输入labelImg后&#xff0c;报错&#xff1a; (labelimg) rootinteractive59753:~# labelImg ………………Got keys from plugin meta data ("xcb") QFactoryLoader::Q…

ArrayList模拟实现

ArrayList模拟实现 ArrayList 的初步介绍常见操作 ArrayList 的简单模拟实现 ArrayList 的初步介绍 ArrayList也叫做顺序表&#xff0c;底层是一个数组。 在创建顺序表 时就应该规定 里面元素的数据类型&#xff0c;其中不能直接传基本数据类型&#xff0c;例如int、char。需要…

VS编译和使用modbus库

一.libmodbus 库 免费的开源的&#xff0c;modbus 开发库&#xff0c;支持 RTU 和 TCP 官网&#xff1a;libmodbus.org 在线文档&#xff1a;https://libmodbus.org/reference/ 二.源码简介 项目说明doc 目录各 API 接口的详细说明文档src 目录源码都在这个目录下tests 目录…

06 人以群分 基于邻域的协同过滤算法

这一讲我们将正式进入算法内容的学习。 推荐算法本质 推荐算法本质上是一一种信息处理方法&#xff0c;它将用户信息和物品信息处理后&#xff0c;最终输出了推荐结果。因为 05 讲中基于热门推荐、基于内容推荐、基于关联规则推荐等方法比较粗放&#xff0c;所以推荐结果往往…

C语言 | Leetcode C语言题解之第231题2的幂

题目&#xff1a; 题解&#xff1a; const int BIG 1 << 30;bool isPowerOfTwo(int n) {return n > 0 && BIG % n 0; }

Study--Oracle-07-ASM自动存储管理(二)

一、ASM安装准备条件 1、ASM支持存储类型 本地祼设备&#xff08;本地的磁盘和分区&#xff09; 网络附加存储(NAS) 存储区域网络(SAN) 2、ASM使用本地裸设备&#xff0c;要点: 已经被挂载到操作系统上或者已经做了分区 映射裸设备为文件名 设置正确的权限&#xff08;针对g…

C++继承和多态

目录 继承 继承的意义 访问限定符、继承方式 赋值兼容规则&#xff08;切片&#xff09; 子类的默认成员函数 多继承 继承is a和组合has a 多态 什么是多态 形成多态的条件 函数重载&#xff0c;隐藏&#xff0c;重写的区别 override和final 多态原理 继承 继承的…