CSS @property（CSS 自定义属性）

news2025/1/16 9:02:34

CSS @property（CSS 自定义属性）

  • 参考
  • 描述
  • @property
      • Houdini
      • @property
      • 兼容性
  • 描述符
      • 规则
          • syntax
            • 扩展
          • initial-value
          • inherits
          • 示例
      • 描述符的注意事项
      • 使用 JavaScript 来创建自定义属性
  • CSS 变量与自定义属性
      • 重复赋值
      • 过渡
          • 简单的背景过渡动画
          • 更复杂的背景过渡动画
            • 错误示范（一）
            • 错误示范（二）
            • 正确使用
            • CSS 变量

参考

项目描述
MDN官方文档
搜索引擎Bing
稀土掘金田八

描述

项目描述
Edge109.0.1518.61 (正式版本) (64 位)

@property

Houdini

Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。
Houdini 是一组 API，它们使开发人员可以直接访问CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现。

@property

@property CSS Houdini API 的一部分，它允许开发者显式地定义他们的 CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

兼容性

@property 是一个正在实验的功能，部分浏览器完全不知持该属性，请注意。

目前，各浏览器对 @property 的支持可见下表。
浏览器兼容性

描述符

规则

一个有效的 @property 规则代表一项自定义属性的注册。@property 的规则大致如下：

@property 自定义变量的名称{
	syntax: '语法结构';
	initial-value: '初始值';
	inherits: '是否允许该属性被继承';
}

注：

自定义变量的名称需要以 -- 开头。

syntax

syntax 在 @property 规则中是必须的，它描述了该属性所允许的语法结构。

可用的语法结构有（仅部分）：

项目描述
<length>允许使用任何有效的 长度 。
<number>允许使用任何有效的 数值 。
<color>允许使用任何有效的 颜色 。
<image>允许使用任何有效的 图片 。
<url>允许使用任何有效的 链接 。
<integer>允许使用任何有效的 整数值 。
<angle>允许使用任何有效的 角度值 。
<time>允许使用任何有效的 时间值 。
扩展

你可以通过向提供给 syntax 描述符的值中添加一些符号来使得自定义变量能够接收多个值或同时接受多个语法结构。

项目描述
#使自定义变量能够接受以逗号分隔的多个值。
+使自定义变量能够接受以空格分隔的多个值。
|使自定义变量能够接受多个语法结构。

示例：

/* 允许自定义变量接受以逗号分隔的颜色值列表。*/
syntax: '<color#>'; 

/* 允许自定义变量接受以空格分隔的长度值列表。 */
syntax: '<length+>';

/* 允许自定义变量接受单个颜色值或者以空格分隔的长度值。 */
syntax: '<length | length+>';
initial-value

initial-value 描述符用于指定自定义属性的默认值。
initial-value 依照 syntax 描述符定义，必须可以正确地解析。因此，如果 syntax 描述符为 <color>，那么初始值必须是一个有效的 颜色值 。

inherits

inherits 描述符用于指定该自定义属性是否可以被其他元素所继承，你可以通过布尔值 true 或 false 为该描述符赋值。

示例

下面我们来定义规则以注册一个自定义属性：

@property --color{
	syntax: '<color>';
	initial-value: #f40;
	inherits: false;
}

效果：

该 @property 规则定义了一个名为 –color 的自定义属性，你必须使用 颜色值 为该自定义变量赋值，该自定义变量的默认值为 #f40 ，该自定义变量不可以被其他元素所继承。

描述符的注意事项

  1. 在 @property 规则中 syntax 和 inherits 描述符是必需的。如果其中任何一项缺失，整条规则都将失效并且会被忽略。
  2. initial-value 描述符仅在 syntax 描述符为通用 syntax 定义时是可选的，否则 initial-value 也是必需的，如果此时该描述符缺失，整条规则都将失效且被忽略。
  3. 未知的描述符自身都是无效的，且会被忽略。但是不会造成整条 @property 规则的失效。
  4. 在需要使用自定义变量的地方，你需要通过 CSS 的内置函数 var() 来对该变量的值进行获取。

