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