Chắc hẳn chúng ta đều biết rằng phiên bản HTML 5 đã được tung ra cách đây hai năm với những tính năng mới đầy ấn tượng. Và đây cũng là bản cấp nhật lớn đầu tiên của HTML kể từ khi ra mắt HTML 4.01 vào năm 1999.
Mặc dù, HTML 5.1 vẫn đang trong quá trình phát triển, W3C đã bắt đầu phác thảo về HTML 5.2 mà dự kiến sẽ được phát hành vào cuối năm 2017. Trong khuôn khổ bài viết hôm nay chúng tôi xin giới thiệu đến các bạn một số tính năng mới sẽ có trong phiên bản HTML 5.1.
1. Context Menus dùng phần tử menu và menuitems
Bản nháp của 5.1 có giới thiệu hai kiểu phần tử menu khác nhau: context và toolbar. Cái đầu được sử dụng để mở rộng nội dung (context) đã có trên menu, thường được hiển thị bằng cách click phải lên page, và cái sau để xác định các thành tố trong menu trơn. Trong quá trình phát triển, toolbar bị drop, nhưng menu context vẫn giữ nguyên.
Bạn có thể sử dụng tag <menu> để xác định menu gồm một hoạch vài phần tử <menuitem> và sau đó ràng buộc nó với bất cứ phần tử nào bằng thuộc tính contextmenu.
Mỗi <menuitem> có thể mang một trong ba kiểu sau:
• checkbox – cho phép bạn lựa chọn hoặc bỏ lựa chọn một option;
• command – cho phép bạn thực thi hoạt động khi click;
• radio – cho phép bạn lựa chọn một option từ một nhóm.
Trong trình duyệt được hỗ trợ, context menu đó nên trông như sau:
2. Detail và Summary Elements
Các phần tử <details> và <summary> cho phép khả năng hiện và ẩn một block thông tin bổ sung bằng cách click vào một phần tử. Kết quả này từng được thực hiện với JavaScript, và hiện nay đã có thể đạt được thông qua việc sử dụng phần tử <details> với phần tử <summary> bên trong. Click vào phần tóm tắt sẽ toggle hiện ẩn các nội dung khác khỏi phần tử <details>.
Bản demo trên trình duyệt được hỗ trợ sẽ trông như sau:
3. Nhiều kiểu input hơn — month, week và datetime-local
Tập hợp kiểu nhập liệu đã được mở rộng với thêm ba kiểu nhập liệu nữa: month, weekvà datetime-local.
Hai kiểu nhập liệu đầu tiên bên trên cho phép bạn lựa chọn một tuần hoặc một tháng. Trong Chrome, cả hai kiểu được render dưới dạng lịch sổ xuống, cho phép bạn lựa chọn một tháng nhất định trong năm hoặc một tuần trong tháng. Khi bạn truy cập giá trị từ JavaScript bạn sẽ nhận một string trông khá giống như sau: “2016-W43” cho input week và “2016-10” cho input month.
Mới đầu, bản nháp của 5. giới thiệu hai cách nhập ngày-giờ — datetime và datetime-local. Điểm khác biệt là datetime-local luôn luôn chỉ định thời gian trong múi giờ của người dùng, trong khi input datatime sẽ cho phép bạn lựa chọn một múi giờ khác. Trong quá trình phát triển, kiểu datetime bị drop và giờ chỉ còn datetime-local mà thôi. Input atetime-local gồm hai phần — phần ngày, có thể được lựa chọn tương tự như input week hoặc month, và phần thời gian, có thể được nhập vào độc lập.
Demo trên trong trình duyệt được hỗ trợ sẽ trông như sau:
4. Responsive Images
HTML 5.1 gồm nhiều tính năng giúp thêm responsive images mà không phải dùng đến CSS. Mỗi tính năng này đều có trường hợp sử dụng riêng.