谷歌浏览器在89+的版本之后不再识别deep(深度选择器)。由于无法确保用户使用的浏览器版本是多少,只能通过代码做到兼容所有的谷歌浏览器。考虑到89以下的浏览器人需要deep选择器才能访问到scope作用于内的样式,需要保留原来的deep选择器定义的样式。为了兼容89+的谷歌浏览器则需要将deep选择器去除以避免无法识别造成的样式错乱。
css解决方案:
如果页面中涉及到的deep选择器比较少,那么直接找到css样式文件一处处修改即可。但针对大范围的css文件都涉及到deep选择器的兼容,显然这样的方式就不适用了。
项目通过gulp打包压缩css文件后,所有的css都会集中到一个文件中,如果此时再处理deep选择器的问题,那就回省力很多。因此想到通过扩展gulp打包css文件的功能来统一处理deep兼容性问题。
gulpfile.js文件:
在gulp文件中引入自己编写的工具deepFixTool,用于在css压缩后遍历所有的css样式,当检测到deep选择器时,记录下来用于后面复制。
首先通过正则表达式"/(?<=}).{0,300}?\/deep\/.*?}/g"去压缩后的css文件中全局匹配包含深度选择器的css语句,注意使用正则表达式匹配的话,由于每个css语句长度都不一致,所以会有匹配内容溢出情况(除了包含deep选择器的css语句还有别的会被包含)。因此需要将正则匹配到的内容在做一次过滤,过滤掉多余的不包含deep的css语句。
在过滤掉不想要的内容之后,将得项目中所有包含deep选择器的css语句,此时只要将每个语句中的deep选择器替换为空字符串,并贴到css文件的最后即可。