自定义CSS属性使用一个前导短划线还是两个？ [英] Do custom CSS properties use one leading dash or two?

问题描述

  #elem {
 -myCustom：99; 
} 
  

或

  #elem {
 --myCustom：99; 
} 
  

我在网上看到了上面的例子。两者之间有什么区别？

尝试在JavaScript中访问自定义属性返回null ..

  #elem {
 -myCustom：99; 
} 
 
< div id =elem>一些文字< / div> 
 
 elem = document.getElementById（elem）; 
 style = window.getComputedStyle（elem）; 
 value = style.getPropertyValue（' -  myCustom'）; 
 alert（value）; 
  

解决方案

• 用于供应商前缀


• 双引号用于定义自定义属性。

2定义自定义属性：' - *'系列属性

自定义属性是名称以两个破折号
（U + 002D HYPHEN-MINUS）开头的任何属性，如 - foo 。 < custom-property-name>
生产对应于此：它定义为以两个破折号开始的任何有效标识符
。

来自W3C的示例：

 ：root {
 --main-color：＃06c; 
 --accent-color：＃006; 
} 
 / * CSS文件的其余部分* / 
 #foo h1 {
 color：var（ -  main-color）; 
} 
  

值得注意的是，CSS变量是在Firefox 31和更新版本中实现的。 p>

#elem {
  -myCustom: 99;
}

OR

#elem {
  --myCustom: 99;
}

I have seen both of the above used in examples online. What the difference between the two?

Trying to access custom properties in JavaScript returns null..

#elem {
-myCustom: 99;
}

<div id="elem">some text</div>

elem = document.getElementById("elem");
style= window.getComputedStyle(elem);
value = style.getPropertyValue('-myCustom');
alert(value);

解决方案

• single leading dash is used for vendor prefixes
• double leading dash is used for defining custom properties.

2 Defining Custom Properties: the '--*' family of properties

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes.

An example from W3C:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

It's worth noting that CSS variables are implemented in Firefox 31 and newer.

这篇关于自定义CSS属性使用一个前导短划线还是两个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！