Html 5.2 的简单介绍及新增元素 <dialog></dialog>

易栏子话
1,304 阅读4分钟

html 5.2 已经于2017年12月 14 日发布, 以下是对html5.2的简单的介绍（注：本文笼统地整理了一部分Html5.2的改动，如有错误之处，敬请指正）。

进行的改动

  • 从2016年1月12开始的所有更改细节都可以到Github上查看。不过这次改动很明显的是降低了商务应用的和风险以及提高残障人士的用户体验。

新增的特性

  • <dialog>元素
  • 与Es6 的模块系统进行整合
  • 更新了ARIA使用参考至[wai-aria-1.1]（提高新特性学习的简易型）
  • 处于资源安全策略<link>标签新增了nonce属性
  • <iframe>标签新增allowpaymentrequest属性，sandbox属性新增值allow-presentatioin

  • <link/> 标签新增nonce属性，新增类型noreferrer，原有的rel属性新增值canonical以及apple-touch-icon
  • 新增三个方法
    1.  registerContentHandler()
    2.  isContentHandlerRegistered() 
    3. isProtocolHandlerRegistered()
  • 所有的html元素提供可计算的innerText属性
  • 为MP4格式的文件定义了about:html-kind URL路径
  • 整合了[CSP3] “出于安全策略元素是否应该事先被阻塞”

移除的特性

  • <keygen> <menu> <menuitem> 元素
  • <input/>元素的默认属性以及dropzone属性
  • showModalDialog 方法
  •  Plugin API

修复的bug以及改良适应性

  • 阻止在无网络情况下请求媒体资源时对加载事件的延迟
  • 更新了<summary>的渲染机制
  • HashChangeEvent 的URL使用USString 替代DomString
  • URL被视作独立的资源
  • 部分原本可以使用的结构现在已经不合法
    1. <body>标签内包含<style>标签
    2. <div>标签作为<dl>标签的子元素
    3. 空的<option>作为<datalist>的子元素
  • 部分不支持的结构现在都可以使用
    1. 行内块，行内表格，浮动和定位的会计元素都可以作为<p>标签的子元素

当然，以上只是html5.2的一部分内容。其中最让我感兴趣的是新增的<dialog>元素，这个元素的出现，解决了开发过程中的很多问题，尤其是弹出框的实现，可以大大提高开发效率。

元素的简单介绍

<dialog>是个块级元素，使用起来非常简单。

<dialog>
 这就是个简单的dialog元素
<dialog/>

当然，这段代码运行的时候，在浏览器界面上什么也看不到，因为<dialog>元素默认是隐藏得，必须为它加上open属性，那么就可以清楚地看到一个弹窗了。

<dialog open>
 这就是个可见的简单的dialog元素
<dialog/>


<dialog>元素的默认背景是完全透明的白色背景，其中的样式可以进行修改，让弹出框更美观。

 dialog{           
   width: 400px;          
   height:300px;         
   padding: 0;        
   text-align: center;   
   background: rgba(136, 201, 231, 0.3);   
   color:rgb(6, 136, 243);       
   border:1px dashed #ff3039; 
  }
  dialog::backdrop {        
    /* 弹窗的遮罩层 */  
    background-color: rgba(0, 0, 0, 0.4); 
  }


对象方法

javascript提供了几个方法操作<dialog>元素：

  • close() 关闭对话
  • show() 显示对话
  • showModal() 显示对话，并使其成为 top-most 型对话(即<dialog>的层级最高)。

其中用的比较多的是showModal() 和 close()。

<style>       
 dialog{
   width: 400px; 
   height:300px;            
   padding: 0;            
   text-align: center;            
   background: rgba(136, 201, 231, 0.3);            
   color:rgb(6, 136, 243);            
   border:1px dashed #ff3039;        
}        
p{            
   width: 400px;          
   height:400px;            
   background: #ff3;            
   position: absolute;            
   z-index: 999;      
 }
</style>

<body>    
   <p>p标签</p>
    
   <dialog >            
     这就是个可见的简单的dialog元素            
     <button>关闭弹窗</button>    
   </dialog>
</body>

<script>    
var p = document.querySelector('p');    
var modal = document.querySelector('dialog');    
var btn = document.querySelector('button');
p.onclick = function(){        
modal.showModal(); //为<dialog>元素增加open属性    
}

btn.onclick = function(){

        modal.close();//为<dialog>元素移除open属性
        //close()方法允许传入一个返回值，在弹出框关闭的时候触发
        //modal.close('返回值');        
        // console.log('returnValue',modal.returnValue);            
}
注：无法通过p元素触发modal对象的close事件，因为此时<dialog>元素的层级最高，简单地说，
如果不是<dialog>元素本身或者其子级或者后代元素，是无法触发其任何事件的。当然点击通过esc键
也可以关闭弹窗。
</script>

元素的兼容

该元素的目前的兼容性并不好。


此外，遮罩层背景的伪类选择器，在老一点的浏览器上并不生效。

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}
/*兼容老版本的浏览器*/
dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

总的来说，当各浏览器都支持<dialog>元素的时候，工作开发的效率又可以有很大的提高，很期待！

参考：

[1] w3cSchool HTML5.2

[2] Meet the New Dialog Element HTML5.2





avatar
文章
阅读
粉丝