CanIUse 如何辅助Web开发

一、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 经验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/227866.html