HTML5 赋予你的 10 大超能力（而你尚未使用）

最新的 HTML 规范具有大量新功能，并且未来添加的计划也在不断增加。

我感觉缺乏认知和跨浏览器支持导致开发者对更新和新规范的好奇心降低。但我完全同意，克服兼容性问题以便在原生环境中使用某些新功能确实会让人不知所措。

在这篇文章中，我将列出一些你可能没有注意到的优秀功能，它们或许能帮助你在编写 Web 应用程序时提高效率。其中一些功能得到了所有浏览器的广泛支持，而另一些则受到非常有限的支持。

1.详细信息和摘要标签

你在 React 和 Angular 代码中创建了多少个标志来保存组件中切换按钮、折叠面板和滑块的状态？使用详细信息和摘要标签，你无需编写任何 JavaScript 代码就能处理这些问题。

查看此 codepen 获取完整示例

除了 Edge 和 IE 之外，大多数主流浏览器都支持详细信息和摘要标签，但有一个polyfill。

2. 原生情态动词

每个人都知道，创建足够响应、足够灵活、能够跨大型系统使用的对话框和模态框组件是一件令人头疼的事情。实际上，我们确实有一个原生的解决方案。

您可以在 Codepen 中看到一个简单的示例，演示如何使用 HTML 5.2 的对话框组件。
警告：该示例不包含 polyfill，并且仅适用于桌面版或 Android Chrome 浏览器。

对话框有一些很棒的功能，比如背景伪类。可以看看这篇博文，它展示了一个非常棒的使用示例。

对话框元素目前已受现代桌面版和 Android 版 Chrome 浏览器支持。仅此而已。不过，您可以使用Google 创建的 polyfill在其他浏览器中使用，并为所有浏览器原生支持对话框元素的那一天做好准备。

3. calc()

calc()是一种 CSS 数学运算方法，您可以使用此函数替换任何数值。现代预处理器允许使用数学函数，但calc()的强大之处在于它能够混合使用单位，例如百分比和像素。当您使用 JavaScript 动态计算容器高度或宽度时，
calc()非常有用。

如果你写过 HTML 和 CSS，你肯定需要这个功能，千万别错过学习它。这篇文章有很多很棒的示例。

4. contenteditable属性

contenteditable属性能够以一种神奇的方式将任何元素变为可编辑状态。这在创建一些自定义用户输入（例如文本处理器、博客引擎或其他任何处理文本的功能）时非常有用。查看此 Codepen 来了解此属性的基本功能。

最大的惊喜是 - contenteditable被所有主流浏览器支持，甚至 IE 6 也支持。

5.标记标签

mark是一个非常简单且实用的原生标签。由于 dev.io 支持原生标记我可以在这里展示一下。标记事物。

语法非常简单：

mark元素被主流浏览器支持，IE支持从IE 9+开始。

6. @supports()

Web 开发中的功能支持确实是一个痛点。CSS3 为我们提供了许多优秀的工具，但我们永远无法确定我们正在使用的酷炫新功能是否能够被不同版本、不同浏览器、不同操作系统、不同设备原生支持。@supports函数的创建就是为了简化这一过程。总而言之，CSS 支持自然的回退机制——如果某些内容无法识别，浏览器就会直接忽略它。我认为这个函数可以让代码更简洁，也更容易构建逻辑块。

此类 CSS 块的示例如下所示：

需要说明的是，这个例子有点不切实际，因为@supports本身并非所有浏览器都支持。所以，实际代码应该是这样的：

所有主流浏览器的现代版本都支持@supports() ，但 IE 不支持。

7.仪表和进度标签

仪表和进度标签是构建进度条和测量可视化的原生方式：

除了外观不同之外，这两个标签之间的区别仅在于语义。规范规定：
progress元素表示任务的完成进度。meter元素
表示已知范围内的标量测量值或分数值；例如磁盘使用情况、查询结果的相关性，或投票人群中选中特定候选人的比例。

不用说，CSS-tricks 上有一篇帖子用meter做了一些很棒的事情。
所有主流浏览器（包括 IE10+）都支持这个标签，并且如果需要的话，还可以提供一个polyfil 文件。

8. 多列元素

Multicolumn 是一组 CSS 属性，它可以轻松地将每个 HTML 元素拆分成列，类似于 Bootstrap 等现代 UI 框架的功能。
请看以下示例：

无需更改任何显示或大小属性，我们只需使用一个属性即可轻松拆分所有内容。该规范还有一些值得一试的实用功能。多列是各种 CSS 属性的代号，其支持情况取决于具体的子集。请查看您需要的can-i-use和 query 属性。

9.图片标签

picture标签解决了无法为不同媒体源设置不同图片源和尺寸的问题。它能够更灵活地处理不同分辨率下不同版本的图片。请查看此示例（这是CharlesKiarie 原创 Codepen的 fork ，版权归他所有）。

如果您将屏幕大小调整为移动尺寸，则可以看到图像源对媒体查询做出响应。所有主流浏览器都支持
图片标签，并且具有适用于旧版本 IE 的polyfill 。

10. Web 组件

纵观整个 Web 和移动应用程序开发栈，HTML 和 JS 是其中在过去五年中创新最为显著的部分。新兴框架的数量和频率都在不断增长。Web Components旨在建立通用的约定和模式，并且看起来它们将会持续发展，并得到业内顶级公司的支持。
如果您错过了，一定要去了解一下并体验一下。

以上是我发现的10个实用且值得分享的HTML5功能。希望您能从中找到一些新奇且实用的功能，并运用到您的工作中。

您仍然需要记住，您需要谨慎使用它们，因为并非所有浏览器都以本机方式支持它们。

希望你玩得开心。
很高兴收到你的反馈。

在Twitter上关注我以获取最新动态！