Html 5.2 的簡單介紹及新增元素 <dialog></dialog>

Vsran發表於2018-05-13
HTML

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/>
複製程式碼

Html 5.2 的簡單介紹及新增元素 <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); 
  }
複製程式碼

Html 5.2 的簡單介紹及新增元素 <dialog></dialog>

物件方法

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>

複製程式碼

元素的相容

該元素的目前的相容性並不好。

Html 5.2 的簡單介紹及新增元素 <dialog></dialog>

此外，遮罩層背景的偽類選擇器，在老一點的瀏覽器上並不生效。

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





相關文章