关于成为 Web 开发人员最好的笑话之一是您将 20% 的时间花在编码上。其他 80% 的人会在 Internet 上搜索他们遇到的问题的解决方案。如果有点夸张,这并非完全不真实。使用“Can I Use”之类的工具,可以大大减少搜索时间。

我能用什么?

使用此工具,有关您网站上的特定技术是否与特定浏览器兼容的问题会在易于理解的图表中列出,帮助您更轻松地做出设计和开发决策。 CanIUse 主要由 Alexis Deveria 设计,由 Lennart Sholes 设计,是一个开源项目,任何人都可以通过向数据库贡献信息来做出贡献。

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

以及到什么程度。兼容性图表不仅表明浏览器是否支持该技术,还表明某些版本在多大程度上存在部分兼容性。

为什么要使用 CanIUse?

好吧,对于初学者来说,如果您想为您的客户、顾客和访客提供尽可能最好的体验,那么您应该使用它。当你试图决定是否应该使用悬停效果、透明胶片、jquery 点击甚至自动暗模式切换时。

如果您构建的网站可以满足您的所有需求,并制作出比应用程序更美观的精美设计,那么您就完成了一项了不起的工作。但是,如果您的主要受众仍在使用 Internet Explorer 6(抖动),那么您不仅是在浪费设计和开发时间,而且实质上是在破坏您的网站。客人甚至可能无法在其最基本的水平上发挥作用。

不可否认,大多数(不幸的是并非全部)访问者将使用比 IE6 更现代的功能。然而,正在使用的不同浏览器的数量是巨大的。适用于平板电脑、手机和台式机的各种版本。而且,值得看看您即将推出的网站(甚至您现有的网站)是否符合您的受众的最大利益)。

如何使用

网站的工作流程非常简单,用户界面尽可能易于阅读。

看上面的截图,你可以在搜索字段中输入您想要的任何技术。我们使用您在代码中使用的特定语法找到了最佳结果。不是语义的、人类可读的术语。例如在 (1) 中,更喜欢使用配色方案而不是暗模式切换 CSS。

CanIUse给出的描述(2)也让它成为可能,所以如果你在做一项技术,你可以准确地看到它是什么,它做了什么以及它如何与技术交互。 DOM。

CanIUse 最有用的部分之一是任何特定条目底部的注释 (3) 选项卡。这本身不是技术信息,而是提醒一些注意事项在彩色版本中不可见。

鼠标悬停时当停止在特定的浏览器版本上时(以臭名昭著的 Internet Explorer 6 为例),将显示一个弹出窗口 (4),其中包含大量信息。该版本的全球总使用情况,是否仍被开发者支持,以及能够通过浏览器堆栈模拟测试该技术。最后一点非常重要。了解不受支持的功能是如何呈现的可能会告诉您解决问题的方法。

有时评论 (5) 选项卡还会向您显示某个特定功能已弃用。在上面的示例中,@media 查询已被弃用。因为有一个独立工作的暗模式/亮模式查询。

如何找出您的观众正在使用哪些浏览器

考虑到所有这些,您可以查看支持的浏览器以获取您想要使用的任何给定技术。但为什么这对您的用户来说是必要的?您可以使用 Google Analytics 了解访问者使用的浏览器和操作系统 (OS),以尽可能确保兼容性。

首先,导航到左侧边栏上的“受众”部分。然后展开技术并单击浏览器和操作系统。

如您所见,用户和他们用来访问您网站的浏览器的细分。如今,Chrome 和 Safari 将出现在几乎所有网站的顶部。 Chrome,因为它是桌面用户的标准配置(也是 Android 设备的默认配置)。和 Safari,因为 iPhone 默认使用它。 (和 MacOS)。

点击浏览器(3)可以看到使用的是哪个版本的浏览器(文字版)。如果您注意到,以下版本之间存在很多差异。从 12.x 一直到 604.x。这是一个很大的差距。这表明操作系统使用情况有所不同。因此,单击其他 (4) 并滚动下拉菜单。找到操作系统。

立即按操作系统排序.您现在将看到有多少流量来自移动设备,有多少来自桌面设备。

掌握这些信息后,您可以返回 Caniuse.com 并确保您网站上的所有技术都适用于您的顶级用户。

以 CanIUse 结束

因此,下次您查看 Divi 和我们的一项新功能或阅读 CSS 教程并找到新内容时,请查看 caniuse.com。某些浏览器可能需要一段时间才能识别某些技术。但是,如果您的大多数观众来自支持新功能和有趣功能的浏览器,“Can I Use”可以告诉您是否可以使用它。

你发现“我能用”的最佳用法是什么?

Fatmawati Achmad Zaenuri/Shutterstock 文章的精选图片

来源