使用 JavaScript 来创建自定义属性

你可以通过 JavaScript 来创建 CSS 的自定义属性，两者的使用方法十分相似。

window.CSS.registerProperty({
  name: '--color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#f40',
});

CSS 变量与自定义属性

在 CSS 中，与自定义属性最为相似的应该是 CSS 变量了。接下来，我们将探索 CSS 变量与自定义属性的区别以及适合使用自定义属性的部分场景。

重复赋值

使用 CSS 变量时：

  1. 如果你在 CSS 中的另一个选择器（不指向本元素）创建该变量的同名变量，则该变量并不会覆盖先前的同名变量，这两个变量将同时存在，他们并不相同。选择器在通过多个变量共同的变量名获取对应的值时，将遵循就近原则，使用离本元素距离更近的那个变量。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 变量与自定义属性</title>
    <link rel="stylesheet" href="./index.css">
    <style>
        *{
            /* 去除 HTML 带有的部分默认属性 */
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body{
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #131323;
        }

        /* 父级元素（淘宝红） */
        #parent{
            --color: #f40;
        }

        /* 祖父级元素（淡蓝色） */
        #grandparent{
            --color: aqua;
        }

        /* 本元素 */
        #card{
            height: 30vw;
            width: calc(30vw / 1.618);
            background-color: var(--color);
            border-radius: 0.5vw;
            transition: all 1s;
        }
    </style>
</head>
<body>

    <div id="grandparent">
        <div id="parent">
            <div id="card"></div>
        </div>
    </div>

</body>
</html>

效果：

最终，#card 元素使用了距离更近的父级元素提供的 --color 变量中的值。

效果

  1. 使用自定义属性时，如果你重复对该属性进行赋值（不论在哪一个选择器中对自定义属性重新进行赋值），改变的将是同一个属性。在自定义属性发生改变后，所有使用该属性的元素将发生相应的变化。

过渡

简单的背景过渡动画

CSS 中支持简单的背景色的过渡动画，就像这样：

  1. HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 变量与自定义属性</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="card"></div>
</body>
</html>
  1. CSS 部分
*{
    /* 去除 HTML 带有的部分默认属性 */
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #131323;
}

#card{
    height: 30vw;
    width: calc(30vw / 1.618);
    background-color: aqua;
    border-radius: 0.5vw;
    /* 使当前元素的 background 属性具有时长 1s 的过渡效果 */
    transition: background 1s;
}

/* 在鼠标悬浮于当前元素之上时，过渡改变当前元素的背景颜色 */
#card:hover{
    background-color: pink;
}

效果：

效果

更复杂的背景过渡动画

CSS 不支持具有渐变色彩的背景的过渡动画，如果我们将前一个示例（简单的背景过滤动画）中的 CSS 部分中的 #card 及 #card:hover 选择器修改为如下内容：

#card{
    height: 30vw;
    width: calc(30vw / 1.618);
    background: aqua;
    border-radius: 0.5vw;
    /* 使当前元素的 background 属性具有时长 1s 的过渡效果 */
    transition: background 1s;
}

/* 在鼠标悬浮于当前元素之上时，过渡改变当前元素的背景颜色 */
#card:hover{
    /* 设置渐变背景颜色 */
    background: linear-gradient(45deg, rgb(229, 91, 91), rgb(232, 69, 177), rgb(171, 86, 229));
}

效果：

效果

可以看到并没有产生过渡效果。

错误示范（一）

此时，我们可以使用 @property 来绕过该限制。

/* 定义自定义属性 --color */
@property --color{
    syntax: '<color>';
    initial-value: aqua;
    inherits: false;
}

#card{
    height: 30vw;
    width: calc(30vw / 1.618);
    background: var(--color);
    border-radius: 0.5vw;
    /* 使当前元素的 background 属性具有时长 1s 的过渡效果 */
    transition: --color 1s;
}

/* 在鼠标悬浮于当前元素之上时，过渡改变当前元素的背景颜色 */
#card:hover{
    /* 设置渐变背景颜色 */
    --color: linear-gradient(45deg, rgb(229, 91, 91), rgb(232, 69, 177), rgb(171, 86, 229));
}

