Những tính năng mới của html 5.1 (phần 1)

Những tính năng của HTML5 có sự thay đổi lớn khi W3C công bố phiên bản mới vào tháng 5 năm 2016. Trong bài viết mới đây trên blog, W3C gọi nó là tiêu chuẩn vàng. HTML 5.1 đưa ra những tính năng mới giúp tăng trải nghiệm trên website nhiều hơn phiên bản cũ.

Trong bài viết này, chúng ta sẽ có một cái nhìn chi tiết về các tính năng mới của HTML 5.1, bạn có thể sử dụng những tính năng này mà không cần dùng tới JavaScript.

Lưu ý rằng hiện nay không phải tất cả các trình duyệt hỗ trợ tất cả các tính năng này, vì vậy đừng quên kiểm tra hỗ trợ trình duyệt trước khi bạn sử dụng chúng.

1.Định nghĩa nhiều mã nguồn cho ảnh trong thiết kế responsive

Trong HTML 5.1, bạn có thể sử dụng thẻ <picture> cùng với các thuộc tính srcset để tạo vùng chọn hình ảnh đáp ứng tốt nhu cầu của mình. Thẻ <picture> đại diện cho một container hình ảnh, cho phép các nhà phát triển khai báo nguồn hình ảnh khác nhau để thích ứng với kích thước của khung nhìn, mật độ điểm ảnh màn hình, loại màn hình, và các thông số khác được sử dụng trong thiết kế responsive.

<picture>
  <source srcset="mobile.jpg, mobile-hd.jpg 2x"
      media="(max-awidth: 360px)">
  <source srcset="large.jpg, large-hd.jpg 2x"
      media="(min-awidth: 1920px)">
  <img src="default.jpg" srcset="default-hd.jpg 2x"
      alt="your image">
</picture>

2.Hiển thị hoặc ẩn thông tin

Với thẻ <details> và thẻ <summary>, bạn có thể thêm thông tin mở rộng cho một đoạn nội dung. Các thông tin thêm không được hiển thị mặc định, nhưng nếu người dùng quan tâm, họ có tùy chọn để có thể xem nó. Trong code của bạn, bạn có cần phải đặt thẻ <summary> trong thẻ <details>. Trong thẻ <summary> bạn có thể thêm các thông tin bạn muốn ẩn ban đầu.

<section>
  <h2>Error Message</h2>
  <details>
      <summary>We couldn't finish downloading this video.</summary>
      <dl>
        <dt>File name:</dt><dd>yourfile.mp4</dd>
        <dt>File size:</dt><dd>100 MB</dd>
        <dt>Duration:</dt><dd>00:05:27</dd>
      </dl>
  </details>
</section>

3.Thêm menu khi click chuột phải trình duyệt

Với thẻ <menuitem> và type = "context" của nó, bạn có thể thêm chức năng tùy chỉnh vào menu context của trình duyệt. Bạn cần phải gán thẻ <menuitem> là phần tử con của thẻ <menu>. Các id của thẻ <menu> yếu tố cần để thực hiện cùng một giá trị như là thuộc tính ContextMenu của các yếu tố mà chúng ta muốn thêm vào menu context.

<button contextmenu="rightclickmenu">Right click me</button>
<menu type="context" id="rightclickmenu">
    <menuitem type="checkbox" label="I ♥ HTML5.1.">
</menu>

4.Lồng header và footer

HTML 5.1 cho phép lồng header hay footer miễn trong mỗi 1 cấp có nội dung.

 <article>
  <header>
    <h1>Article Title</h1>
    <aside>
      <header>
        <h2>About the author</h2>
        <p><a href="#">Email</a><a href="#">Twitter</a></p>
      </header>
      <img src="photo.jpg" alt="Author photo">
      <p>Author bio ... </p>
    </aside>
  </header>
  <p>Article intro</p>
  <p>Other paragraphs ...</p>
</article>

5. Sử dụng cryptographic nonces cho styles & scripts

Với HTML 5.1, bạn có thể thêm nonces cryptographic để style và scripts. Bạn có thể sử dụng thuộc tính nonce trong <script> và <style>. Một nonce cryptographic là một số ngẫu nhiên tạo ra có thể được sử dụng một lần, và phải được tái sử dụng. Một nonce có thể được sử dụng bởi các chính sách bảo mật nội dung của một trang web để quyết định nếu script hay style nào đó phải được áp dụng trên trang. Trong Web cơ bản phát triển của Google 'bạn có thể đọc thêm về việc sử dụng thích hợp của nonces và CSP.

<script nonce='adfjaf8eda64U7'>
  // some JavaScript
</script>

Còn tiếp...