javascript - -CSS 中的无前缀脚本和前缀

Question

我将 reshape 一个网站并将使用 -prefix-free脚本来消除 CSS 中的前缀。不过，有些 CSS 我不会编辑。此 CSS 确实包含一些前缀。如果我在 CSS 中保留这些前缀，-prefix-free 仍然可以正常工作，或者是否有理由我应该检查 CSS 文件并消除所有前缀？

换句话说:CSS 中的前缀与 -prefix-free 脚本结合使用会破坏或导致奇怪的功能吗？

Answer 1

-prefix-free 将保留样式表中已添加前缀的所有属性。事实上，如果您至少为其指定一个单独的前缀，它不会为同一属性或规则添加其他前缀。

例如，如果您有

-webkit-border-radius: 10px;

那么 -prefix-free 将不会添加 -moz-border-radius对于 4.0 之前的 Firefox 版本，也不会添加无前缀的 border-radius对于任何浏览器。 WebKit 浏览器将照常应用边框半径，因为它们理解 -webkit-border-radius .

如果您希望 -prefix-free 为其他浏览器添加前缀，则需要将其更改为

border-radius: 10px;

因此，这取决于您希望它应用所有必要的前缀的属性。如果您希望 -prefix-free 在任何需要的地方应用前缀，您需要检查样式表并删除已经存在的任何前缀。

当然，请记住，您可能希望为某些属性保留硬编码的前缀，例如 WebKit 特定的伪元素 -webkit-appearance和-webkit-text-size-adjust 。同样，这取决于属性(property)；您可能需要根据您的布局需求进行研究和决定。

该脚本的主页包含 test drive您可以使用它来预览带前缀和不带前缀的属性的结果。请记住，结果是根据您用于运行测试的浏览器定制的，因此如果您添加 border-radius并在 Firefox 4 或更高版本中运行它，您将不会看到任何变化。但是，如果您放置 -webkit-border-radius相反，无论您使用什么浏览器，您仍然会看到 -prefix-free 在预览 Pane 中保持不变，甚至无需添加 unprefixed 属性。