如何自动将浏览器前缀添加到 CSS3 属性？

Posted 2023-02-22

【中文标题】如何自动将浏览器前缀添加到 CSS3 属性？

【英文标题】：How to automatically add browser prefix to CSS3 properties?

【发布时间】：2012-12-18 15:04:57

【问题描述】：

你可能知道，因为 CSS3 并不兼容所有的浏览器，当我们使用 CSS3 时，我们应该为 CSS3 属性添加前缀（如 -moz、-webkit、-o 和 ...）

很难手动编写这些前缀。那么，是否有任何插件、程序或其他东西可以检测我的 CSS 文件中的 CSS3 属性并将必要的供应商前缀附加到这些属性？

【问题讨论】：

指南针 + SASS 将成为您的朋友。 compass-style.org

sublime text结合zen编码会自动添加前缀

可能重复：***.com/questions/10017560/…

我个人最喜欢的是 Web Essentials 2012 和 R#。

@RobertMcKee 什么是 Web Essentials 2012 和 R#？

【参考方案1】：

根据您的用例，可以想到几个选项：

带有Bourbon的SASS 带有Compass的SASS

少用LESS elements

Emmet CSS3 Abbreviations（在您的文本编辑器中）

PrefixFree（客户端js）

我个人的偏好是使用 Compass，但如果您不希望使用 CSS 预处理器的开销，Emmet 缩写会很好用。

【参考方案2】：

这里有更多

Sublimetext 插件https://github.com/sindresorhus/sublime-autoprefixer?source=c

【讨论】：

Autoprefixer 有一个lot of tools。文本编辑器插件是其中最糟糕的一个，我（作为 autoprefixer 的作者）不推荐它，因为带有前缀的 CSS 难以阅读和编辑。

【参考方案3】：

一个不错的供应商前缀 mixin，用于在 SASS here 中为使用 SASS 的用户提供此功能