【CSS @property】CSS自定义属性说明与demo

CSS @property

@property - CSS: Cascading Style Sheets | MDN
At 规则 - CSS:层叠样式表 | MDN
Custom properties (–*): CSS variables - CSS: Cascading Style Sheets | MDN
CSS Houdini - Developer guides | MDN

📚 什么是@property?

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

  • @property 规则提供了一个直接在样式表中注册自定义属性的方式,而无需运行任何 JS 代码。
  • 有效的 @property 规则会注册一个自定义属性,就像 【CSS.registerProperty🔗】 函数被使用同样的参数调用了一样。

在过去,我们使用CSS自定义变量(CSS Variables)来存储和复用值,但它们并不具备类型检查和默认值设定的功能。
而CSS @property则弥补了这一空白,使得自定义属性更加功能丰富和强大。

💎 语法

@property --property-name {syntax: "<color>";inherits: false;initial-value: #c0ffee;
}
  • --property-name : 自定义属性名称
  • syntax: 定义了自定义属性接受的值的类型。
    • CSS 基本数据类型 - CSS:层叠样式表 | MDN
    • 可能是(长度)、(数字)、(百分比)、(长度百分比)、(颜色)、(图像)、(URL地址)、(整数)、(角度)、
    • +(空格分隔)和 # 字号(逗号分隔)的乘法器表示期望的是一个值的列表,
      • 例如 <color># 意味着期望的语法是一个以逗号分隔的 <color>值列表
    • 竖线(|)可以为预期的语法创建"或"条件,
      • 例如 <length> | auto 接受 <length>或auto,而 <color># | <integer># 期望的是以逗号分隔的 <color>值列表 或以 逗号分隔的<integer>值列表
  • inherits: 指定该自定义属性是否可以被子元素继承,默认为 false。
  • initial-value:设置自定义属性的默认值。

@property 规则中 syntaxinherits 描述符是必需的;
如果其中任何一项缺失,整条规则都将失效并且会被忽略。
initial-value 描述符仅在 syntax 描述符为通用 syntax 定义时是可选的,否则initial-value也是必需的——如果此时该描述符缺失,整条规则都将失效且被忽略。

未知的描述符自身都是无效的,且会被忽略。但是不会造成整条@property规则的失效。

例子 1:

<div class="container"><div class="item one">Item one</div><div class="item two">Item two</div><div class="item three">Item three</div>
</div>
  • 定义两个自定义属性,--item-size--item-color,用它们来定义三个子元素 item 的宽度和高度以及背景颜色。
/* --item-size and --item-color */
@property --item-size {syntax: "<percentage>";inherits: true;initial-value: 40%;
}@property --item-color {syntax: "<color>";inherits: false;initial-value: aqua;
}
  • 自定义属性 --item-size:
    • 该属性接受的值的类型只是百分比 <percentage>;
    • 初始值设置为40%;
    • 属性是可继承的,这意味着,当用作项目大小的值时,它的大小将始终相对于其父级的大小。
  • 自定义属性 --item-color :
    • 该属性接受的值的类型 只是 <color>类型
    • 初始值是 关键字aqua
    • 属性不继承
.container {display: flex;height: 200px;border: 1px dashed black;/* 使用自定义属性 *//* 在父元素 设置了自定义属性的值 */--item-size: 20%;--item-color: orange;
}/* 使用自定义属性 设置 item的 宽高 和背景颜色 */
.item {width: var(--item-size);height: var(--item-size);background-color: var(--item-color);
}/* 设置自定义属性在元素自己身上的值 */
.two {--item-size: initial;--item-color: inherit;
}.three {/* 无效值 */--item-size: 1000px;--item-color: xyz;
}

截屏2023-12-19 23.24.18.png

🍀 分析:

  • 两个自定义属性 --item-size: 20%--item-color: orange; 设置在父级容器 container 上,覆盖了定义时设置的默认值: --item-size:40%--item-color:aqua 。其中--item-size 为可继承; --item-color 不可继承。

  • 对 class 为item的子元素,通过自定义属性设置了 宽高背景颜色

    • 这个时候,宽高的值是 相对于父容器的宽的20% 。因为,父容器重新设置 --item-size的值。
    • 截屏2023-12-19 23.52.54.png
  • 对于 one,没有设置这些自定义属性。

    • --item-size 是可继承的,因此使用其父容器上设置的值20% 。
    • --item-color 是不可继承的,因此不考虑父级上的 orange。而是使用默认的初始值 aqua。
  • 对于 two ,对两个自定义属性 --item-size--item-color 设置了 CSS全局关键字,这两个属性对于所有值类型都是有效值,因此无论语法描述符的值如何都是有效的。

    • --item-size:initial : 使用该属性的初始值。在 @property 声明中设置的初始值 initial-value40%
    • --item-color:inherit : 表示从其父元素(也就是container)继承 orange。即使自定义属性被设置为不被继承,也要显式地从其父级继承orange
    • 截屏2023-12-20 00.06.56.png
  • 对于 three, --item-size--item-color都是无效值。

    • --item-size 值为 1000px。虽然 1000px 是一个 <length> 值,但是@property 声明时要求该值是一个<percentage>类型。因此该声明无效并被忽略,这意味着使用了父级上可继承的 20%
    • --item-color 值为 xyz 也是无效的。
      • 首先,值 xyz不是 CSS 数据类型 [<color>🔗](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value)的关键字 <color-name>的有效值。所以会被忽略,所以直接显示的是 item定义的样式。
      • 其次,--item-color不能被继承,因此使用 aqua 的默认值,也不使用父级的值 orange
    • 截屏2023-12-20 00.23.23.png

