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规则的不良副作用。另请注意，该值必须符合"identifier"的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将不再是必要的。

Answer 2

也许不是你的意思，但确实可以节省大量时间，并提供更大的灵活性！

http://lesscss.org/

LESS通过动态行为扩展CSS 例如变量，mixins，操作和功能。 LESS同时运行客户端（IE 6 +，Webkit，Firefox）和服务器端，与Node.js。

Answer 3

是的，好主意，但我认为有更多自然的方式来创建增强的CSS样式表：在服务器端，使用PHP生成CSS（ASP，JSP等，无论你使用什么），只是在HTML的情况下。所以，这取决于你，你从什么样的来源产生什么CSS。

所有网页都使用动态生成的HTML页面（在AJAX之前，它是构建应用程序的唯一方法），但是静态CSS样式。为什么呢？

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

3 个答案: