CSSer 对于从 UIWebview 到 WKWebview 需要担心什么

微信客户端会逐步升级成为“ WKWebview”，作为一名写CSS的页面仔看到这个之后，突然想到会不会有什么兼容性问题呢，好担心，好惆怅，有木有……...



题图来自微信公众号首页 banner 部分截图

昨晚一篇来自微信开发者公众号的公告《微信 iOS 客户端将升级为 WKWebview 内核，请网页开发者尽快适配》，看着这个标题，我第一反应是这个内核的改变对于像我这样写 CSS 的人来说，会有什么影响呢。

是的，我不关心这个内核的改变对于 JS 方面的各种影响，也不关心其他的，我只是关心 HTML 和 CSS 方面的影响，因为这是我的工作，需要去了解一下。

手动切换入口：
在微信会话列表页点击右上角“加号按钮”，选择菜单中的”添加朋友”，在添加朋友界面的搜索框中输入字符串：“:switchweb”，再点击键盘右下角搜索按钮。切换成功后会提示当前使用的内核是UIWebview或是WKWebview。

在公众号中提到可以手动切换内核，只需要按照这个步骤输入 :switchweb 即可。赶紧试试看……





成功切换了，然后再根据说明去查看一下是否切换成功。

校验切换方法：
通过命令成功切换到WKWebview后，可通过以下方法验证当前网页使用的是否是WKWebview内核。
微信内任意入口进入任意网页，在网页加载成功后向下拉动页面（或点击网页右上角菜单按钮），使之显示出地址栏，当地址栏以 “此网页由” 开头即为当前使用WKWebview，若以“网页由”则是使用的UIWebview。

在这里提到了：

• “此网页由”这个开头就是 WKWebview；
• “网页由”这个开头就是 UIWebview；

那么对于我而言，在 CSS 方面会有什么变化呢，是不是支持性有所不同呢。简单的通过搜索引擎找了一下， 发现大部分都是对这个内核的一些问题说明，并没有对 CSS 方面的一些资料，并且在公告中也没提到具体会对 CSS 有什么变化，大部分都是跟我没关系的。

稍微有点不放心 ，于是就打开了一丝（https://github.com/yisibl/）的github中一个来自 LeaVerou（https://github.com/LeaVerou/） 的工具——CSS3test（http://yisibl.github.io/css3test）

用一丝这个主要是因为他修改了很多东西，增加了不少，而 LeaVerou 原本那个比较少，有兴趣的朋友可以仔细对比一下。

• 一丝修改后的：http://yisibl.github.io/css3test
• LeaVerou 的： http://css3test.com/

这里我就把一丝的这个转为二维码（或者点底下的“阅读原文”，有兴趣的可以试试看。

通过这个工具对比了一下，我觉得我的担心完全是多余的。

UIWebview

WKWebview

iOS10 中的 Safari

图片都被我压缩了，质量不高，关键的数据是这样的：


至于细节部分就不提了，因为对于我这个 CSSer 来说，我已经可以安心了，几乎就是没任何影响么（心中一阵狂笑……）

不过这个改变是针对 iOS 的，那么对于 Android 而言，这条兼容的路其实还是很漫长的……

    关注 闲谈CSS那些事儿