HTML 5.2 新特性介绍
本文译自 What’s New in HTML 5.2?
作者 Ire Aderinokun,是一位前端开发者和 UI 设计师。
就在不到一个月之前,HTML 5.2 成为了 W3C 的官方推荐规范(REC),这意味着它得到了来自 W3C 主席及其成员的官方支持,W3C 组织将正式向浏览器厂商和 web 开发者推荐应用这一规范。
在 REC 阶段之前,规范中的每一个新特性都应当已经有了至少两个独立实现。所以对于我们这些 web 开发者来说,现在已经可以开始实际应用这些新特性了。
要了解 HTML 5.2 中的所有变化之处,可以阅读这份官方的文档。在这篇文章里,我会梳理一下我认为我的开发工作影响比较大的变化。
新特性
原生的 <dialog> 元素
在 HTML 5.2 的所有变化里我感到最为激动的就是引入了 <dialog> 元素,实现了浏览器原生的对话框。对话框在 web 开发中非常常见,但是现在每个实现都不太一样。另一方面,实现一个支持无障碍化的对话框很难,实际上,现在 web 上使用的大多数对话框对于视觉障碍人士来说都是难以使用的。
新引入的
首先,使用
<dialog>
<h2>对话框标题</h2>
<p>对话框的内容写在这里</p>
</dialog>
默认情况下,对话框是不可见的,除非你设置了open属性。
<dialog open>
open属性可以通过 HTMLDialogElement上的 show()和close()方法来改变。
<button id="open">打开对话框</button>
<button id="close">关闭对话框</button>
<dialog id="dialog">
<h2>对话框标题</h2>
<p>对话框的内容写在这里</p>
</dialog>
<script>
const dialog = document.getElementById("dialog");
document.getElementById("open").addEventListener("click", () => {
dialog.show();
});
document.getElementById("close").addEventListener("click", () => {
dialog.close();
});
</script>
目前,Chrome 已经支持了 <dialog>
元素,而在 Firefox 中可以通过配置打开这一特性。具体情况可以查看 https://caniuse.com/#feat=dialog。
在 iframe 里使用支付请求 API
支付请求 API 是由浏览器原生提供支付方式,旨在为用户在 web 上进行支付提供一个标准而且一致的方法。它让浏览器提供统一一致的界面来搜集用户的支付信息,而不是让用户填写各个网站自己的支付表单。
在 HTML 5.2 之前,支付请求 API 不能在 iframe 中 使用。这使得那些第三方提供的嵌入式支付解决方案(例如 Stripe、Paystack)完全无法利用这个 API,因为它们的支付接口都是需要在一个 iframe 中进行处理的。
HTML 5.2 为 iframe 引入了一个 allowpaymentrequest
属性,设置这个属性就可以允许 iframe 中使用支付请求 API 了。
<iframe allowpaymentrequest/>
为苹果设备定义不同尺寸的图标
通过在 HTML 文档的头部使用 <linkrel="icon">
,我们可以定义网页的图标。同时,还可以使用 sizes
属性来定义多个不同尺寸的图标。
<link rel="icon" sizes="16x16" href="path/to/icon16.png">
<link rel="icon" sizes="32x32" href="path/to/icon32.png">
虽然这个定义完全是建议性的,但它允许浏览器来自主决定使用哪个图标。尤其是像现在大多数设备的最优图标尺寸都不一样,只有浏览器自己才知道怎样的图标尺寸更为合适。
在 HTML 5.2 以前, sizes
属性仅仅当 link
标签的 rel
属性为 icon
时才视为有效。可是,苹果的 iOS 设备并不支持这种 sizes
属性,它引入了一个私有的 rel 值 apple-touch-icon
,用于定义网页在苹果设备上的图标。
在 HTML 5.2 中,规范的这一限制被去除,当 rel
为 icon
或 apple-touch-icon
时都可以使用 sizes
属性。
新的有效写法
除了引入一些新特性,HTML 5.2 中也把一些之前被规范认为无效的 HTML 写法变成有效。
多个 <main> 元素
<main>
元素用于表达网页的主体内容。对于在多个网页中会反复出现的内容,我们可以把它们放在 header、section 或者别的元素中,但 <main>
元素是被设计用于专门放置页面上特定且唯一的内容的。因此,在 HTML 5.2 之前,规范要求
元素在页面的 DOM 结构中只能出现一次。
可是随着单页应用的流行,我们难以再去坚持这一准则。可以设想会有这样一种情况:DOM 中有需要有多个 <main> 元素,但在同一时间用户只会看到其中一个。
在 HTML 5.2 中,现在只要能保证用户同时只能看到一个 <main>
元素,我们就可以在页面中多次使用这个标签。其它不显示的 <main>
元素必须通过 hidden 属性设置为隐藏。
<main>...</main>
<main hidden>...</main>
<main hidden>...</main>
我们都很清楚利用 CSS 有多种办法可以隐藏元素。可是对于页面上的多个 <main>
元素,我们必须用 hidden 属性将目前不需要显示的元素进行隐藏。任何别的方法,比如 display:none;
或者 visibility:hidden;
,都会被规范认为是无效的。
在 <body> 中定义样式
一般情况下,我们都会使用 <style>
标签来定义内联 CSS,并将其放置在 HTML 文档的 <head>
中。但随着组件化开发的兴起,开发者们开始逐渐倾向于把样式定义和与之相关的 HTML 元素放在一起。
在 HTML 5.2 中,在 <body>
中的任何地方都可以定义 <style>
块,规范现在将其也视为有效。也就是说我们现在可以让样式定义就出现在样式被使用的地方。
<body>
<p>I’m cornflowerblue!</p>
<style>
p { color: cornflowerblue; }
</style>
<p>I’m cornflowerblue!</p>
</body>
可是仍然需要注意的是,从性能角度考虑,样式定义最好还是放在 <head>
中。规范中也提到:
在文档的头部使用样式元素是一种更为可取的做法。在文档体内使用样式可能会导致页面样式重排、触发重新布局或(和)重绘,因此应该谨慎使用这一方式。
还应当注意的是,像在上面这个例子中,样式定义仍然是作用于全局的。在 HTML 文档内出现的样式定义仍然会应用于在其前面的元素之上,这也是它会造成重绘的原因。
在 <Legend> 内使用 h# 标签
<legend>
用于在表单中表示一个 <fieldset>
的标题。在 HTML 5.2 之前, <legend>
中的内容只能使用纯文本,现在我们可以在其中使用 h# 标签。
<fieldset>
<legend><h2>基本信息</h2></legend>
<!-- 基本信息的表单域 -->
</fieldset>
<fieldset>
<legend><h2>联系方式</h2></legend>
<!-- 联系方式的表单域 -->
</fieldset>
当我们想使用 <fieldset>
来为表单中不同部分进行分组时,这一用法非常有用。就像上面这个例子,使用 h# 标签可以让那些依赖于文档大纲视图进行导航的用户更为方便地跳转到这些表单分组区域。
被移除的特性
在 HTML 5.2 中,有些特性被移除了,包括:
keygen:用于为表单生成公钥
menu 和 menuitem:用于创建导航或菜单
新的视为无效的写法
最后,还有一些开发实践被规范认为是无效的。
<p> 元素中不允许包含行内、浮动或者块级元素
在 HTML 5.2 中, <p>
元素只能包含短语内容(译者注:phrasing content,具体解释可参见这里)。下列元素类型不能再被嵌套在一个段落中:
行内块
行内表格
浮动或者定位的块
不再需要严格的 Doctype 声明
我们终于可以和下面这种严格的文档类型说明说再见了:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
转载于:https://www.cnblogs.com/xc0420/p/8336818.html
HTML 5.2 新特性介绍相关推荐
- SAP PI 7.3新特性介绍
PI 7.3新特性介绍 自从SAP TechEd 2010 年在Berlin对PI7.3的新特性作了介绍之后,类似于single Java Stack, central monitoring, ID ...
- Xcode9新特性介绍-中文篇
背景: Xcode 9 新特性介绍: 1.官方原文介绍链接 2.Xcode9 be ta 2 官方下载链接 本文为官方介绍翻译而来,布局排版等都是按照官方布局来的. 与原文相比,排版上基本还是熟悉的配 ...
- Angular8 - 稳定版修改概述(Angular 8的新特性介绍)
Angular 8的新特性介绍 在之前Angular团队发布了8.0.0稳定版.其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能.下面是我对8. ...
- 技术前沿资讯-Apache Flink 1.14 新特性介绍
一.简介 1.14 新版本原本规划有 35 个比较重要的新特性以及优化工作,目前已经有 26 个工作完成:5 个任务不确定是否能准时完成:另外 4 个特性由于时间或者本身设计上的原因,会放到后续版本完 ...
- hadoop3.0新特性介绍
hadoop3.0新特性介绍 1. 基于jdk1.8(最低版本要求) 2. mr采用基于内存的计算,提升性能(快spark 10倍) 3. hdfs 通过最近black块计算,加快数据获取速度(块大小 ...
- chrome 63 android分类,Chrome 63 Beta新特性介绍
原标题:Chrome 63 Beta新特性介绍 除非另外注明,否则,下面介绍的更改均适用于最新 Chrome Beta 渠道版(Android.Chrome 操作系统.Linux.Mac 和 Wind ...
- 蚂蚁金服 SOFAArk 0.6.0 新特性介绍 | 模块化开发容器...
SOFAStack Scalable Open Financial Architecture Stack 是蚂蚁金服自主研发的金融级分布式架构,包含了构建金融级云原生架构所需的各个组件,是在金融场景里 ...
- JDK 9-17 新特性介绍
Java新特性介绍 Java 8是Oracle 公司于 2014 年 3 月 18 日发布的,距离今天已经过了近十年的时间了,但是由于Java 8的稳定和生态完善(目前仍是LTS长期维护版本),依然有 ...
- jdk7和8的一些新特性介绍
社区之星王海庆:速度激情,学习极客 Markdown轻松写博文 微信公众平台开发 天天爱答题 一大波C币袭来 读文章送好书 jdk7和8的一些新特性介绍 更多p ...
- 红旗系统linux2.6.32屏保咋设置,红旗Linux桌面操作系统 V11社区预览版发布,附新特性介绍...
红旗Linux桌面操作系统 V11(英文名称为RedFlag Linux Desktop 11)社区预览版发布了,根据计划,该版本将开放给用户下载试用.以下将介绍它的新特性:良好的硬件兼容.丰富的外设 ...
最新文章
- 使用KNN模型进行多输出分类实战(Multioutput Classification)
- 竞赛报名 | AI时代数据库交互怎么玩?首届中文NL2SQL挑战赛开战
- poj 3608 旋转卡壳求不相交凸包最近距离;
- C语言 | 卡尔曼滤波算法2——算法分析
- mysql中影响数据库性能的因素讲解
- Hibernate-级联操作
- html5+css3实战之-幽灵按钮
- RHEL6 安装ipvsadm-1.26
- Redis应用实践:小红书海量Redis存储之道
- iPhone6分辨率
- java 文档注释生成_Java的文档注释之生成帮助文档的实例
- Linux动态库和静态库
- Codeforces Round 1384
- pass parameters to view(参数视图)
- 深入浅出VA函数的使用技巧
- 华硕路由虚拟服务器设置方法,华硕路由虚拟服务器设置方法
- Json和其序列化和反序列化
- 32句期权交易的浓缩精华
- C语言填空答题考试系统
- gojs不显示图表选中边框