注：

上述代码并不能实现预期效果（鼠标悬浮于 #card 元素之上后，#card 元素的背景颜色无任何改变），该代码仅做示范使用。

分析：

上述代码没有生效的原因在于，我们并没有为 --color 自定义属性提供正确的值，--color 需要的是颜色值，而 linear-gradient(45deg, rgb(229, 91, 91), rgb(232, 69, 177), rgb(171, 86, 229)) 给出的值不一般（猜测），因此没有生效。

错误示范（二）

既然 --color 无法直接接受 linear-gradient() 函数返回的值，那我们就渗透到 linear-gradient() 函数中来达到相同的效果。

/* 定义自定义属性 */
@property --color-red{
    syntax: '<color>';
    initial-value: rgb(229, 91, 91);
    inherits: false;
}
@property --color-pink{
    syntax: '<color>';
    initial-value: rgb(232, 69, 177);
    inherits: false;
}
@property --color-purple{
    syntax: '<color>';
    initial-value: rgb(171, 86, 229);
    inherits: false;
}

#card{
    height: 30vw;
    width: calc(30vw / 1.618);
    background: linear-gradient(45deg, aqua 100%, #fff);
    border-radius: 0.5vw;
    /* 使当前元素的 background 属性具有时长 1s 的过渡效果 */
    transition: background 1s;
}

/* 在鼠标悬浮于当前元素之上时，过渡改变当前元素的背景颜色 */
#card:hover{
    /* 设置渐变背景颜色 */
    background: linear-gradient(45deg, var(--color-red), var(--color-pink), var(--color-purple));
}

效果：

该示例也没有实现过渡效果，在鼠标悬停在 #card 元素中时，背景颜色将直接发生变化。

分析：

在 #card:hover 选择器以及 transition 属性中我们使用的都是 background，似乎并没有指定需要过渡的属性是自定义属性。在该示例中，自定义属性似乎只起到了传递值的功能。

正确使用

在仔细分析前面两次失败的经验，我将给出如下的正确方案：

/* 定义自定义属性 */
@property --color-red{
    syntax: '<color>';
    initial-value: aqua;
    inherits: false;
}
@property --color-pink{
    syntax: '<color>';
    initial-value: aqua;
    inherits: false;
}
@property --color-purple{
    syntax: '<color>';
    initial-value: aqua;
    inherits: false;
}

#card{
    height: 30vw;
    width: calc(30vw / 1.618);
    /* 使用自定义属性定义背景颜色 */
    background: linear-gradient(45deg, var(--color-red), var(--color-pink), var(--color-purple));
    border-radius: 0.5vw;
    /* 为多个自定义属性定义过渡效果 */
    transition: --color-red 2s, --color-pink 2s, --color-purple 2s;
}

/* 在鼠标悬浮于当前元素之上时，以过渡的方式改变自定义属性的属性值 */
#card:hover{
    --color-red: rgb(229, 91, 91);
    --color-pink: rgb(232, 69, 177);
    --color-purple: rgb(171, 86, 229);
}

效果：

为了便于观察过渡的效果，我在该示例中将过渡时间改为了 2s。

效果

CSS 变量

由于 transition 仅支持属性的过渡变化，所以 CSS 变量并不能实现该效果。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【ARM体系结构】之数据类型约定与工作模式

【ARM体系结构】之数据类型约定与工作模式

1、RISC和CISC的区别 1.1 RISC : 精简指令集 使用精简指令集的架构&#xff1a;ARM架构 RISC-V架构 PowerPC架构 MIPS架构ARM架构 &#xff1a;目前使用最广泛的架构&#xff0c;ARM面向的低端消费类市场RISC-V架构 &#xff1a;第五代&#xff0c;精简指令集的架构&#xff…
阅读更多...
这样定义通用人工智能

这样定义通用人工智能

🍿*★,*:.☆欢迎您/$:*.★* 🍿 正文 人类解决问题的途径,大体可以分为两种。一种是事实推理，另一种是事实验证。 为什么只是两种分类，因为根据和环境的交互与否。 事实推理解释为当遇到事件发生的时候，思考的过程。可以使用概率模型，或者更复杂的模型（目前没…
阅读更多...
Out of Vocabulary处理方法

