没有 webkit 和 moz 前缀的 CSS3答案

【问题标题】：CSS3 without webkit and moz prefix没有 webkit 和 moz 前缀的 CSS3
【发布时间】：2012-12-31 16:45:44
【问题描述】：

是否有插件或类似的东西可以让我像这样编写 CSS：

transition:all 300ms; 
box-shadow:0 3px 2px #222; 
backface-visibility:hidden;

等等。

对于需要-webkit-、-moz-、-ms-、-o- 等的浏览器版本，在加载样式表时会自动添加到需要的位置。

【问题讨论】：

好吧，关于插件的IDK，但你的手不能再输入几个字符？
@AspiringAqib 这是关于保持 css DRY 的。供应商前缀对此不利，因为您必须为每个需要的语句重复 5 次。当您使用关键帧时，情况会更糟，因为您必须重复整个块。使用前缀，样式表最终会比所需的大 5 倍。

【解决方案1】：

是的，-prefix-free 允许您在任何地方只使用无前缀的 CSS 属性。它在幕后工作，仅在需要时将当前浏览器的前缀添加到任何 CSS 代码中。 Project's website

特点

限制

如何使用

只需在页面的任何位置包含 prefixfree.js。建议放在样式表之后，尽量减少 FOUC

就是这样，大功告成！

浏览器支持

目标浏览器支持IE9+、Opera 10+、Firefox 3.5+、Safari 4+和桌面版 Chrome 和 Mobile Safari、Android 浏览器、移动版 Chrome 和 Opera Mobile。

前缀mycss

此外，还有一项在线服务，可让您粘贴不带前缀的 css 代码并返回带有所有供应商前缀的 css。 http://prefixmycss.com/

CSS3请

css3please.com：一个跨浏览器的 css3 规则生成器，由 Jonathan Neal 和 Paul Irish 制作。除了同步和规范化必要属性的更改外，它还通过 IE 过滤器潜入 IE 对一些功能的支持。

SASS 和指南针

另一种方法是将 CSS 预处理器 SASS 与 COMPASS 混合使用。

Sass 是 CSS3 的扩展，它添加了嵌套规则、变量、mixin、选择器继承等。 Sass 生成格式良好的 CSS 并使您的样式表更易于组织和维护。

Compass 允许扩展 Sass，它充满了可重用的模式，它允许基于最佳实践以简单和标准的方式使用 sprite、CSS3 和排版。

最后，我建议您阅读 Paul Irish 的一篇文章，他是 Google 最优秀的前端开发人员之一：http://paulirish.com/2012/vendor-prefixes-are-not-developer-friendly/

【讨论】：