在现代 Web 开发中，前端技术被更广泛地应用，而 Ember.js 是其中一个流行的前端框架。在开发应用程序时，开发人员通常会在 CSS 中使用新特性和属性，但是在不同的浏览器中可能存在一些不兼容问题。这就是 autoprefixer 的用武之地。
autoprefixer 是一个 PostCSS 插件，能够将不兼容的 CSS 样式自动添加前缀。这使得开发人员可以专注于编写 CSS，而不用担心兼容性问题。在这篇文章中，我们将学习如何使用 ember-cli-autoprefixer 包，该包将 autoprefixer 集成到 Ember.js 项目中。
安装 ember-cli-autoprefixer
要安装 ember-cli-autoprefixer 包，请使用 npm 包管理器。在终端中，转到 Ember.js 项目目录并运行以下命令：
npm install --save-dev ember-cli-autoprefixer
配置 ember-cli-autoprefixer
在安装 ember-cli-autoprefixer 包后，在ember-cli-build.js中配置插件。在 export default(module.exports) 对象中添加以下内容：
-- -------------------- ---- ------- ----- -------- - -------------------------------------------- -------------- - ------------------ - --- --- - --- ------------------ - ------------- - --------- ------ - --------- - ------ --- ------ ------ ------------- -展开代码
在上述代码中，定义了一个名为 autoprefixer 的选项对象，并设置了浏览器的版本。你可以根据项目要求选择合适的浏览器版本。更多浏览器版本的支持列表可以在 caniuse.com 上找到。
在 CSS 中使用新属性
现在，我们已经成功配置了 ember-cli-autoprefixer 包，我们可以在项目的 CSS 中使用新属性。例如，如果您想要在项目中使用 transform 属性，请确保将它添加到 .css 文件中：
.example { transform: rotate(45deg); }
此时，你不需要手动添加浏览器前缀，autoprefixer 将会在编译时自动为你添加。
示例代码
下面是一个示例，使用 Rotate 属性来旋转 div 标签，你可以看到，不同的浏览器中 div 旋转的角度是统一的。
.example-div { width: 100px; height: 100px; background-color: gray; transform: rotate(45deg); }
示例代码的 HTML 和 CSS 属性将在各个浏览器中以相同的效果运行。在无前缀的情况下编写现代 CSS 代码是一件很酷的事情，而 Ember.js 内置的 ember-cli-autoprefixer 插件使它变得更加容易。
总结
在本文中，我们讨论了如何使用 ember-cli-autoprefixer 包自动添加 CSS 前缀。我们看到了如何安装它以及如何配置它，以适应您的个人项目需求。最后，我们用示例代码演示了如何使用 autoprefixer 提供的 transform 属性，在各个浏览器中以相同的旋转角度运行。
通过使用 ember-cli-autoprefixer 包，您现在可以更容易地编写现代 CSS 样式，并节省时间和精力，因为您不再需要手动添加浏览器前缀。如果你是一个 Ember.js 开发者，你必须掌握这个包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60307