Out of Vocabulary处理方法

Out of Vocabulary 我们在NLP任务中一般都会有一个词表&#xff0c;这个词表一般可以使用一些大牛论文中的词表或者一些大公司的词表&#xff0c;或者是从自己的数据集中提取的词。但是无论当后续的训练还是预测&#xff0c;总有可能会出现并不包含在词表中的词&#xff0c;这…
阅读更多...
（教程）如何在BERT模型中添加自己的词汇（pytorch版）

（教程）如何在BERT模型中添加自己的词汇（pytorch版）

来源&#xff1a;投稿 作者&#xff1a;皮皮雷 编辑&#xff1a;学姐 参考文章&#xff1a; NLP | How to add a domain-specific vocabulary (new tokens) to a subword tokenizer already trained like BERT WordPiece | by Pierre Guillou | Medium https://medium.com/pi…
阅读更多...
ROS2机器人编程简述humble-第三章-BUMP AND GO IN C++ .3

ROS2机器人编程简述humble-第三章-BUMP AND GO IN C++ .3

简述本章项目&#xff0c;参考如下&#xff1a;ROS2机器人编程简述humble-第三章-PERCEPTION AND ACTUATION MODELS .1流程图绘制&#xff0c;参考如下&#xff1a;ROS2机器人编程简述humble-第三章-COMPUTATION GRAPH .2然后&#xff0c;在3.3和3.4分别用C和Python编程实现&am…
阅读更多...
Bus Hound 工具抓取串口数据（PC端抓取USB转串口数据）

Bus Hound 工具抓取串口数据（PC端抓取USB转串口数据）

测试环境&#xff1a; PC端 USB转串口 链接终端板卡串口 目标&#xff1a;抓取通信过程中的通信数据 工具介绍&#xff1a;Bus Hound是是由美国perisoft公司研制的一款超级软件总线协议分析器&#xff0c;它是一种专用于PC机各种总线数据包监视和控制的开发工具软件&#xff0c…
阅读更多...
通信原理简明教程 | 数字调制传输

通信原理简明教程 | 数字调制传输

文章目录1 二进制数字调制和解调1.1 二进制数字调制的基本原理1.2 二进制数字调制信号的特性1.3 解调方法2 二进制差分相移键控2.1 2PSK的倒π现象2.2 2DPSK调制和解调3 二进制调制系统的抗噪性能3.1 2ASK系统的抗噪声性能3.2 2FSK系统的抗噪声性能4 二进制数字调制系统性能比较…
阅读更多...
服务器配置定时脚本 crontab + Python；centos6或centos 7或centos8 实现定时执行 python 脚本

服务器配置定时脚本 crontab + Python；centos6或centos 7或centos8 实现定时执行 python 脚本

一、crontab的安装 默认情况下，CentOS 7中已经安装有crontab，如果没有安装，可以通过yum进行安装。 yum install crontabs 二、crontab的定时语法说明 corntab中，一行代码就是一个定时任务，其语法结构可以通过这个图来理解。 字符含义如下： * 代表取值范围内的数字 /…
阅读更多...
Linux内核驱动初探(三) 以太网卡

Linux内核驱动初探(三) 以太网卡

目录 0. 前言 1. menuconfig 2. 设备树 0. 前言 这次的网卡驱动就比较顺利&#xff0c;基本就是参考 4.19.x 内核以及 imx6qdl-sabrelite.dtsi、imx6qdl-sabreauto.dtsi 中的设备树&#xff0c;来设置以太网各项参数。 1. menuconfig 其实笔者接手的时候&#xff0c;网口这…
阅读更多...
本质安全设备标准（IEC60079-11）的理解（三）

本质安全设备标准（IEC60079-11）的理解（三）

本质安全设备标准&#xff08;IEC60079-11&#xff09;的理解&#xff08;三&#xff09; 对于标准中“fault”的理解 第一&#xff0c;标准中对fault的定义是这样的&#xff1a; 3.7.2 fault any defect of any component, separation, insulation or connection between c…
阅读更多...
C++空间命名

