什么? 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年的时间。不过也是可以值得期待的。
如果这篇文章对你有帮助，欢迎点赞、关注➕、转发 ✔ ！
相关文章：
什么? CSS 将支持 if() 函数了？
CSS Working Group 简称 CSSWG, 在近期的会议中决定将 if() 添加到 CSS Values Module Level 5 中。 详情可见：css-meeting-bot 、[css-values] if() function 当我看到这个消息的时候，心中直呼这很逆天了，我们知道像 less 这些 css 这些预…...
function calling实现调用理杏仁api获取数据
LLM是不存在真正逻辑的且并不是知晓万事万物的（至少目前是这样）在很多更垂直的环境下LLM并不能很好的赋能。 function calling的实现使LLM可以对接真正的世界以及真正有逻辑的系统，这将很大程度上改变LLM的可用范围（当然安全问题依…...
Excel中用VBA实现Outlook发送当前工作簿
Excel中用VBA实现Outlook发送当前工作簿，首先按AltF11打开VBA编辑器，插入模块，并在工具-引用中勾选 Microseft Outlook .0 Object Library(其中为你Microseft Outlook的版本号。 Sub 发送邮件() 保存当前excel ThisWorkbook.Save让excel连接…...
从 ArcMap 迁移到 ArcGIS Pro
许多 ArcMap 用户正在因 ArcGIS Pro 所具有的现代 GIS 桌面工作流优势而向其迁移。 ArcGIS Pro 与其余 ArcGIS 平台紧密集成，使您可以更有效地共享和使用内容。 它还将 2D 和 3D 组合到一个应用程序中，使您可以在同一工程中使用多个地图和多个布局。 Arc…...
WSL2 的安装与运行 Linux 系统
前言 适用于 Linux 的 Windows 子系统 (WSL) 是 Windows 的一项功能，允许开发人员在 Windows 系统上直接安装并使用 Linux 发行版。不用进行任何修改，也无需承担传统虚拟机或双启动设置的开销。 可以将 WSL 看作也是一个虚拟机，但是它更为便…...
业务终端动态分配IP-DHCP技术、DHCP中继技术
一、为什么需要DHCP？ 1、许多设备（主机、无线WiFi终端等）需要动态地址的分配； 2、人工手工配置任务繁琐、容易出错，比如：IP地址冲突； 3、网络规模扩大、复杂度提高，网络配置越来越复杂，计算机的位置变化和数量超过可分配IP地址的数量，造成IP地址变法频繁以及IP地址…...
新一代大语言模型 GPT-5 对工作与生活的影响及应对策略
文章目录 📒一、引言 📒二、GPT-5 的发展背景 🚀（一）GPT-4 的表现与特点 🚀（二）GPT-5 的预期进步 📒三、GPT-5 对工作的影响 🚀（一…...
AI基于大模型语言存在的网络安全风险
目的： 随着大语言模型（LLM）各领域的广泛应用，我们迫切需要了解其中潜在的风险和威胁，及时进行有效的防御。 申明： AI技术的普及正当的使用大模型技术带来的便利，切勿使用与非法用途ÿ…...
探索Perl语言：入门学习与实战指南
文章目录 探索Perl语言：入门学习与实战指南一、Perl语言概述二、Perl的安装与配置安装PerlWindowsmacOSLinux 配置Perl 三、基本语法与数据类型标量变量数组哈希 四、控制结构条件语句循环语句 五、子程序与模块子程序模块 六、文件操作与正则表达式文件读取与写入正…...
dp or 数学问题
看一下数据量，只有一千，说明这个不是数学问题 #include<bits/stdc.h> using namespace std;#define int long long const int mo 100000007; int n, s, a, b; const int N 1005;// 2 -3 // 1 3 5 2 -1 // 1 -2 -5 -3 -1 int dp[N][N]; int fun…...
kibana连接elasticsearch(版本8.11.3)
前言 elasticsearch在8版本之后就出现了很大变化，由于kibana版本需要需elasticsearch进行版本对象，kibana连接方式也出现了很大变化。我在这里记录下自己的踩坑记录。 服务部署 本文中的服务都是在docker环境中部署的。其中elasticsearch版本和kibana版…...
基于python的图像去水印
1 代码 import cv2 import numpy as npdef remove_watermark(image_path, output_path):# 读取图片image cv2.imread(image_path)# 转换为灰度图gray cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)# 使用中值滤波去除噪声median_filtered cv2.medianBlur(gray, 5)# 计算图像的梯…...
Linux下Supervisor的安装与配置
软件工程中，守护进程是非常行之有效的方案。能够让我们的一些指令在崩溃之后可以自我重新启动，从而保障业务上的持续使用。 这里就从0开始教大家安装Supervisor。 一，下载安装 安装有好多种方法，直接下载安装包安装，或者yum安装或者pip安装都可以。这次我们选择的是pip…...
使用Pandas读取Excel文件将特定列转成str格式方法汇总
文章目录 读取Excel文件并确保列为字符串类型使用 dtype 参数使用 converters 参数 读取Excel文件的正确拼写示例：读取Excel文件并过滤包含特定值的行详细解释 读取Excel文件并确保列为字符串类型 正确的方法是使用 pd.read_excel 函数，并指定 dtype 或…...
FPGA CFGBVS 管脚接法
说明 新设计了1个KU040 FPGA板子，回来之后接上JTAG FPGA不识别。做如下检查： 1、电源测试点均正常； 2、查看贴片是否有漏焊，检查无异常，设计上NC的才NC； 3、反复检查JTAG接线是否异常，贴片是…...
快速排序及归并排序的实现与排序的稳定性
目录 快速排序 一. 快速排序递归的实现方法 1. 左右指针法 步骤思路 为什么要让end先走？ 2. 挖坑法 步骤思路 3. 前后指针法 步骤思路 二. 快速排序的时间和空间复杂度 1. 时间复杂度 2. 空间复杂度 三. 快速排序的优化方法 1. 三数取中优化 2. 小区…...
【系统架构设计】数据库系统（一）
数据库系统（一） 数据库模式与范式数据库的结构与模式数据模型关系代数数据的规范化反规范化 数据库设计事务管理备份与恢复分布式数据库系统数据仓库数据挖掘NoSQL大数据 数据库模式与范式 数据库的结构与模式 数据库技术中采用分级的方法将数据库的结…...
泛微e-cology WorkflowServiceXml SQL注入漏洞(POC)
漏洞描述： 泛微 e-cology 是泛微公司开发的协同管理应用平台。泛微 e-cology v10.64.1的/services/接口默认对内网暴露，用于服务调用，未经身份认证的攻击者可向 /services/WorkflowServiceXml 接口发送恶意的SOAP请求进行SQL注入，…...
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式
前言 本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。…...
OBD诊断（ISO15031） 09服务
文章目录 功能简介ISO 9141-2、ISO 14230-4和SAE J1850的诊断服务定义1、请求车辆信息请求消息（读取支持的INFOTYPE）2、请求车辆信息响应消息(报告支持INFOTYPE)3、请求车辆信息请求消息（读取INFOTYPE值）4、请求车辆信息响应消息&…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）
名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪） 原创笔记：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：《数据结构第4章 数组和广义表》…...