咨询CSS浏览器兼容性列表及Less参数化混合跨浏览器兼容模板集合

1. 是否存在CSS浏览器兼容性列表？ #

当然存在！这类列表是前端开发者的实用工具，能清晰展示不同CSS属性在各浏览器（含不同版本）中的支持情况——比如哪些属性需要加私有前缀（-webkit-、-moz-等），哪些已经被现代浏览器原生支持。

这类列表通常包含：

• 属性名称及标准语法
• 需要前缀的浏览器版本范围
• 无需前缀的起始支持版本
• 特殊兼容性注意事项（比如部分属性在特定浏览器中的表现差异）

2. 有没有现成的Less参数化混合列表可以直接导入使用？ #

必须有！社区早就整理好了一系列通用的跨浏览器兼容Less混合，你只需要把这些代码保存为单独的.less文件（比如命名为compatibility-mixins.less），然后在你的主Less文件中通过@import "compatibility-mixins.less";导入，就能全站直接调用这些混合，不用重复写前缀代码。

几个常用的兼容混合示例： #

• 圆角混合（给参数加默认值更灵活）：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

• 盒子阴影混合：

.box-shadow(@shadow: 0 2px 4px rgba(0, 0, 0, 0.2)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

• 线性渐变背景混合：

.linear-gradient(@startColor: #ffffff, @endColor: #eeeeee) {
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: linear-gradient(to bottom, @startColor, @endColor);
}

• 过渡动画混合：

.transition(@props: all, @duration: 0.3s, @timing: ease) {
  -webkit-transition: @props @duration @timing;
  -moz-transition: @props @duration @timing;
  transition: @props @duration @timing;
}

• 变换属性混合：

.transform(@transformValue) {
  -webkit-transform: @transformValue;
  -moz-transform: @transformValue;
  transform: @transformValue;
}

导入后，你就可以像这样直接调用：

.button {
  .border-radius(8px);
  .box-shadow(); // 使用默认阴影值
  .transition(background-color, 0.5s);
  .transform(scale(1.1));
}

小提示：随着浏览器版本迭代，很多前缀已经不再需要（比如现在主流浏览器都原生支持border-radius），你可以定期更新你的混合列表，移除过时的前缀，让代码更简洁。

内容的提问来源于stack exchange，提问作者Charles L.