C++空间命名

前言 提示&#xff1a;由于C是在C语言基础之上&#xff0c;增加了很多新的东西。 本文讲解命名空间的具体使用方法 文章目录 目录 前言 一、命名空间 二、命名空间定义 1.嵌套性 2.和并性 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一…
阅读更多...
【华为上机真题】区间交集

【华为上机真题】区间交集

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…
阅读更多...
CleanMyMac X真的有必要买吗?CleanMyMac2023最新版下载

CleanMyMac X真的有必要买吗?CleanMyMac2023最新版下载

CleanMyMac X是一款集所有功能于一身的先进程序卸载清理器&#xff0c;只需两个简单步骤就可以把系统里那些乱七八糟的无用文件统统清理掉&#xff0c;节省宝贵的磁盘空间。CleanMyMac为您喜爱的东西腾出空间。它不仅有着赏心悦目的UI交互页面&#xff0c;更有着强大的“超能力…
阅读更多...
HTB-BountyHunter

HTB-BountyHunter

HTB-BountyHunter信息收集开机提权信息收集 80端口的网页如下。 注意有一个db.php&#xff0c;虽然现在打不开&#xff0c;估计后面会用上。 还有resources里面的readme文件。 完成了tracker提交编写和developer组权限。没有完成portal的test用户禁用、选择哈希加密的密码以…
阅读更多...
Webshell（网页后门）

Webshell（网页后门）

数据来源 本文仅用于信息安全的学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若观众因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与本人无关。 一、Webshell简介 01 什么是 Webshell webshell是以 asp、php、jsp或者cgi等网页文…
阅读更多...
【数据结构与算法】第十九篇：回溯，剪枝，N皇后问题

【数据结构与算法】第十九篇：回溯，剪枝，N皇后问题

知识导航一、回溯思想概述二、八皇后问题引入八皇后问题的解决思路(1)思路一&#xff1a;暴力出奇迹(2&#xff09;思路二&#xff1a;根据题意减小暴力程度(3&#xff09;思路三&#xff1a;回溯法剪枝三、四皇后问题八皇后问题四、N皇后的实现1.实现方法一&#xff1a;利用数…
阅读更多...
程序员的自我修养第七章——动态链接 (上)

程序员的自我修养第七章——动态链接 (上)

继续更新《程序员的自我修养》这个系列&#xff0c;主要是夏天没把它看完&#xff0c;补上遗憾。本篇来自书中第七章。 再说动态链接前&#xff0c;我们先阐明为什么要动态链接&#xff1a; 动态链接的产生来自静态链接的局限性。随着静态链接的发展&#xff0c;其限制也越来越…
阅读更多...
十二、创建和管理表

十二、创建和管理表

文章目录一、基础知识1.1 一条数据存储的过程1.2 标识符命名规则1.3 数据类型及数据库操作二、创建表三、查看表结构3.1 使用 SHOW COLUMNS 语句查看3.2 使用 DESCRIBE 语句查看3.3 查看表详细结构语句 SHOW CREATE TABLE四、修改表结构4.1 添加新字段和修改字段定义4.2 修改字…
阅读更多...
用户画像增量更新系列二

用户画像增量更新系列二

进行用户日志数据处理 原始日志数据 结果: 思路&#xff1a;按照user_id的行为一条条处理&#xff0c;根据用户的行为类型判别。 由于sqlDF每条数据可能会返回多条结果&#xff0c;我们可以使用rdd.flatMap函数或者yield 格式&#xff1a;["user_id", "action…
阅读更多...
总结：计算机中字符串比较大小的规则

总结：计算机中字符串比较大小的规则

总结&#xff1a;计算机中字符串比较大小的规则一背景&#xff1a;二Unicode编码表&#xff1a;字符越靠后&#xff0c;对应的十进制值越大三单个字符之间比较规则&#xff1a;四案例演示&#xff1a;单个字符与单个字符之间比较大小1.前提&#xff1a;汉字“一”与汉字“万”&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023