10 tính năng mới của HTML 5.1 và ứng dụng trong thực tế
Những đặc điểm của HTML có sự thay đổi lớn trong vài năm trở lại đây khi W3C tung ra một số khuyến nghị mới cho HTML 5.1 vào tháng 11/2016. Trong một số bài viết gần đây của mình, W3C gọi những sự thay đổi này dưới cái tên tiêu chuẩn vàng, bởi HTML 5.1 cung cấp cho người dùng những điểm mới trong cách sử dụng nhằm tạo ra những trải nghiệm web linh động hơn.
Trong bài viết này, chúng ta sẽ điểm qua những tính năng mới mà người dùng có thể sử dụng không cần đến sự trợ giúp của JavaScript. Tuy nhiên không thể phủ nhận rằng những sự cải tiến của JavaScript nói riêng cũng thật sự rất ấn tượng.
Hãy chú ý rằng trong giai đoạn hiện tại, không phải bất cứ trình duyệt nào cũng hỗ trợ tất cả những tính năng trên, vì vậy đừng quên kiểm tra xem liệu trình duyệt của bạn có tương thích với chúng không trước khi bắt đầu quá trình sử dụng.
1. Lựa chọn nhiều nguồn ảnh cho responsive design
Trong HTML 5.1, bạn hoàn toàn có thể sử dụng tag <picture> cùng với srcset để tạo ra responsive image. Tag <picture> giống như một image container cho phép developer quyết định những nguồn ảnh khác nhau nhằm tương thích với kích cỡ viewport của UA.
Tag <picture> sẽ không có tác dụng đó nếu đứng một mình vì các chức năng của thẻ này tương tự như context cho nhiều nguồn hình ảnh. Người dùng cần lựa chọn nguồn ảnh mặc định như một giá trị của src trong tag <img>, và những nguồn ảnh thay thể sẽ đi kèm với srcset trong tag <img> nhưng kèm với <source>
Ví dụ:
|
2. Hiện hoặc ẩn thông tin thêm
Với tag <details> và <summary>, người dùng có thể thêm những thông tin mở rộng như một phần của nội dung. Những thông tin thêm này sẽ không được hiển thị mặc định mà chỉ xuất hiện khi người xem lựa chọn mở chúng. Trong đoạn code, bạn sẽ phải đặt thẻ <summary> bên trong thẻ <details>. Sau thẻ <summary> , bạn có thể bắt đầu điền vào những thông tin mà bạn muốn ẩn.
Ví dụ:
|
Trong Firefox 50.0.2, bạn sẽ thấy đoạn code này hiển thị dưới dạng như sau
3. Thêm tính năng cho context menu của trình duyệt
Với <menuitem> và type=”context”, bạn có thể thêm những tính năng tùy chọn vào context menu của trình duyệt. Bạn cần phải chỉ định <menuitem> như phần tử con của thẻ <menu>. Phần id nằm trong <menu> cần phải có cùng giá trị với contextmenu của phần tử mà chúng ta muốn thêm vào context menu ( tương tự như <button> trong ví dụ dưới đây)
Ví dụ:
|
Tag <menuitem> có thể xuất hiện dưới 3 dạng, , “checkbox”, “command” (sử dụng cho những thao tác kết hợp với JavaScript), and radio. Việc thêm nhiều hơn 1 mục trong menu vào context menu là điều hoàn toàn có thể, tuy nhiên những trình duyệt hiện tại vẫn chưa hoàn toàn hỗ trợ tính năng này. Cụ thể, Chrome 54 không hỗ trợ còn Firefox 50 chỉ cho phép xuất hiện thêm 1 context menu. Bạn sẽ thấy cách mà đoạn code này hoạt động trong Firefox 50 khi nhìn vào ví dụ dưới đây.
4. Lồng headers và footers vào nhau
HTML 5.1 cho phép bạn lồng headers và footers vào nhau nếu như mỗi level đều nằm trong phần nội dung. Ghi chú dưới đây là ảnh chụp màn hình trong một văn bản của W3C nhằm hướng dẫn các developer cách sử dụng tính năng này sao cho chính xác nhất.
Cụ thể, văn bản trên nói rằng trong những trường hợp developer muốn lồng header hoặc footer vào một header khác. Phần tử <header> chỉ có thể chứa trong <header> hoặc <footer> nếu như bản thân chúng đều nằm trong phần nội dung.
Tính năng này sẽ rất có ích nếu như bạn muốn thêm elaborated header vào semantic sectioning elements, ví dụ như <article> và <section>. Đoạn code dưới đây sẽ tạo ra một sidebar bên trong header, thẻ <aside> đóng vai trò như một sectioning element, đồng thời thêm vào những thông tin về tác giả bên trong nó. Thanh sidebar bên trong header có một header riêng của nó, với một subtitle và thông tin của tác giả.
Ví dụ:
|
5. Sử dụng cryptographic nonces cho styles và scripts
Với HTML 5.1, bạn có thể thêm cryptographic nonces vào trong styles and scripts. Bạn có thể sử dụng thuộc tính nonce cùng với <script> và phần tử <style>. Một cryptographic nonce là một con số được tạo ra ngẫu nhiên và chỉ có thể sử dụng 1 lần duy nhất, con số này sẽ được tái tạo mỗi khi có page request. Nonce có thể được sử dụng thông qua Chính sách bảo mật nội dung của website để quyết định script hoặc style có nên được áp dụng vào trang không. Bạn có thể đọc thêm cách để sử dụng nonces và CSP sao cho chính xác trong Google Developers’ Web Fundamentals.
Dưới đây là một đoạn code đơn giản để giới thiệu cách sử dụng thuộc tính nonce, tuy nhiên nên nhớ rằng trong thực tế, giá trị của nó sẽ không do ta quyết định mà được tạo ra ngẫu nhiên..
Ví dụ:
|
6. Tạo liên kết ngược
Tính năng này xuất hiện trong HTML 4 nhưng đã bị bỏ đi khi HTML 5 xuất hiện. Tuy nhiên bây giờ, developer có thể thêm thuộc tính rev vào đường dẫn một lần nữa cho phần tử <link> và <a>. Thuộc tính rev có chức năng trái ngược với rel khi nó có thể tạo ra một mối quan hệ theo chiều ngược lại giữa document hiện tại và document được liên kết.
Ví dụ:
|
Thuộc tính rev nằm trong số những tính năng chính của HTML 5.1 nhằm hỗ trợ RDFa, một structured data markup format được sử dụng rộng rãi và mở rộng cho ngôn ngữ HTML
7. Sử dụng hình ảnh zero-width
HTML 5.1 giúp developer có thể tạo ra create zero-width images bằng cách cho phép họ đặt thuộc tính width ở giá trị bằng 0. Tính năng này có thể hữu ích nếu muốn thêm vào những hình ảnh mà bạn không muốn chúng hiển thị trên màn hình của người xem (những hình ảnh tracking). Zero-width images nên được sử dụng cùng với thuộc tính alt rỗng.
Ví dụ:
|
8. Tách biệt những context của trình duyệt nhằm ngăn chặn phishing attack
Sử dụng cùng một đường dẫn trên website của bạn có thể dẫn đến một vài tình huống rắc rối. Nguyên nhân dẫn đến tình huống này nằm ở vùng target=”_blank” exploit và có thể dẫn đến việc mở ra 1 trang lừa đảo. Các bạn có thể tìm hiểu kĩ hơn về phishing attack tại đây
HTML 5.1 đã tối ưu hóa việc sử dụng thuộc tính rel=”noopener” nhằm tách biệt những context trong trình duyệt và từ đó loại bỏ vấn đề này. Bạn có thể sử dụng rel=”noopener” trong <a> và <area> .
Ví dụ:
|
9. Tạo một lựa chọn trống
HTML 5.1 cho phép các developer tạo ra một phần tử <option> rỗng. Thẻ <option> có thể là phần tử con của <select>, <optgroup>, hoặc <datalist>. Khả năng tạo ra một <option> rỗng sẽ rất có ích nếu như bạn không muốn gợi ý cho người xem bất cứ lựa chọn nào, và nó cũng sẽ có ích khi bạn muốn thiết kế theo phong cách thân thiện với người dùng.
10. Xử lý những phần chú thích một cách linh hoạt hơn
Thẻ <figcaption> thể hiện cho một chú thích thuộc phần tử <figure>, bao gồm những nội dung truyền tải thông qua thị giác như ảnh chụp, biểu đồ hay hình minh họa. Trước đây, thẻ <figcaption> chỉ có thể được sử dụng như phần tử con đầu tiên hoặc cuối cùng của phần tử <figure>. HTML 5.1 đã nới lỏng quy luật này, và hiện tại <figcaption> có thể xuất hiện ở bất cứ đâu trong vùng <figure>
ITZone via Hongkiat