css-vars-ponyfill 在ie环境下使用问题（nextjs 构建）_next.js兼容ie10

css-vars-ponyfill

通过css变量来实现网页换肤的过程中，会出现兼容性问题。

为了解决ie，qq，百度浏览器等兼容性问题，引入css-vars-ponyfill，但是在ie浏览器下，css-vars-ponyfill 的在nextjs下表现不佳，主要缺陷是由于页面是服务端渲染，因此用户在看到界面后，动态主题色等样式不能很快渲染好，而是有一个过渡的时间（css-vars-ponyfill 仅支持client-side），颜色会存在明显替换的过程用户体验差。通过阅读源码可以看到，cssVars需要等到浏览器contentLoaded之后，才会触发，否则一直监听dom的data content事件，这就导致了体验上的问题。

解决方案

1.解析速度

通过把直接去除document.readyState !== 'loading' 这样的限制条件使得浏览器在解析到，然后更改css-vars-ponyfill 的引入方式（旧的引入方式是在nextjs中的mainjs中引入module，然后直接调用cssVars()，这样在调用到ponyfill的脚本前还会解析其他不相关的chunk，为了更快的解析css变量，需要手动选择插入位置），更改之后的css-vars-ponyfill 通过找到css变量的位置（nextjs 通过将不同组件下的style，统一打包在header里面），然后将更改后的ponyfill 插入到style 之后进行调用，这一步选择在服务端渲染的 _document.tsx 文件中更改。

2.解析稳定性

通过手动更改文件解析位置，以及对源码的条件触发机制进行相关更改，首页颜色渲染速度有了一定提升。但是仍存在一个问题，即通过路由跳转的界面，如果有新的style chunk，插入时不能进行有效的css变量解析（已尝试配置cssVars的option 打开MutationObserver）。
因此，解决方案是通过判断UA，来让ie等浏览器下所有的路由通过a标签跳转，触发css-ponyfill的重新解析执行。

export function browser() {
   
  const UA = window.navigator.userAgent
  if (UA.includes("qqbrowser")) return "qqbrowser"
  if (UA.includes("baidu")) return "baidu"
  if (UA.includes("Opera"
1
2
3
4
5