一、CanIUse 的背景介绍
CanIUse 是一个源自于 Web 前端开发社区的网站,它提供了平面化的前端开发界面,用以查询关注 HTML、CSS、JavaScript 的浏览器兼容性信息。
由于标准容易出现解释混乱、实现不一致等问题,CanIUse 就成为了确定每个标准实际实现情况的依据。它可以告诉我们现代的主流浏览器是否支持某种特性,并且对下个版本做一些预测(有些可能还未被支持)。
CanIUse 官网具有全球化特点,它的数据后台也是面向全球的,同时还依赖于各地精通前端技术的开发者与网友的持续贡献和反馈。
二、CanIUse 的使用方法
使用 CanIUse 的方法是十分简洁易懂的,用户在 CanIUse 搜索框中输入标签、属性、方法等词语,它会给出该词语用于各浏览器内核版本(IE、Chrome、Firefox、Safari、Opera等)中的支持情况。并且这些信息是时时刻刻同步更新的,保证了开发者在使用时能够尽可能获得对开发环境最准确、最实时为依据的兼容性支持信息。
CanIUse 的查询结果以图表形式展示,依据某种标准特性,可以针对每个浏览器内核版本进行对比。绿色代表支持程度良好,黄色表示该特性被支持,但是有些功能还未实现,红色则意味着该功能一无所获,无法使用。在具体的使用过程中,我们可以根据查询结果来了解目标浏览器是否支持这些标准特性、使用哪些代替解决方案等。
三、CanIUse 用途的举例
CanIUse 的用途不胜枚举,其中之一自然是辅助我们展开前端开发标准。下面举几个实际的例子。
1. CSS 属性的使用方法
code { box-shadow: #666666 2px 2px 2px; -moz-box-shadow: #666666 2px 2px 2px;/* Firefox 3.5 and lower */ -webkit-box-shadow: #666666 2px 2px 2px;/* Safari and Chrome */ box-shadow: #666666 2px 2px 2px\0/IE9+;/*IE9+ hack */ filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=135,strength=4);/* IE6-IE8 */ }
或者参照下面这个更为简洁的编写方式:
code { box-shadow: #666666 2px 2px 2px; -webkit-box-shadow: #666666 2px 2px 2px; -ms-box-shadow: #666666 2px 2px 2px; -moz-box-shadow: #666666 2px 2px 2px; -o-box-shadow: #666666 2px 2px 2px; }
在代码编写过程中,考虑到不同浏览器的支持情况,对于不同浏览器可以使用不同的样式以保证兼容性。
2. HTML 标签的兼容性
举个例子,某些 HTML5 的标签在 IE 低版本中甚至都识别不了,比如 <head>、<nav>、<article>、<footer> 等等标签,在 WebKit 的内核中,已支持。
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML标签兼容性</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <nav> <ul> <li><a href="#">HOME</li> <li><a href="#">ABOUT US</li> <li><a href="#">CONTACT</li> </ul> </nav> <article> <h4>HTML兼容性问题</h4> <p>在IE8以下版本中,<nav>和<article>标签是被认为是无定义标签,如果在使用这两个标签,建议使用JavaScript或其他hack手段即可实现与HTML5标准的兼容。(以下方式可以在IE6以上以及谷歌浏览器中正常显示)</p> </article> <footer><p>Web前端开发</p><p>CopyRight @ 2021</p></footer> </body> </html>
3. JavaScript 特性的兼容性
排序问题是Web开发中的一大难题,而ES6的Array.sort同样存在缺陷,赋值(数组等操作)的顺序不是稳定的,这就导致在使用排序后数组下标与值不一定互相对应。
let arr = ['1a', '2', '254', '76', '821', '091']; console.log(arr.sort((a, b) => a > b)); //["091", "1a", "2", "254", "76", "821"]
而 JavaScript 的 Array.sort() 引入了 compareFunction 变量,用于比较元素的函数,用于排序使用,可以轻松解决以上问题。
let arr = ['1a', '2', '254', '76', '821', '091']; console.log(arr.sort((a, b) => { //根据长度进行升序 return a.length - b.length; })); // ["2", "76", "091", "254", "821", "1a"]
4. CSS 中特定属性的兼容性
有时候,我们可能会需要在 CSS 中使用特定的功能属性以提高我们开发过程中的细节体验。比如,CSS 的 Text-overflow 属性用于在固定宽度内隐藏多出来的文本,并添加省略号提示,以此达到更为高效的排版效果。
.text-overflow { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
但是,在使用该属性时,我们可能需要注意到位于部分旧版浏览器的兼容性。
在 CanIUse 中,我们可以根据属性名来查询是否被主流浏览器所兼容。另外,我们还可以研究其他类似属性,以做出更为琢磨的决策。
四、CanIUse 的使用壁垒和未来展望
在当今的互联网时代,CanIUse 不仅是一个前端开发必要的助手,同时也具有很多互动和社交的功能。然而,正如同许多其他网络产品一样,CanIUse 也有着一些使用障碍。
例如,CanIUse 的语言主要是英语,这将会对并不精通英语的网友带来障碍。同时,CanIUse 数据源采取了社区化实时反馈的方式,虽然可以获得与时俱进的最新数据,但也相对包含了一些数据陈旧、重复的问题,这需要我们在使用时去判断真假性并结合其他信息。
未来的 CanIUse 将有望围绕性能方面、性能提升和微优化、没有技术限制的使用规范等更为微妙的方向进行扩大升级,并将更加注重用户体验。预计会增强多语言支持以扩大用户量,完善社区互动、技术拓展接口,加强数学、基础、逻辑等严谨性,实现前端开发历史信息的存档和需求高度时延的客户端访问等。
五、小结
CanIUse 作为一个为前端开发者提供服务和帮助的兼容性监测网站,其已成为了 Web 开发的必要工具之一。在开发庞杂项目或者管理多端兼容性方面,CanIUse 都是你不可或缺的重要帮手。
CanIUse 的数据清晰直观,完全站在使用者的角度来展示数据,这对我们前端开发人员是一个巨大的福音。CanIUse 还在不断发展完善,运用 CanIUse 时需要考虑到数据可靠性问题以及其所在网页对付不同浏览器,保证被访问者在不同的浏览器下都能 have a fun 经验。