自定义CSS属性，为什么不？ [英] Custom CSS properties, why not?

问题描述

我曾希望CSS3会带来可以读取到JavaScript的自定义CSS属性，并影响元素的行为。 JavaScript库像jQuery UI通过JavaScript API传递样式选项，就像ASP.NET控件一样。它应该打扰那些有AOP的严肃的开发人员。为什么认为CSS自定义属性-ui-resizable-handles：e se;或以任何格式。 AOP是什么CSS是关于，是不是？

解决方案

你可以借用一个现有的属性，值。值得注意的是 font-family ， counter-reset 和 / code>或 animation-name 。使用 counter-reset 可以执行以下操作：

CSS

  * {counter-reset：inherit;} / *默认情况下，counter-reset不会继承* / 
  

HTML

 < div style =counter-reset：my -value;> <！ - 想在这里设置值 - > 
< p id =para>部分文字。< / p> <！ - 并且在此检索级联的结果 - > 
< / 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]; / *计算值将为'my-value 0'* / 
  

在不太可能发生的情况下，你实际上在代码中使用计数器，是CSS规则的不必要的副作用。此外，请注意，该值必须符合标识符的CSS定义。如果你给一个值带空格，它将被解释为两个不同的计数器，如果你将它包含在引号中，CSS值将被认为是无效的。

-webkit-locale

如果你真的勇敢，你还可以使用 -webkit-locale 。因为它继承并接受单个字符串值，所以它不需要上面的大部分，包括CSS规则和JS来拆分计算值，并且消除了该值是CSSidentifer的限制： p>

HTML

 < div style = -  webkit-locale： bar foo';> <！ - 想在这里设置值 - > 
< p id =para>部分文字。< / p> <！ - 并且在此检索级联的结果 - > 
< / div> 
  

JS

  var style = window.getComputedValue（document.getElementById（para），null）; 
 var prop = style.webkitLocale; //bar foo
  

希望在不久的将来我们将有CSS级联变量，这个hackery不再需要。

I had hoped CSS3 would bring about custom CSS properties that could be readable to JavaScript, and affect elements behavior. JavaScript libraries like jQuery UI pass styling options through JavaScript API, just like ASP.NET controls e.g. It should bother serious developers who have AOP in mind. Why is it not considered useful to have CSS custom properties e.g. "-ui-resizable-handles:e se;" or in whatever format. AOP is what CSS is all about, is it not?

解决方案

You can borrow an existing property that takes an arbitrary string for its value. Ones that come to mind are font-family, counter-reset and counter-increment, or animation-name. Using counter-reset you can do things like:

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' */

The only possible compatibility issue here, in the unlikely event that you are actually using counters in your code, is the unwanted side-effects of the CSS rule. Also, notice that the value must fit the CSS definition of an "identifier". If you give a value with spaces it will be interpreted as two different counters, and if you enclose it in quotes the CSS value will be considered invalid.

Using -webkit-locale

If you're real brave, you could also use -webkit-locale. Since it inherits and takes a single string value, it eliminates the need for much of the above, including the CSS rule and the JS to split apart the computed value, and eliminates the restriction that the value be a 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"

Hopefully in the near future we will have CSS cascading variables and this hackery will no longer be necessary.

这篇关于自定义CSS属性，为什么不？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！