HTML5.2 的到來 – 迎接新的功能

By Sabina 2 weeks agoNo Comments
首頁  /  網站設計與開發  /  HTML5.2 的到來 – 迎接新的功能

2017年12月14日,W3C(World Wide Web Consortium)發布 HTML 5.2 正式標準版,取代 HTML 5.1 成為官方推薦版本。HTML5.2 是對 HTML5 規範的第二次重大修訂,它遵循了 2014年 W3C 所承诺的大致每年公布一次版本修訂。本次更動中包括大量的清理和錯誤修復、主要的安全更新、其他委員會的進展整合以及其他用以保持規範以符合最新網路廣泛使用方式之更新。

 

下面將部分主要的更新做簡要的介绍,全部的更新可以直接閱讀 W3C 上的英文版https://www.w3.org/TR/html52/changes.html

 

新增原生的 <dialog> 標籤

在 HTML5.2 之前,對話框在網頁上已經非常流行,但因為未统一標準化,每個瀏覽器的實現或多或少都存在著差異性。另一方面,執行一個支持無障礙化的對話框是有難度的,實際上,現在網路上使用的大多數對話框對於視覺障礙人士來說大多難以使用。而 HTML5.2 引入 <dialog> 標籤的目標就是要改變此一現狀!

 

如何使用 <dialog> 標籤

基本的彈窗對話框標記

<dialog open>
 Hello This is a new  Dialog Tag!
</dialog>

Open 屬性:使對話框默認打開,若未使用,除非利用 JavaSript ,整個對話框將隱藏。

在添加樣式之前,對話框渲染如下圖所示:

由圖中可知它在頁面中採絕對定位,因此對話框會出現在其他內容前面,並且水平居中。默認情況下,和內容等寬。

 

使用 JavaScript 基本操作

JavaScript 有幾個方法和屬性可以方便地處理 <dialog> 標籤。最需要的兩個方法是 showModal() 和 close() 。

 

const modal = document.querySelector('dialog');

// 使對話框出現(添加 `open` 屬性)
modal.showModal();

// 隱藏對話框(移除 `open` 屬性)
modal.close();

 

showModal():使用此方法時和 open 屬性不能同時並存,以showModal() 打開對話框時,會出現與 open 不同的效果。

 

 

最大的不同在於頁面會添加一層背景( background: rgba(0, 0, 0, 0.1) ),阻止用户與對話框之外的內容交互。位置的呈現也是採絕對定位,除了水平置中,垂直也相對置中。按 Esc 鍵則會關閉對話框!

 

close():也可以提供一個關閉按鈕來觸發 close()!

show():也會讓對話框出現,但不會伴隨背景層。用户仍可以和對話框之外的可見的元素進行交互。

 

支持

目前,只有 Chrome 支持 <dialog> , Firefox 需要在 about:config 裡允許 dom.dialog_element.enabled 才能正常使用。

那在下一篇我們將會介紹其他重要的 HTML5.2 更新!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。