Less - 浏览器支持

LESS - 浏览器兼容性与编译策略

LESS 本身作为一种预处理器（preprocessor），生成的是标准 CSS。因此，LESS 输出的 CSS 与任何支持你所使用的 CSS 特性的浏览器兼容。关于 LESS 的“浏览器兼容性”主要涉及 LESS 代码如何以及何时被编译（compile）成 CSS 的问题。

编译方法：

• 服务端/构建时编译（Server-Side / Build-Time Compilation，推荐）：这是生产网站的标准且高度推荐的方法。你在开发或部署过程中，使用 LESS 官方编译器（compiler）（如 lessc）、构建系统（build systems）如 Webpack（配合 less-loader）、Gulp、Grunt 或其他工具，将 .less 文件编译成 .css 文件。这样浏览器接收到的就只有标准 CSS 文件，从而确保了最佳性能并避免了客户端开销（client-side overhead）。

• 客户端编译（Client-Side Compilation，用于开发/特定情况）：LESS 可以使用 less.js 直接在浏览器中进行编译。这种方法对于快速开发、实时主题演示（live theming demonstrations）或教育目的可能很方便。然而，它带来了显著的性能问题：

• 性能开销（Performance Overhead）：浏览器必须下载 less.js（一个 JavaScript 文件），然后在运行时即时解析和编译（parse and compile on the fly）你的 .less 文件。这会增加页面加载时间，并可能导致无样式内容闪烁（Flash Of Unstyled Content，简称 FOUC），即用户在 LESS 应用样式之前 brief 看到页面未加载样式的短暂状态。

• 不适合生产环境（Not Ideal for Production）：由于性能成本较高，客户端编译通常不适合大多数网站的生产环境（production environments）。

历史考量（旧版浏览器）：

过去，当 Internet Explorer 8 等旧版浏览器（Legacy Browsers）更为流行时，如果 less.js 依赖于这些浏览器中不存在的较新 JavaScript 特性，可能需要特定的 JavaScript 垫片（shims）或 Polyfill（polyfills，如 es5-shim）。现代版本的 less.js 通常与当代浏览器（Chrome, Firefox, Safari, Edge）兼容，无需此类垫片即可进行基本操作。

提到 PhantomJS 也 largely 属于历史范畴，因为现代的无头浏览器（headless browser）测试和自动化工具，如 Puppeteer 和 Playwright，现在已成为标准。

最佳实践：

• **始终为生产环境将 LESS 编译为 CSS。**这是最关键的一点。
• 在你的开发工作流程（development workflow）中利用构建工具自动化编译过程。
• 如果在开发中使用客户端编译，请注意其局限性，并确保在部署（deployment）时切换到构建时编译。
• 编写 LESS 时，使用目标浏览器良好支持的 CSS 特性。LESS 本身并不会增加 CSS 特性的浏览器兼容性；它只是处理这些特性。

在生产环境中使用客户端 LESS 进行实时主题调整（live theme adjustments）是一种小众应用场景。如果采用此方法，应仔细评估其性能影响，并且通常应保留给非关键应用或特定面向用户的定制工具（customization tools），在这些场景下这种权衡是可接受的。