文章彙整

HTML5.2 的到來 (2) – 新的有效與無效實踐篇

Astral WebBy Astral Web 4 years agoNo Comments
首頁  /  網站技術與設計  /  前端開發  /  HTML5.2 的到來 (2) – 新的有效與無效實踐篇

在上一篇我們大致介紹 <dialog> 標籤的使用與操作方式(HTML5.2 的到來 – 迎接新的功能 <dialog> 篇)。除了新的標籤外,HTML 5.2 也將一些之前認定為無效的 HTML 寫法改為有效!
 

1.單頁面可使用多個 <main> 標籤

<main> 標籤代表網頁的主要內容。雖然不同網頁的重複內容可以放在 <header>  、<section> 或者其它標籤中,但 <main> 標籤的用意是為了頁面上的特定內容而保留。因此在 HTML 5.2 之前,<main> 標籤在 DOM 中必須唯一才能使頁面有效。

而現在,隨著單頁面應用 (SinglePage Web Application,SPA) 的普及,使得這一特性已經不符合當下的實景,所以在 HTML5.2 中,頁面中同時出現多個 <main> 標籤是被允許的,只要在同一時間内,只有一個 <main> 標籤是對外顯示,其餘必須使用 hidden 屬性進行隱藏。

<main>...</main>


<main hidden>...</main>

<main hidden>...</main>

其中唯一要注意的一點是不能使用 CSS 語法隱藏 <main> 標籤,例如 display: none;  visibility: hidden;  opacity: 0; 都是無效的!只能透過 hidden 屬性才行。
 

2.可在 <body> 中放入 <style> 樣式

一般來說,CSS 樣式是放置在HTML 文件的 <head> 中。隨著元件化開發的流行,開發者發現編寫 style 放置與其相關的 html 中更加有益,因此在 HTML 5.2 之前早已有開發者將 <style> 放入 <body> 內,但是直到 HTML 5.2 才被 W3C 定義為有效寫法。不過在此還是要強調 由於效能問題,樣式還是應當優先考慮放在 <head> 中 。

<body>


   <header>
       <p>Will be green</p>
   </header>


   <style>
       p { color:  green; }
   </style>

   <main>
       <p>Will be  green</p>
   </main>

   <p>Will be  green</p>


</body>

另外需要特別注意的是 <style> 內的樣式並不是局部性的,如同上述的例子,所有 <p> 標籤內的文字將呈現綠色,即使有些 <p> 標籤 置於 <main> 、 <header> 標籤中。因此在文件的 body 中使用樣式可能導致重複定義樣式,觸發重佈局、導致重繪,需要小心使用。
 

3.<legend> 標籤內可以使用標題標籤

在表單中, <legend> 標籤表示 <fieldset> 表單區域中的標題。在 HTML 5.2 前,<legend> 標籤的內容必須為純文字。而現在,它可以包含標題標籤 <h1> 、 <h2> … 。

<fieldset>  
   <legend><h2>Credit card information</h2></legend>
   <!-- form fields -->
</fieldset>  


<fieldset>  
   <legend><h2>Delivery information</h2></legend>
   <!-- form fields -->
</fieldset>

 

4.移除 <menu> 標籤

目前並沒有清楚指出移除 <menu> 標籤的原因,不過有可能是與 <nav> 標籤作用相似,因此未來各個瀏覽器將停止支援 <menu> 標籤,建議將現有網頁的 <menu> 標籤全面移除,並使用 <nav> 標籤。
 

5.不再支援嚴格文件型別(Strict Doctypes)

廢棄嚴格文件型別!

<!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">

 

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  前端開發網站技術與設計

留下回應

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