欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解css-vars-ponyfill 在ie环境下使用问题(nextjs 构建)

程序员文章站 2022-04-01 10:52:41
css-vars-ponyfill通过css变量来实现网页换肤的过程中,会出现兼容性问题。为了解决ie,qq,百度浏览器等兼容性问题,引入css-vars-ponyfill,但是在ie浏览器下,css...

css-vars-ponyfill

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

详解css-vars-ponyfill 在ie环境下使用问题(nextjs 构建) 

为了解决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")) return "opera"
  if (ua.includes("edge")) return "edge"
  if (ua.includes("msie") || (ua.includes("trident") && ua.includes("rv:11.0")))
    return "ie"
  if (ua.includes("firefox")) return "firefox"
  if (ua.includes("chrome")) return "chrome"
  if (ua.includes("safari")) return "safari"
}
type commonlinkprops = {
    children: reactelement
    href?: string
    target?: string
    outerlink?: boolean
    styles?: unknown
}
export default function customlink(props: commonlinkprops) {
  const { children, href, target, as, outerlink, styles = emptystyles } = props
  const [isie, setie] = usestate<boolean>(false)
  const cloneel = (c: reactelement, props?: any) =>
    react.cloneelement(c, { href: as ?? href, target, ...props })
  useeffect(() => {
    if (["ie", "qqbrowser", "baidu"].includes(browser())) {
      setie(true)
    }
  }, [])
  function renderlink() {
    if (children.only(children).type === "a") {
      const node = cloneel(children as reactelement)
      return node
    } else {
      let fn: () => void | null = null
      if (outerlink) {
        fn = () => {
          window.open(as ?? href)
        }
      } else {
        fn = () => {
          window.location.href = as ?? href
        }
      }
      const node = cloneel(children as reactelement, {
        onclick: () => {
          fn()
        },
      })
      return node
    }
  }

  return (
    <>
      {!href ? (
        children
      ) : isie ? (
        renderlink()
      ) : (
        <link {...props}>{children}</link>
      )}
      <style jsx>{styles}</style>
    </>
  )
}

这里children的type 选择了 reactelement ,而不是插槽中通常支持的 reactnode 主要是不想考虑直接插入字符串这种情况,会增加问题的复杂度,因此直接在type这层做限制。还有fragments 也没有考虑,且没有找到有效的fragments 类型,没法在reactnode 中把它omit掉,nextjs 里面的link 如果首层插入了fragments 后,也无法正常跳转,可能原因也是无法再fragments 上面绑定有效的事件吧,目前fragments(16.13.1) 只支持key属性,希望后续可以优化。

总结

到此这篇关于css-vars-ponyfill 在ie环境下使用问题(nextjs 构建)的文章就介绍到这了,更多相关css-vars-ponyfill使用内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!