例子 2:使用 CSS @property 实现背景色渐变动画

@property --colorA {syntax: "<color>";inherits: false;initial-value: red;
}@property --colorB {syntax: "<color>";inherits: false;initial-value: yellow;
}@property --colorC {syntax: "<color>";inherits: false;initial-value: blue;
}.box {width: 300px;height: 300px;background: linear-gradient(45deg,var(--colorA),var(--colorB), var(--colorC));animation: animate 3s linear infinite alternate;
}@keyframes animate {20% {--colorA: blue;--colorB: #F57F17;--colorC: red;}40% {--colorA: #FF1744;--colorB: #5E35B1;--colorC: yellow;}60% {--colorA: #E53935;--colorB: #1E88E5;--colorC: #4CAF50;}80% {--colorA: #76FF03;--colorB: teal;--colorC: indigo;}
}
<div class="box"></div>

例子3: 使用自定义属性完成图片切换

    <div class="section"><div class="box bg mask1"></div><div class="box bg mask2"></div></div>
$img1: 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/191/191-bigskin-6.jpg';
$img2: 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/191/191-bigskin-8.jpg';
$mask1: linear-gradient(45deg, #000 0, #000 var(--per), transparent calc(var(--per) + 10%), transparent);
$mask2: conic-gradient(#000 0, #000 var(--per), transparent calc(var(--per) + 10%), transparent);
@property --per {syntax: '<percentage>';inherits: false;initial-value: -10%;
}
.section {width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;
}
.section div {margin: 20px;
}
.section {.box {width: 600px;height: 300px;}.bg {background: url($img1);background-repeat: no-repeat;background-position: 50%;background-size: cover;position: relative;&::after {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: url($img2);background-size: cover;background-position: 50%;animation: animate 2s ease-in-out infinite alternate;}}.mask1 {&::after {mask: $mask1;}}.mask2 {&::after {mask: $mask2;}}
}@keyframes animate {0% {--per: -10%;}100% {--per: 100%;}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年度佳作:AIGC、AGI、GhatGPT 与人工智能大模型的创新与前景展望

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 写在前面参与规则 ✅参与方式&#xff1a;关注博主、点赞、收藏、评论&#xff0c;任意评论&#xff08;每人最多评论…

TCP 核心工作机制

TCP 的核心知识&#xff1a;如何保证传输可靠 如何提高传输效率 如何保证传输可靠&#xff1a;确认应答机制 超时重传机制 如何提高传输效率&#xff1a;滑动窗口机制、流量控制机制、延时应答机制、捎带确认机制、拥塞控制机制 可靠机制 TCP的可靠性主要是通过 确认应答 …

【轻量化篇】YOLOv8改进实战 | 更换主干网络 Backbone 之 RepGhostnet,重参数化实现硬件高效的Ghost模块

YOLOv8专栏导航:点击此处跳转 前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法: 网络剪枝:移除神经网络中冗余的连接和参数,以达到模型压缩和加速的目的。分组卷积:将卷积操作分解为若干个较小的卷积操…

[学习笔记]SQL Server中批量查找所有符合Where条件的记录

目标&#xff1a;在SQL Server中查找所有表的UserId 50的记录 创建一个表变量来存储所有包含’UserId’列的表的名称。然后使用一个游标遍历这些表&#xff0c;并对每个表执行一个动态SQL查询 DECLARE TableName nvarchar(256), ColumnName nvarchar(128), SearchStr2 nvarc…

CentOS 宣布停更3年后,服务器操作系统何去何从?

“CentOS 要停止更新了&#xff1f;” 盯着电脑&#xff0c;某大型企业数字化部门的负责人彭素素看到这个消息&#xff0c;不仅在心里发出了一声惊呼。 2020年&#xff0c;CentOS 停止更新的消息&#xff0c;不仅彭素素所在的企业&#xff0c;对于不少正在使用 CentOS 的厂商…

Python多个列表连接实例代码解析

概要 在Python中&#xff0c;连接多个列表是一种常见的操作&#xff0c;用于将多个列表合并为一个。这个过程可以应用于各种数据处理和编程任务中。本文将介绍多种连接多个列表的方法&#xff0c;并提供详细的示例代码来帮助大家更好地理解。 使用 运算符 最简单的方法是使用…

【RTOS学习】源码分析(信号量和互斥量 事件组 任务通知)

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f353;信号量和互斥量&#x1f345;创建&#x1f345;Take&#x1f345;Give &#x…

IDEA版SSM入门到实战(Maven+MyBatis+Spring+SpringMVC) -SpringMVC搭建框架

第一章 初识SpringMVC 1.1 SpringMVC概述 SpringMVC是Spring子框架 SpringMVC是Spring 为**【展现层|表示层|表述层|控制层】**提供的基于 MVC 设计理念的优秀的 Web 框架&#xff0c;是目前最主流的MVC 框架。 SpringMVC是非侵入式&#xff1a;可以使用注解让普通java对象&…

JS模块化规范之CMD

JS模块化规范之CMD 模块化规范CMD&#xff08;Common Module Definition&#xff09;概念基本语法CMD实现 模块化规范 CMD&#xff08;Common Module Definition&#xff09; 概念 CommonJS module definition CMD规范专门用于浏览器端&#xff0c;模块的加载时异步的&#x…

应用 Strangler 模式将遗留系统分解为微服务

许多来源在一般情况下提供了微服务的解释&#xff0c;但缺乏特定领域的示例。新来者或不确定从哪里开始的人可能会发现掌握如何将遗留系统过渡到微服务架构具有挑战性。本指南主要面向那些正在努力启动迁移工作的个人&#xff0c;它提供了特定于业务的示例来帮助理解该过程。 …

磁盘类型选择对阿里云RDS MySQL的性能影响

测试说明 这是一个云数据库性能测试系列&#xff0c;旨在通过简单标准的性能测试&#xff0c;帮助开发者、企业了解云数据库的性能&#xff0c;以选择适合的规格与类型。这个系列还包括&#xff1a; * 云数据库(RDS MySQL)性能深度测评与对比 * 阿里云RDS标准版(x86) vs 经济…

C++ 模拟实现string

目录 一.类的声明 二.确定成员变量 三.成员函数 1.带参的构造函数&#xff0c;析构函数&#xff0c;拷贝构造 2.size()与capacity() 3.运算符重载 重载数组下标访问[] 重载 重载比较运算符&#xff08;<&#xff0c; < &#xff0c; > &#xff0c; > …

改变传媒格局的新趋势

在如今信息高速发展的时代&#xff0c;人们早已进入了一个以手机为中心的智能化时代。随着科技的迅猛发展&#xff0c;手机无人直播成为了一种新兴的传媒形态&#xff0c;正逐渐改变着传媒格局。本文将从手机无人直播的定义、发展背景和影响等方面进行探讨。 首先&#xff0c;…

数字孪生开发技术分析

数字孪生的开发涉及多个技术领域&#xff0c;包括计算机科学、数据科学、人工智能和工程等。以下是数字孪生开发中常用的一些关键技术&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.建模和仿真&am…

《论文阅读28》Unsupervised 3D Shape Completion through GAN Inversion

GAN&#xff0c;全称GenerativeAdversarialNetworks&#xff0c;中文叫生成式对抗网络。顾名思义GAN分为两个模块&#xff0c;生成网络以及判别网络&#xff0c;其中 生成网络负责根据随机向量产生图片、语音等内容&#xff0c;产生的内容是数据集中没有见过的&#xff0c;也可…

hive 用户自定义函数udf,udaf,udtf

udf&#xff1a;一对一的关系 udtf&#xff1a;一对多的关系 udaf&#xff1a;多对一的关系 使用Java实现步骤 自定义编写UDF函数注意&#xff1a; 1.需要继承org.apache.hadoop.hive.ql.exec.UDF 2.需要实现evaluete函数 编写UDTF函数注意&#xff1a; 1.需要继承org.apache…

Vue前端设计模式

文章目录 一、什么是设计模式&#xff1f;二、设计几个原则三、常见的设计模式及实际案例3.1、单例模式3.1.1、Element UI3.1.2、Vuex 3.2、工厂模式3.2.1、VNode3.2.2、vue-route 3.3、策略模式3.3.1、表格 formatter3.3.2、表单验证 3.4、代理模式3.4.1、拦截器3.4.2、前端框…

【分享】如何给Excel加密?码住这三种方法!

想要给Excel文件进行加密&#xff0c;方法有很多&#xff0c;今天分享三种Excel加密方法给大家。 打开密码 设置了打开密码的excel文件&#xff0c;打开文件就会提示输入密码才能打开excel文件&#xff0c;只有输入了正确的密码才能打开并且编辑文件&#xff0c;如果密码错误…

Elasticsearch常见面试题

文章目录 1.简单介绍下ES&#xff1f;2.简单介绍当前可以下载的ES稳定版本&#xff1f;3.安装ES前需要安装哪种软件&#xff1f;4.请介绍启动ES服务的步骤&#xff1f;5.ES中的倒排索引是什么&#xff1f;6. ES是如何实现master选举的&#xff1f;7. 如何解决ES集群的脑裂问题8…

高速视频采集卡设计方案:620-基于PCIe的高速视频采集卡

一、产品概述 基于PCIe的高速视频采集卡&#xff0c;通过PCIe3.0X8传输到存储计算服务器&#xff0c;实现信号的分析、存储。 北京太速科技 产品固化FPGA逻辑&#xff0c;适配视频连续采集&#xff0c;缓存容量2GB&#xff0c;开源的PCIe QT客户端软件&#xff0c…