前言
以后可能要改叫HTML5.2工程师了,今日早读文章由
lsvih翻译授权分享。正文从这开始~
就在不到一个月前,HTML5.2正式成为了W3C的推荐标准(REC)。当一个规范到达REC阶段,就意味着它已经正式得到了W3C成员和理事长的认可。并且W3C将正式推荐浏览器厂商部署、web开发者实现此规范。
在REC阶段有个原则叫做“任何新事物都至少要有两种独立的实现”,这对于我们web开发者来说是一个实践新特性的绝佳机会。
在HTML5.2中有一些添加和删除,具体改变可以参考官方的HTML5.2变动内容网页。本文将介绍一些我认为与我的开发有关的改动。
新特性原生的dialog元素在HTML5.2的所有改动中,最让我激动的就是关于dialog元素这个原生对话框的介绍。在web中,对话框比比皆是,但是它们的实现方式都各有不同。对话框很难实现可访问性,这导致大多数的对话框对那些不方便以视觉方式访问网页的用户来说都是不可用的。
新的dialog元素旨在改变这种状况,它提供了一种简单的方式来实现模态对话框。之后我会单独写一篇文章专门介绍这个元素的工作方式,在此先简单介绍一下。
由一个dialog元素创建对话框:
dialogh2DialogTitle/h2pDialogcontentandotherstuffwillgohere/p/dialog
默认情况下,对话框会在视图中(以及DOM访问中)隐藏,只有设置open属性后,对话框才会显示。
dialogopen
open属性可以通过调用show()与close()方法开启或关闭,任何HTMLDialogElement都可以调用这两个方法。
buttonid="open"OpenDialog/buttonbuttonid="close"CloseDialog/buttondialogid="dialog"h2DialogTitle/h2pDialogcontentandotherstuffwillgohere/p/dialogscriptconstdialog=document.getElementById("dialog");document.getElementById("open").addEventListener("click",()={dialog.show();});document.getElementById("close").addEventListener("click",()={dialog.close();});/script
目前,Chrome浏览器已经支持dialog元素,Firefox也即将支持(behindaflag)。
上图为caniuse.