css中@property属性介绍

更新日期: 2022-05-07阅读量: 217标签: 属性

css的@property是CSS Houdini api的一部分,它允许开发人员显式定义 CSS 自定义属性,允许属性类型检查,设置默认值,并定义属性是否可以继承值。该规则直接在样式表中表示自定义属性的注册,无需运行任何 JS。有效的规则会生成一个已注册的自定义属性,就好像使用等效的 parameters.@property 调用了CSS.registerProperty 一样

Houdini 是一组底层 api,它公开了 CSS 引擎的部分内容,使开发人员能够通过钩入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 可以让开发者直接访问 CSS 对象模型(CSSOM) ,使开发者能够编写浏览器可以解析为 CSS 的代码,从而创建新的 CSS 特性,而无需等待这些特性在浏览器中实现。

@property兼容性如下:



@property语法

正常而言,我们定义和使用一个 CSS 自定义属性的方法是这样的:

:root {
--whiteColor: #fff;
}
p {
color: (--whiteColor);
}

而有了 @property 规则之后,我们还可以像下述代码这样去定义个 CSS 自定义属性:

@property --propery-name {
syntax: '<color>';
inherits: false;
initial-value: #fff;
}
p {
color: var(--property-name);
}

简单解读下:

@property --property-name 中的 --property-name 就是自定义属性的名称,定义后可在 CSS 中通过 var(--property-name) 进行引用

  • syntax:类型string。定义自定义属性的类型。例如,number,color,percentage等
  • inherits:类型boolean。定义自定义属性是否允许继承
  • initial-value:类型符合syntax定义的类型,定义初始值
  • syntax 和 inherits 描述符是必需的,其中任何一项缺失, 整条规则都将失效并且会被忽略
  • initial-value 描述符仅在syntax描述符为通用syntax定义时是可选的,否则也是必需的

@property 规则需要语法(syntax)和继承描述符(inheritsdescriptor); 如果缺少其中一个,则整个规则无效,必须忽略。只有在语法是通用语法定义的情况下,初始值描述符才是可选的,否则就需要描述符; 如果缺少初始值描述符,则整个规则无效,必须忽略它。


syntax可用有效字段

syntax 支持的语法类型非常丰富,基本涵盖了所有你能想到的类型。

length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident (a custom identifier string)


syntax声明复合属性值

syntax支持复合属性值,例如,font-family: Arial, Verdana, Geneva, sans-serif 和 border:1px solid #ccc,属性值是逗号或者空格分隔的值列表。

针对这种场景,syntax提供了语法声明符号+、#、|

syntax: '<color#>' :接受逗号分隔的颜色值列表
syntax: '<length+>' :接受以空格分隔的长度值列表
syntax: '<length | length+>':接受单个长度或者以空格分隔的长度值列表

符号(+),用于声明接受以空格分隔的值列表 例如:"<length>+"

@property --padding{
    syntax: '<lenth>+';
    inherits: false;
}

.box{
    --padding:0 10px;
    padding: var(--padding);
}

符号(#),用于声明接受以逗号分隔的值列表 例如:"<url>#"

@property --img-url{
    syntax: '<url>#';
    inherits: false;
}

.box{
    --img-url:url(img01.png),url(img02.png);
    background-image: var(--img-url);
}

符号(|),用于声明不同类型的值 例如:"<length> | <length>+ | auto"

@property --padding{
    syntax: '<length> | <lenth>+ | auto';
    inherits: false;
}

.box{
    --padding:10px auto;
    padding: var(--padding);
}


@property的JS语法

CSS.registerProperty方法用于注册css自定义属性。registerProperty用法跟@property大致相同,同样包括name、syntax、inherits和initialValue,只是把注册自定义属性,转移到JS上下文中执行。

JS中注册自定义属性

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

CSS中使用自定义属性

.box{
    background-color:var(--primary-color);
    color:white;
}


@property例子

如果你经常使用 css 的 transition 属性,试着回想一下,是不是遇到过这种情况:在给某个属性添加 transition 时,却没有生效。看下面这段 css 代码:

.el {
  background: linear-gradient(white, black);
  /* this transition won't work */
  transition: 1s;
}
.el:hover {
  background: linear-gradient(red, black);
}

你可能认为这个渐变中的白色会随着过渡渐变为红色,但事实并非如此,这种过渡是不可能的。如果我们过去需要使用一些小技巧实现它,比如用新的渐变颜色在伪元素中褪色,或者用比元素渐变更宽的背景位置来伪造它。

但是现在我们可以这样做了:

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}
.el {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}
.el:hover {
  --gradient-start: red;
}

因为我们告诉 CSS 这个自定义属性是一个 <color>  ,所以它可以被处理或者动画化。之前的颜色值是无法被动画化的。


@property属性支持transition动画

@property声明的自定义属性支持transition动画。不要小看这个小小的转变,就仿佛给我们开了一扇通向css动画世界的大门。只要你的想象力足够强大,就可以创造出很多令人惊奇的css动画。

以往,用CSS变量定义背景渐变,背景无渐变动画效果

:root{
    --start-color1:red;
    --end-color1:black;
}

.child{
    background-image:linear-gradient(
    to bottom,
    var(--start-color1),
    var(--end-color1)
  );
}

.child:hover{
    --start-color1:green;
}

现在,用@property定义背景渐变,背景有动画渐变效果

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

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

.child{
  background-image:linear-gradient(
    to bottom,
    var(--start-color),
    var(--end-color)
 );
}

.child:hover{
    --start-color: blue;
}

链接: https://www.fly63.com/article/detial/11459

属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;

css盒子_用Margin还是用Padding?

用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。

readonly与disabled的区别

readonly 只对 <input> 和 <textarea> 标签有效;disabled 对所有表单元素都有效, 包括:<input>, <textarea>, <button>, <label>, <option>, <select>等

css的overflow属性

事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差别,今天测试了一下,总算是明白了。visible: 不剪切内容。hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。

Vue Prop属性功能与用法实例

这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值

深入剖析z-index属性

层叠顺序的大小比较;层叠顺序级别高的元素覆盖级别低的元素。首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

css属性分类介绍

CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性

css中word-wrap white-space word-break textoverflow的使用

word-wrap正常来说,在一行文本中,如果出现这一行已经放不下的单词,浏览器会自动将该文字转入下一行。white-space规定段落中的文本不进行换行。

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!