javascript - 可以依赖 CSSStyleDeclaration.setProperty() 来验证 CSS 属性吗？

Question

以下似乎在主要浏览器上是一致的:

const stylesheet = document.createElement('style');
document.head.appendChild(stylesheet);

const sheet = document.styleSheets[0];
sheet.addRule('.temp', '{}', 0);
const style = sheet.cssRules[0].style;

console.log(style.color); // ""
style.setProperty("color", "*****");
console.log(style.color); // ""
style.setProperty("color", "red")
console.log(style.color); // "red"

但我想知道:可以 style.setProperty("color", "*****")依赖于不设置属性，或者这只是目前主要浏览器上巧合的一致功能。

Answer 1

如果“依赖”是指它在标准中指定而不是它是。
相关标准是 CSSOM 和 setProperty它说

6. Let component value list be the result of parsing value for property property.
7. If component value list is null terminate these steps.

和 parsing of the value它说

1. Let list be the value returned by invoking parse a list of componentvalues from value.
2. Match list against the grammar for the property property in the CSS specification.
3. If the above step failed, return null.
4. Return list.

因此，如果“*****”不在允许的颜色值列表中，则将返回 null
然后为 getting style.color ， 它说

The camel-cased attribute attribute, on getting, must return the result of invoking getPropertyValue() with the argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute.

然后为 getPropertyValue()它说

3. If property is a case-sensitive match for a property name of a CSS declaration in the declarations, return the result of invoking serialize a CSS value of that declaration and terminate these steps.

最后，空值被序列化为空字符串。