caniuse网站介绍

什么是Caniuse

关于成为一名Web开发人员的最好笑话之一是，您花费20％的时间进行编码。 另外80％的人在互联网上搜索遇到的问题的解决方案。 如果有点夸张，这也不是完全不正确的。 借助“我可以使用”之类的工具，可以大大减少时间搜索。

我可以使用什么？

有了这个工具，您的网站上的特定技术是否与特定的浏览器兼容的问题以简单易懂的图表形式列出，可以帮助您更轻松地做出设计和开发决策。 主要由 亚历克西斯·德瓦里亚（Alexis Deveria） 由…设计 伦纳特·肖尔斯，CanIUse是一个开源项目，任何人都可以 有助于 只需向数据库贡献信息即可。

使用该工具很简单。 通过简单地搜索属性，参数或功能，http://caniuse.com会准确告诉您哪些浏览器和版本支持该技术。 CanIUse还可以让您知道所需属性的变体。 这样，您就知道哪种浏览器支持哪种媒体查询。

以及到什么程度。 兼容性图表还不仅指示浏览器是否支持该技术，而且还指示在某些版本中存在部分兼容性的情况下是否达到何种程度。

为什么要使用CanIUse？

好吧，对于初学者来说，如果您想给客户，客户和访客最好的体验，就应该使用它。 在尝试决定是否应使用悬停效果，透明胶片，jquery单击或什至自动暗模式切换时。

如果您建立了一个可以想到的所有功能的网站，并且制作出比应用程序更具美感的精美设计，那么您所做的事情就令人赞叹。 但是，如果您的主要受众仍然使用Internet Explorer 6（抖动），则不仅会浪费您的设计和开发时间，而且从根本上破坏了您的网站。 访客可能甚至无法在其最基本的级别上运行。

诚然，大多数（但并非全部不幸）访问者将使用比IE6更现代的功能。 但是，正在使用的不同浏览器的数量巨大。 各种版本的平板电脑，移动设备和台式机。 而且，值得一看的是，您即将到来的网站（甚至您现有的网站）是否在满足受众的最大利益）。

主页面介绍

页面红字标注了4个地方

（1）代表了这个介绍框的内容隶属于一个特性，也就是我们在features-json看到的一个个跟特性相关的文件，没有#标志的不属于特性。

（2）代表这个特性在标准中所处的一个状态,具体参照前文对sample-data.json的介绍

（3）对于这个特性，在全球、中国所有浏览器中，分别有多少完全支持和部分支持，把两部分值加起来，得到总份额。

（4）浏览器基线，代表对应浏览器current状态的版本号。基线往上是该浏览器的低版本，并对相同支持情况的版本进行合并。基线往下是未来的三个版本，并进行状态合并。

3.2浏览器信息统计

caniuse关于浏览器的数据，主要都来源于statcounter，此网站统计了全球以及各国的浏览器使用情况。

上面提到的浏览器基线及版本号列表，都是基于statcounter上个月份的数据统计。
例如chrome v73在3月12号发布了版本，但在caniuse网站里，v72还是作为了current版本，就是因为caniuse的分析数据来源于2月份的统计数据，数据并不是实时更新。

3.3详情

页面红字标注了4个地方

（1）浏览器对特性支持情况相同的版本区间

（2）对特性的支持情况

（3）火狐40-火狐64的发布时间

（4）火狐40-火狐64，在全球、中国的使用份额

4.想法

知道了caniuse的数据来源及原理之后，我们是否可以打造属于自己公司的caniuse，暂且就叫做caniuse-shein

（1）
目前，我司的前端只负责中后台系统，面向的用户群体有限。
而我手头上有一个专门为公司前端而打造的APM项目，里面包含了详尽的浏览器版本及份额数据，将APM项目中的浏览器数据与caniuse的特性数据相结合，可以制作出类似于caniuse官网的特性查询分析页面，但报表数据只关心我司的用户群里使用的浏览器，而非依据全球或者全国。

（2）
babel-preset-env这个插件也可以结合caniuse-shein的数据，给出对应浏览器份额的babel插件列表