Question

我在考虑使用Javascript自动将border-radius，transform，box-shadow等CSS3属性转换为特定于浏览器的对象。

我做了一些研究，发现你可以迭代通过document.styleSheets定义的样式表。您可以通过document.styleSheets[0].cssRules[0].cssText找到CSS规则。

我希望通过使用适当的供应商前缀（例如-webkit-border-radius，moz-border-radius等）注入特定于浏览器的属性来修改包含CSS3属性的CSS规则。

但是，似乎在每个浏览器中预处理cssText属性，以过滤掉它不理解的CSS属性。这实际上打破了这个想法。

问题：有没有办法完全按照样式表中的定义检索CSS文本？或者：有没有其他方法可以通过Javascript实现这一目标？我想维护干净的CSS文件，而不需要为每个特定的浏览器多次定义每个属性。

Answer 1

为什么不直接创建每个浏览器都有独特的Pre-CSS3对应的样式表？如您所述，每个浏览器都会过滤掉他们无法识别的属性。如果您为同一个css选择器同时定义-webkit-border-radius和moz-border-radius以及border-radius，则无关紧要。如果浏览器识别出其中一个，它将被使用，如果没有，它将被丢弃。即使浏览器识别出多个版本，它们也很可能具有相同的值，因此无关紧要。

Answer 2

看起来你已经对此进行了很好的研究。通过访问CSSStyleDeclaration或CSSRuleList对象是不可能的，因为未识别的属性被过滤掉，这是大多数主要浏览器中的实现错误，因为它们应列出所有属性 - 即使是他们不知道的属性不明白。有关详情，请参阅related question。

正如@Sarfaraz已经提到的那样，其余的替代方案需要做太多工作。这一切都归结为手工解析所有内容并重新完成浏览器已经为我们所做的工作。假设您的样式声明是内联的，无论是在<style>标签中，还是作为元素的样式属性，那么您必须解析文本并构建所有有趣的CSS3属性的映射。使用内联属性，它基本上解析文本有点类似于：

`prop1: value; prop2: value2; ..`

请参阅@Nick Craver对类似question的回答，他已将此方法与正则表达式相关联。

使用内联标记，要解析的文本将采用以下格式：

[selector] {
    prop1: value1;
    prop2: value2;
    ...
}

...

这是一种过于简单化，忽略了所有语法生成规则，这里有很多问题要处理。

如果样式表是外部的，并在页面内引用，那么您必须查找属性<link>等于rel的{{1}}元素，并获取它们的{{ 1}}属性。另外，解析导入的样式表的URL。一旦你有了这些url，你可以进行AJAX调用来获取这些样式表的实际内容，假设没有任何东西阻止服务器端的调用。从每个文件获得文本后，它基本上是与上述相同的解析步骤，并根据浏览器使用"stylesheet"或href添加必要的规则。

可能有开源CSS解析器可以为您提供帮助。

这可能是一个很长的路要走，我认为@ jrista的解决方案非常好。如果您不想编写特定于供应商的代码的所有排列，那么更简单和更好的方法是拥有一个CSS生成层，它是某些构建过程的一部分，它会生成所有排列并吐出CSS文件。

此层还可以通过检查insertRule标头并仅生成所需的样式来包含优化，这实际上是GWT所做的（但它预先生成所有可能的排列，而不是在运行时执行）。

这可能是一项严肃的任务，因此在一天结束时，您必须评估您的选择，看看实现代码纯度的努力是否超过了一点冗余的好处。

Answer 3

不是IE7.js（和IE8.js and IE9.js）已经做了什么？也许你应该看看Dean Edwards采用的方法来增加对最小高度，不透明度，许多CSS3选择器的支持，位置：固定;和溢出：可见;我们都讨厌这些旧的浏览器。

编辑：顺便说一句，我更喜欢jrista解决方案：在需要时使用-moz和-webkit以及-ms和-o作为CSS3属性的前缀。
这是一个令人讨厌的任务，我们将要做大约5年但是它比W3C改变了对某些属性（CSS3模块远离推荐）的想法要少得多。然后，您的脚本仍会识别旧语法，并将其提供给浏览器，告知-vendor-property: oldsyntax_from_2010;和property: newsyntax_from_2015;之间的差异。如果找到-moz-border-radius: 4px; border-radius: 20px;，你会怎么做;哪一个是好的？

EDIT2：http://css3generator.com/是一个方便的工具，如果你不想让你的大脑充满-webkit-border-bottom-right-radius和-moz-border-radius-bottomright之间的语法差异等细节：）

如何通过样式表中定义的Javascript读出CSS文本？

3 个答案: