Angular项目是否需要手动添加-moz-、-webkit-等CSS前缀

核心结论 #

开发Angular项目时，不需要手动添加-moz-、-webkit-这类CSS浏览器厂商前缀，Angular在标准构建流程中会自动处理CSS的浏览器兼容适配。

编译阶段的CSS处理逻辑 #

Angular CLI默认将Autoprefixer集成在构建流水线中，编译CSS时会读取项目根目录下browserslist文件配置的目标浏览器范围，自动完成两个核心处理：

• 给需要兼容的CSS属性补全对应浏览器的厂商前缀
• 对部分较新的CSS语法做降级转换，匹配目标浏览器的支持能力

你在开发时只需要写标准W3C规范的CSS代码即可，举个实际例子：
开发时编写的源码：

.card {
  display: flex;
  transform: translateY(10px);
  user-select: none;
}

如果你的browserslist配置要求兼容旧版Chrome、Safari、火狐和IE11，编译后输出的CSS会自动处理为：

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

注意事项 #

• 上述自动处理能力仅在使用Angular CLI默认构建配置时生效，如果你自定义了底层构建工具配置、移除了Autoprefixer相关规则，需要自行处理CSS兼容问题。
• 最终CSS的兼容程度完全由browserslist的配置决定：如果配置的目标浏览器均为最新版本，大部分CSS属性本身不需要厂商前缀，构建产物里也不会生成冗余的前缀代码。
• 不建议手动在源码里写厂商前缀，既会增加代码维护成本，还可能导致构建后出现重复的CSS规则，引发异常样式问题。

内容的提问来源于stack exchange，提问作者YulePale