LESS 编译后样式表的浏览器兼容性问题-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，可以让前端开发者更方便地编写 CSS。同时，它也提供了很多方便的特性，诸如变量、嵌套等等。然而，在使用 LESS 进行开发时，我们需要考虑编译后的样式表的浏览器兼容性问题。

编译后样式表的兼容性问题

LESS 的编译器将 LESS 编译成 CSS，然后我们将 CSS 引用到 HTML 中。然而，CSS 有很多特殊语法和属性，不同的浏览器会对其支持的程度不同，从而导致生成的样式表在不同的浏览器中表现不同。

有些 CSS 属性在某些浏览器中需要添加前缀才能生效，比如 box-shadow，我们需要在其前面添加 -webkit-，-moz- 等前缀。为了让生成的样式表在不同的浏览器中生效，我们可以使用 Autoprefixer 工具自动添加前缀。

.box {
  box-shadow: 5px 5px 5px #888;
}

生成的样式表：

.box {
  -webkit-box-shadow: 5px 5px 5px #888;
  box-shadow: 5px 5px 5px #888;
}

有些属性在一些旧版本的浏览器中并不支持，比如 CSS3 的 transform。为了在不同的浏览器中实现相同的效果，我们可以使用 polyfill，它模拟了浏览器中并不支持的属性，从而实现相同的效果。常用的 polyfill 有 Modernizr 和 Polyfill.io 等。

<div class="box"></div>

.box {
  transform: rotate(45deg);
}

使用 Polyfill.io：

<div class="box"></div>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

.box {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

在编写 LESS 时，我们应该尽量避免使用那些某些浏览器不支持的属性。如果必须使用这些属性，我们可以考虑使用其他替代方案，或者通过 CSS Hack 来解决。

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
}

有些特定的浏览器不支持某些 CSS 属性，我们可以在生成样式表时针对不同的浏览器生成不同的样式。使用工具比如 gulp-autoprefixer 和 postcss-cssnext 可以让我们在编译 LESS 时实现这个目标。

/* 其他浏览器 */
.box {
  transition: transform 1s;
}
/* IE 浏览器 */
_:-ms-lang(x), .box {
  transition: filter (1s);
}

LESS 是一个强大的工具，可以让我们更方便、更高效地编写 CSS。但是在使用时，我们必须要考虑到编译后样式表的兼容性问题。通过使用前缀、polyfill、避免不支持的属性和针对不同的浏览器生成不同的样式，我们可以轻松地解决这些问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f87a57d4982a6eb0ae285