互联网发展的速度超乎你我的想象。但是,“水能载舟,亦能覆舟”。高速发展虽然创造了无限的机会,但也催生了其他问题。Mozilla向你解释了当前的网络环境和我们最关心的问题:跨浏
互联网发展的速度超乎你我的想象。但是,“水能载舟,亦能覆舟”。高速发展虽然创造了无限的机会,但也催生了其他问题。Mozilla向你解释了当前的网络环境和我们最关心的问题:跨浏览器兼容性。
据统计,现有的数百万个网站都存在一个或多个主要浏览器的兼容性问题,这也导致用户体验不佳。Web开发人员社区应该解决这个问题。
在过去的20年里,互联网经历了巨大的变化。1996年只有100万左右的网站;现在有超过10亿个网站。同样,当年的网民也只有5000万左右;现在它有超过30亿人在线。面对如此多的在线内容,现在大约有24000台移动设备,共计81亿台联网设备,供每个人随时享用。
从上图可以看出,与20年前相比,上网人口增长了60倍,网站数量增长了1000倍,上网设备种类增长了24000倍。
自1996年以来,内容、设备和用户的爆炸性增长使“跨浏览器兼容性”成为一个更迫切需要解决的问题。知名网站《Stack Overflow》上有55000个问题,其中包括关键词“跨浏览器”,无数的问题都在问“在某个浏览器中是如何工作的”。当然,任何特定浏览器显示特定网站的问题都是潜在的兼容性问题。
上图:包含上述关键词的问题在<>网站中的数量。
所以跨浏览器兼容性还是个大问题。除了Mozilla长期关注此事,我们觉得其他人也应该时不时关注一下。你为什么关心这个问题?开发者如何确定每个人都用和你一样的浏览器?每个人的需求和习惯都不一样。几乎没有人会因为只有一个网站无法正确显示内容而更换浏览器。满足每个人的需求,意味着你掌握了自己的力量。现在有许多工具可以帮助您轻松实现这一目标。
那么造成跨浏览器不兼容的因素有哪些呢?答案很复杂。以下是目前最常见的原因:
开发者用了某款浏览器的专属功能(如特定前缀),以达到特殊效果。浏览器厂商在某功能标准化之前,就快速完成产品以供开发者所需。浏览器厂商在构建标准或修复错误的速度过慢。某些网站可能布署了「识别用户浏览器(User Agent Sniffing)」,以针对不同的浏览器传送不同的内容。开发者可能过于依赖单一工具(又可能仅支持单一浏览器),因此忽略了跨浏览器兼容性的错误。产业的成长力吸引更多Web开发者加入,但也造成开发者的平均水平被拉低。
上图:事实上,W3C已经标准化了12,106组API,但是没有一个浏览器完全实现了它们。而且使用Chrome的开发者比例失调,远远超过用户比例。
在互联网发展的早期,有一些挑战等待我们去解决。当然,这几天网页开发水平有了很大的进步。许多产品和工具可以帮助我们在所有浏览器上建立良好的体验。
开发者要认真阅读以下几点,仔细思考,这样他们的下一个网站才能给大家提供更丰富的内容。
使用其他浏览器的人比你想象的要多
很多开发者认为自己使用的浏览器是别人唯一使用的浏览器,所以只为这个浏览器开发网站。有数据显示,70%的网页开发者在桌面使用Chrome,但只有45%的网民在所有设备上使用Chrome,只有57%的网民在桌面使用Chrome。仅仅是在Chrome中构建和测试网站,就忽略了将近一半的全球用户。
浏览器的市场份额也根据不同的地理位置而有所不同。Chrome、Firefox、IE/Edge在很多地方领先,但用户比例不一。德国人更喜欢火狐;;日本人经常用IE;许多澳大利亚人选择狩猎旅行。超过五分之一的越南人使用C?c C?c浏览器,这是Chromium的一个分支。如果你只为单一浏览器设计自己的内容,你会错过这些独特的市场。
事实上,你喜欢的浏览器功能不一定适用于其他浏览器。对于不同的功能,厂商往往有不同的开发安排。所以可能一堆人享受不到一个浏览器的新API。
这些因素往往在意想不到的情况下一起发生:如果你选择所有浏览器不支持的API,只用单一浏览器测试自己的网站,然后在一个浏览器不流行的市场发布你的网站,你可能会先失去一半以上的潜在用户,这相当于错过了很多收入和客户。当然要多注意避免类似情况。
兼容性会影响网站关联性
跨浏览器兼容网站是指必须为未知的客户端环境设计和编写程序代码,让尽可能多的人访问网站内容。当然,用户也可能是身心残疾,相关数字可能超出你的想象。如果你的网站在所有浏览器上都能流畅运行,但是你忽略了屏幕阅读器,你就失去了可能的机会。
身心残疾人也是一个巨大的市场。例如,仅美国的视障互联网用户总数就超过了加拿大的在线人口。最新的Web功能早就可以满足这类用户的需求了,就等开发者实际开发了。
网站亲和力的访问技术不仅可以帮助身体和精神残疾的人,例如:
更适合阅读软件执行的网页,也就能更贴合搜索引擎算法。简单的存取技术,例如为图片设定替换文字、在链接中使用叙述性的文字、仅 CSS 用于网页风格、使用 HTML5 的语法卷标,都能提升整体网页的搜索引擎优化(SEO)。影音内容的转换,不仅对听障人士有所帮助,也有助于位处低带宽地区(无法下载完整影片)的移动设备用户,也能解决嘈杂环境中听不到影片声音的情况。更多文字内容也有机会与关键词产生关联性。所以同样和 SEO 息息相关。
用户不会切换浏览器,只会切换网站
你可能想说用户会换浏览器,然后进入你的网站,但其实很多人不换浏览器或者根本不会换浏览器。
用户对不能用的东西没有太多耐心,只是转到竞争对手的网站。如果某个关键环节出了问题,潜在用户可能就再也回不来了。根据Akamai的统计:
32% 的用户只要在网站上遇到问题,几乎就不会进行任何在线交易了。35% 的用户更会对网站留下负面印象。45% 的人再也不会上你的网站。超过 22% 的人会离开网站找其他没问题的网站。
而且很多用户根本不知道如何安装新的浏览器,甚至不知道什么是浏览器。其实很多人不知道网站、浏览器、搜索引擎的区别。
即使你知道你可以并且想要安装一个新的浏览器,你也可能无法安装它。很多公司限制员工只能使用某个浏览器,或者图书馆的公共电脑不能安装其他软件。
例如,微软曾要求用户在2016年1月12日前更换新浏览器,但截至2016年3月,仍有超过1/3的IE用户继续使用没有安全更新的过时版本。2015年6月至2016年5月这一年,2.07%的用户还在使用IE8它已经停止更新;同年超过3/4的时间,1.59%的人还在用IE9。IE10全年市场份额10.95%。另外值得一提的是,从3月份开始,这些浏览器的使用率明显下降。
糟糕的在线体验肯定会赶走用户。如果网站一半的流量来自不同的浏览器,而你想维护这些流量,当然要用这个浏览器来测试你的网站。
上图:至少有43%的网民使用的浏览器不同于开发者首选的浏览器。而且,不同的国家有不同的喜欢的浏览器。
兼容性=自己的实力
构建Web内容需要非常专业的技术,这不像简单的清洁环境。我们都以自己的作品为荣,不断磨练自己的技术,努力展现自己的专业素养。因此,您必须:
随时关注最新的技术与框架。仔细测试并构建跨浏览器/平台的 App,为功能尚未完整的浏览器找出解决之道。相关体验又是否为人所接受?确认残障人士也能轻松读取网页内容。确保一般读者乐于接收你的内容,也要能满足自己/用户的需求。
所以,作为一个网站开发者,你成功的网站也代表了你自己的简历。你的客户、同事、现在和未来的老板都会关心他们是否能享受到很棒的体验。
但是因为时间和业务的限制,不可能做到尽善尽美。您必须首先满足提交的截止日期;你的老板可能只关心网站在iPad上能否正常显示,但他从来没有听说过“网站亲和力”或“可访问性”。你没有时间在最后期限内修改IE错误。即使达不到理想状态,也要尽量在规定时间内完成。
随着截止日期的临近,您会希望自己的框架测试跨浏览器兼容性,这将节省您大量的时间。但是你的网站不是纯框架代码,你必须对它负全责。跨浏览器兼容性测试要脚踏实地,而不是想办法偷工减料。
我们必须坚持写程序代码;为需要的人提供信息;既定的丰富功能也要让大家都能享受到。这些是优秀的Web开发人员的最终目标。
许多新工具会有所帮助
现在你知道“重视自己网站的兼容性”的原因了,但是你是怎么做的呢?
如果在别人的网站上发现错误,就到 webcompat.com 报错吧!如果你在为自己的网站排错,就应该常上去看看。用不同的浏览器测试自己的网站,并站在用户的角度浏览整个网站。通过浏览器开发者工具的控制台寻找错误。目前主流的PC版浏览器都已内置强大的开发者工具,可协助找出排错问题,甚至可用于移动版:Firefox dev toolsChrome dev toolsIE/Edge dev toolsSafari dev toolsOpera dev tools如果找到的问题并非发生在自己的网站上,就可能是浏览器出错了!立刻回报错误,以便该款浏览器的开发者尽快修复:Mozilla BugzillaChrome issue trackerIE/EdgeSafari/WebkitOpera若能在自己的布署过程中整合常用的跨浏览器测试工具,就能测试得更顺利:BrowserStackSauce LabsBrowserling在自己的网站上使用某个 Web 功能之前,先确认有哪些浏览器已经工作:CaniuseMDN 的兼容性表格Kangax 的 ECMAScript 兼容性表格先了解程序代码撰写工具,可提升跨浏览器的兼容性:Autoprefixer、CSSNext、Oldie,及其他 PostCSS 插件,都能写出纯粹、新版 CSS 且不会在旧版浏览器中间断(Break)。Modernizr 可协助找出浏览器之间的工作差异并处理(可用以取代 UA sniffing)@supports 协助你为网页体验创建更进步的强化功能,用于更多功能更强的浏览器请多了解网页的众多功能与小秘诀。知道越多就会越爱网页:MDNGoogle DevelopersW3C Developers