prefixfree.js已不推荐用于现代项目，因仅支持IE9+、自2013年起停止维护，无法识别@supports、gap等新属性，建议改用PostCSS+autoprefixer构建时处理。
prefixfree.js 还能用吗？先看现实兼容性
不能直接用在现代项目里。它只支持到 IE9+，且早已停止维护（最后更新是 2013 年），不识别 @supports、gap、aspect-ratio 等新属性，也不处理 CSS 变量或 Grid 新语法。如果你的项目仍需支持 IE10 或更低版本，且 CSS 规则较简单（比如只用 transform、transition、border-radius），它还能凑合跑；否则建议换 PostCSS + autoprefixer 构建时处理。
怎么让 prefixfree.js 在 IE8–9 中真正生效
它默认只处理 <style> 和 <link rel="stylesheet"> 加载完成后的样式，对动态插入的 <style> 或内联 style 属性无效。IE8 下还容易因 DOM ready 时机问题漏处理。
- 确保在所有 CSS 加载完毕后、DOM ready 前手动触发：
if (window.prefixfree) { prefixfree(); } - 不要依赖
window.onload，改用document.readyState === 'interactive'或 IE 专用的document.attachEvent('onreadystatechange') - 避免把
<script src="prefixfree.js"></script>放在<head>末尾——它必须在所有<link>之后、但又不能阻塞渲染，推荐放在</body>前 - IE8 不支持
getComputedStyle对伪元素的读取，所以::before/::after里的 CSS3 属性不会被补全
为什么加了 prefixfree.js 却没看到 -webkit-transform
它不是“生成并写入 CSS 文件”，而是运行时遍历已解析的样式表，用 JS 动态重写 CSSRule 的 cssText。这意味着：
- 浏览器开发者工具的“Computed”面板里能看到带前缀的最终值，但“Styles”侧边栏仍显示原始无前缀规则（因为 source 没变）
- 如果你用
document.styleSheets[i].insertRule()动态加规则，prefixfree 不会监听，得手动调用prefixfree.processStyleSheet(sheet) - 它不处理
style属性字符串（如el.style.transform = 'rotate(45deg)'），这类 JS 操作仍需自行加前缀或用csstools类库
比 prefixfree.js 更靠谱的降级方案是什么
构建时加前缀比运行时更稳定、性能更好，也避免 JS 失败导致样式完全失效。
立即学习“前端免费学习笔记（深入）”；
- 用 PostCSS +
autoprefixer，配置browserslist如"ie >= 9, iOS >= 7"，它能精准输出所需前缀，且支持未来语法降级 - 如果必须运行时处理，
css-prefers-color-scheme或focus-visible这类特性应搭配feature queries+ JS 检测，而不是依赖 prefixfree - 对于 IE8 这种连
querySelector都不全的环境，与其折腾 prefixfree，不如用 conditional comment 加载一份单独的 IE8 专用 CSS，里面手动写好-ms-前缀
真正难处理的从来不是前缀本身，而是不同浏览器对同一前缀属性的支持程度差异——比如 -webkit-flex 在 Safari 6.1 和 Chrome 21 行为就不一致。这时候靠 JS 补丁不如回归渐进增强：先写标准语法保证基础可用，再用前缀提升体验，最后用 JS 检测兜底。
