css 浏览器兼容

2024-10-16

Vite

css 在不同的浏览器兼容性是不同的，有些特殊的样式在不同的浏览器前需要加上特殊性的前缀，比如：

// 只有chrome和safari支持，且需要添加webkit前缀
-webkit-margin-before
-webkit-margin-after

postcss

postcss 是一个用 JavaScript 工具和插件转换 CSS 代码的工具，postcss 自身没有什么功能，只是一个平台，可以下载各种插件，从而实现一些功能！

Autoprefixer：自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。
PostCSS Preset Env：将最新的 CSS 语法转换成大多数浏览器都能兼容的语法。
CSS module：解决 css 命名冲突。

vite 中配置 postcss

在 vite 中配置主要使用postcss-preset-env插件，它支持 css 变量和一些未来 css 语法以及自动补全(autoprefixer)。

安装插件：
```
npm i postcss-preset-env -D
```

在 vite.config.js 中配置：

import { defineConfig } from "vite";
const postcssPresetEnv = require("postcss-preset-env");
export default defineConfig({
  css: {
    // modules
    // devSourcemap
    // ...
    postcss: {
      plugins: [postcssPresetEnv()],
    },
  },
});