是否存在CSS工具/语法可简化-moz/-webkit等浏览器前缀兼容代码？

当然有办法在兼顾向后兼容性的同时减少重复代码，以下是几个实用的技巧：

1. 使用自动前缀工具（Autoprefixer） #

这是最省心的方案，完全不用手动编写浏览器前缀。你只需要写标准的CSS代码，工具会根据你配置的目标浏览器范围，自动生成对应的前缀版本。比如你写好标准的animation和@keyframes，Autoprefixer会自动补上-webkit-、-moz-等前缀，完美适配旧浏览器。

用这个工具后，你只需要维护最简洁的标准代码，前缀相关的重复工作全交给工具处理。

2. 用CSS变量统一可复用参数 #

你已经用到了CSS变量，可以进一步把动画里的所有可配置参数都抽成变量，比如动画时长、重复次数、位移距离、样式属性等。这样不仅修改起来更方便，也能减少代码里的重复数值：

:root {
  --shake-bg: #2bd993;
  --shake-text-color: #fff;
  --shake-font-size: 24px;
  --shake-padding: 20px;
  --shake-margin-top: 30px;
  --shake-duration: 150ms;
  --shake-count: 2;
  --shake-distance: 3px;
}

.shake {
  background-color: var(--shake-bg);
  color: var(--shake-text-color);
  font-size: var(--shake-font-size);
  margin: var(--shake-margin-top) 0 0;
  padding: var(--shake-padding);
  text-transform: uppercase;
}

.shake:hover {
  animation: shake var(--shake-duration) var(--shake-count) linear;
}

@keyframes shake {
  0% { transform: translate(var(--shake-distance), 0); }
  50% { transform: translate(calc(-1 * var(--shake-distance)), 0); }
  100% { transform: translate(0, 0); }
}

3. 根据实际需求精简前缀范围 #

现在很多旧浏览器（比如旧版Opera的-o-、IE的-ms-）市场份额已经极低，如果你的项目不需要兼容这些浏览器，可以直接去掉对应的前缀，大幅减少代码量。可以通过查看浏览器市场份额数据，确定需要兼容的范围，只保留必要的前缀。

4. 渐进增强写法 #

先写标准的CSS代码作为基础，再针对不支持新特性的浏览器补充前缀版本，比如用@supports检测特性支持情况：

/* 标准写法，支持的浏览器直接用 */
.shake:hover {
  animation: shake var(--shake-duration) var(--shake-count) linear;
}

/* 针对不支持标准animation的浏览器，提供前缀版本 */
@supports not (animation: none) {
  .shake:hover {
    -webkit-animation: shake var(--shake-duration) var(--shake-count) linear;
    -moz-animation: shake var(--shake-duration) var(--shake-count) linear;
  }
}

不过这种写法不如Autoprefixer自动化程度高，适合小范围场景使用。

内容的提问来源于stack exchange，提问作者Eli O.