Autoprefixer仅按browserslist配置补前缀，不检测兼容性；需配合caniuse-api、stylelint或doiuse等工具实现检测与提示。
Autoprefixer 本身不检测，只按配置补前缀
很多人误以为 Autoprefixer 能“发现”兼容性问题，其实它只是根据 browserslist 配置做确定性补全：有支持缺口就加前缀，没缺口就不加。它不报错、不警告、不提示“这个属性在 Safari 14.5 里不支持”。真正的检测要靠其他工具配合。
用 postcss-reporter + caniuse-api 做静态扫描
如果你希望在保存或构建时看到“place-items 在 IE 11 中完全不支持”这类提示，可以手动加一层检查逻辑：
-
postcss-reporter捕获 PostCSS 处理过程中的警告 -
caniuse-api查询 Can I Use 数据库，对每个 CSS 属性做实时兼容性校验 - 写一个简单插件，在解析到未被
browserslist覆盖的属性时主动result.warn()
示例片段（postcss.config.js）：
const caniuse = require('caniuse-api');
const browserslist = require('browserslist');
module.exports = {
plugins: [
(root, result) => {
const targets = browserslist();
root.walkDecls(decl => {
const feature = decl.prop;
const support = caniuse(feature);
if (!support || !caniuse.isSupported(feature, targets)) {
result.warn(`Unsupported CSS property: ${feature}`, {
node: decl,
word: feature
});
}
});
}
]
};
VSCode 里开实时提示需搭配插件而非 Autoprefixer
VSCode 自带的 CSS 语言服务默认只校验语法，不查兼容性。要实现实时红波浪线提示，得装扩展：
-
CSS Peek或IntelliSense for CSS class names不管兼容性 - 真正起作用的是
Autoprefixer插件（作者 mrmlnc）——但它只在保存时加前缀，不报错 - 目前唯一能实时标出兼容问题的方案是：用
stylelint+stylelint-no-unsupported-browser-features规则
启用后，写 aspect-ratio: 1/1 且 browserslist 包含 ie >= 11，编辑器会立刻标黄并提示“aspect-ratio not supported in ie 11”。
CI 流程中做兼容性断言比本地提示更可靠
开发时提醒容易被忽略，而 CI 中失败才是硬约束。推荐在打包前插入一步检查：
- 用
doiuseCLI 扫描整个 CSS 输出文件：npx doiuse --browsers "last 2 versions, not dead" dist/main.css - 它会输出所有不被目标浏览器支持的特性，并返回非零退出码，可直接接入 GitHub Actions 或 GitLab CI
- 注意：必须用最终构建产物（如
dist/*.css），不能扫源码——因为Autoprefixer可能已把部分属性转义或降级
复杂点在于，doiuse 对自定义属性（--my-var）、CSS-in-JS 注入的样式、动态拼接的类名都无能为力。这类情况只能靠运行时特性检测兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
