自定义CSS属性,为什么不呢？

Question

我曾希望CSS3会带来可以读取的自定义CSS属性,并影响元素行为.像jQuery UI这样的JavaScript库通过JavaScript API传递样式选项,就像ASP.NET控件一样.例如,它应该打扰那些有AOP的认真开发人员.为什么拥有CSS自定义属性不被认为是有用的,例如"-ui-resizable-handles:e se;" 或以任何形式.AOP就是CSS的全部,不是吗？

Answer 1

您可以借用一个任意字符串作为其值的现有属性.想到的是font-family,counter-reset和counter-increment,或animation-name.使用counter-reset你可以做以下事情:

CSS

* {counter-reset: inherit;} /* by default, counter-reset does NOT inherit */

HTML

<div style="counter-reset: my-value; "> <!-- want to set value here -->
  <p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>

JS

var p_styles = window.getComputedValue(document.getElementById("para"),null);
var p_reset_value = p_styles.counterReset;
var p_myvalue = p_reset_value.split(" ")[0]; /* computed value will be 'my-value 0' */

这里唯一可能的兼容性问题是,即使您在代码中实际使用计数器,也是CSS规则的不良副作用.另请注意,该值必须符合"标识符"的CSS定义.如果给出带空格的值,它将被解释为两个不同的计数器,如果用引号括起来,CSS值将被视为无效.

使用-webkit-locale

如果你真的很勇敢,你也可以使用-webkit-locale.由于它继承并获取单个字符串值,因此它不需要上面的大部分内容,包括CSS规则和JS来拆分计算值,并消除了值为CSS"identifer"的限制:

HTML

<div style="-webkit-locale: 'bar foo'; "> <!-- want to set value here -->
  <p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>

JS

var style = window.getComputedValue(document.getElementById("para"),null);
var prop = style.webkitLocale; // "bar foo"

希望在不久的将来我们将拥有CSS级联变量,这种hackery将不再是必要的.