10 tính năng mới của HTML 5.1 & Cách sử dụng chúng IRL

Đặc tả HTML có một đại tu lớn một vài tuần trước khi W3C xuất bản đề xuất HTML 5.1 mới vào tháng 11 năm 2016. Trong bài đăng trên blog gần đây, W3C đã gọi phiên bản chính mới là tiêu chuẩn vàng, vì HTML 5.1 cung cấp cho chúng ta những cách mới về cách chúng ta có thể sử dụng HTML để tạo ra trải nghiệm web linh hoạt hơn.

Trong bài viết này, chúng ta sẽ xem xét các tính năng mới mà bạn có thể sử dụng không chạm vào JavaScript, tuy nhiên những cải tiến của nền JavaScript cũng rất đáng chú ý, như bạn có thể thấy nó trong nhật ký thay đổi chính thức.

Lưu ý rằng hiện tại không phải tất cả các trình duyệt đều 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 trong sản xuất. Nếu bạn quan tâm đến phát triển hơn nữa của tiêu chuẩn HTML, bạn cũng có thể xem bản thảo làm việc của HTML 5.2.

1. Xác định nhiều tài nguyên hình ảnh cho thiết kế đáp ứng

Trong HTML 5.1, bạn có thể sử dụng gắn thẻ cùng với srcset thuộc tính để thực hiện lựa chọn hình ảnh đáp ứng khả thi. Các thẻ đại diện cho một thùng chứa hình ảnh cho phép các nhà phát triển khai báo tài nguyên hình ảnh khác nhau để thích ứng với UAKích thước khung nhìn, mật độ pixel màn hình, loại màn hình và các tham số khác được sử dụng trong thiết kế đáp ứng.

Các Bản thân thẻ không hiển thị bất cứ thứ gì, nó chỉ hoạt động như bối cảnh cho nhiều tài nguyên hình ảnh. Bạn cần khai báo tài nguyên hình ảnh mặc định như giá trị của src thuộc tính của và thẻ tài nguyên hình ảnh thay thế đi trong srcset thuộc tính của và yếu tố.

Mã ví dụ:

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

Với

và

thẻ, bạn có thể thêm thông tin mở rộng đến một phần nội dung. Thông tin thêm không được hiển thị theo mặc định, nhưng nếu người dùng quan tâm, họ có tùy chọn để xem. Trong mã của bạn, bạn phải đặt

gắn thẻ bên trong

. Sau

gắn thẻ bạn có thể thêm thông tin bạn muốn trốn.

Mã ví dụ:

 
 
Thông báo lỗi
 
 
Chúng tôi không thể hoàn tất tải xuống video này.
 
 
Tên tệp:
yourfile.mp4
 
Kích thước tập tin:
100 MB
 
Thời lượng:
00:05:27
 
 
 
 

Đây là cách ví dụ mã này trông giống như trong Firefox 50.0.2:

3. Thêm chức năng vào menu ngữ cảnh của trình duyệt

Với yếu tố và nó loại = "bối cảnh" thuộc tính, bạn có thể thêm chức năng tùy chỉnh để menu ngữ cảnh của trình duyệt. Bạn cần phân công là yếu tố con của

nhãn. Các ID của yếu tố cần phải mang cùng giá trị như trình đơn ngữ cảnh thuộc tính của phần tử mà chúng tôi muốn thêm menu ngữ cảnh vào (đó là phần tử trong ví dụ dưới đây).

Mã ví dụ:

Nhấp chuột phải vào tôi

Các thẻ có thể có ba loại khác nhau, "hộp kiểm", "chỉ huy" (bạn cần thêm một hành động với JavaScript) và radio. Có thể thêm nhiều mục menu vào menu ngữ cảnh, tuy nhiên hỗ trợ trình duyệt cho tính năng này là chưa tốt lắm. Chrome 54 không hỗ trợ nó và Firefox 50 chỉ cho phép sự hiện diện của một menu ngữ cảnh bổ sung. Dưới đây bạn có thể thấy cách ví dụ mã hoạt động trong Firefox 50.

4. Đầu và chân tổ

HTML 5.1 cho phép bạn tổ và chân nếu mỗi cấp là chứa trong phần nội dung. Ghi chú bên dưới là ảnh chụp màn hình từ các tài liệu W3C và tư vấn cho các nhà phát triển về cách lồng tiêu đề và chân trang phù hợp.

Tính năng này có thể hữu ích nếu bạn muốn thêm xây dựng các tiêu đề cho các yếu tố phân chia ngữ nghĩa, nhu la

và

. Ví dụ mã bên dưới tạo một thanh bên trong tiêu đề,