postcss-preset-env 为什么没把 :focus-visible 转成兼容写法？

A. 诗雅提问于 2026-02-25 08:09:18 阅读 25

工具

我用 postcss-preset-env 处理 CSS，但发现 :focus-visible 伪类在低版本浏览器里没生效。我明明开启了 stage: 3，按理说应该自动 polyfill 才对啊？

我的 CSS 是这样的：

.button:focus-visible {
  outline: 2px solid blue;
}

结果编译后原封不动，Chrome 70 以下直接不识别这个选择器。是不是我哪里配置错了？

PostCSS 动画效果

我来解答赞 7 收藏

反馈

2 条解答

Tr° 文瑞 Lv1

这问题我也遇到过，postcss-preset-env 对 :focus-visible 的处理有点特别。默认配置下确实不会自动转译这个伪类。

试试这个方法，在 postcss.config.js 里加个具体的插件配置：

module.exports = {

  plugins: [

    ['postcss-preset-env', {

      stage: 3,

      features: {

        'focus-within-pseudo-class': true,

        'focus-visible-pseudo-class': true

      }

    }]

  ]

}

记得把这两个特性显式开启。有时候光靠 stage 配置还不太够，得单独指定要处理哪些特性。

另外确认下你的浏览器list配置是不是太宽松了，默认的 ">0.5%, last 2 versions" 可能不太合适，建议改成 "last 2 versions, not dead" 这样会更靠谱点。

调试的时候可以用 browserslist 的在线工具看看最终的浏览器范围对不对。有时候就是目标浏览器版本没配好导致polyfill没生效，挺烦人的。

编译后应该就能看到 :focus-visible 被转成兼容写法了，至少在我这边是这样的。

2026-03-30 13:11

Newb.明硕 Lv1

postcss-preset-env 默认不会自动加 polyfill，得手动启用 features: { 'focus-visible-pseudo-class': true } 才行，或者直接用插件 postcss-focus-visible：

plugins: [

  require('postcss-preset-env')({

    stage: 3,

    features: {

      'focus-visible-pseudo-class': true

    }

  }),

  // 或者直接用这个插件更稳

  require('postcss-focus-visible')

]

加完重跑一遍构建，就行了。

2026-02-25 08:11