HTML 5.1 Có Gì Mới?
Cái nhìn nhanh về HTML 5.1
Sự xuất hiện của HTML 5 hai năm về trước là một sự kiện trọng đại của cộng đồng lập trình web. Không chỉ vì đây là một tập hợp tính năng mới ấn tượng, mà còn vì đây là cập nhật lớn đầu tiên đến HTML kể từ HTML 4.01 ra mắt năm 1999. Bạn hẳn vẫn thấy nhiều trang oang oang về hiệu dụng của chuẩn HTML 5 “hiện đại” cho đến ngày hôm nay.
Tuy HTML 5.1 vẫn đang trong quá trình phát triển, W3C đã bắt tay vào bản nháp HTML 5.2 rồi, phiên bản này dự tính sẽ ra mắt cuối năm 2017. Còn hiện tại, sau đây là tổng qua một số tính năng mới thú vị và các cải tiếng được giới thiệu trong 5.1. Hỗ trợ trình duyệt vẫn thiếu cho những tính năng này nhưng chúng tôi sẽ giới thiệu đến các bạn một số trình duyệt để test thử những ví dụ dưới đây.
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.
Sau đây là ví dụ sử dụng đơn giản làm việc được trong FireFox 49, nhưng có vẻ không hoạt động trong Chrome 54.
See the Pen HTML 5.1 menu example by SitePoint (@SitePoint) on CodePen.
Trong trình duyệt được hỗ trợ, context menu đó nên trông như sau:
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>.
Ví dụ sau đã được test trên Firefox và Chrome.
See the Pen HTML 5.1 details and summary demo by SitePoint (@SitePoint) on CodePen.
Bản demo trên trình duyệt được hỗ trợ sẽ trông như sau:
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, week và 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.
Bạn có thể tìm thêm một số ví dụ sống của tất cả những kiểu input này trong CodePen bên dưới. Nó hoạt động trong Chrome những vẫn chưa hoạt động được trên Firefox:
See the Pen HTML 5.1 week, month and datetime inputs by SitePoint (@SitePoint) on CodePen.
Demo trên trong trình duyệt được hỗ trợ sẽ trông như sau:
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.
Thông số hình ảnh srcset
Thuộc tính Image srcset cho phép bạn liệt kê nhiều nguồn hình ảnh thay thế, biến đổi theo mật độ pixel. Việc này cho phép trình duyệt lựa chọn hình ảnh có chất lượng phù hợp với thiết bị của người dùng (được quyết định bới chính mật độ điểm ảnh, mức độ zoom hoặc tốc độ mạng của thiết bị). Ví dụ, bạn sẽ muốn cung cấp hình ảnh có độ phân giải thấp hơn cho người dùng với điện thoại nhỏ và mạng di động chậm hơn.
Thuộc tính srcset chấp nhận danh sách URL hình ảnh được phân biệt bằng dấu phẩy với modifier x của chính nó (giúp miêu tả tỷ lệ pixel, lượng pixel vật lý trong một CSS pixel) phù hợp nhất cho mỗi hình. Ví dụ đơn giản như sau:
1 2 3 4 5 | <img src="images/low-res.jpg" srcset=" images/low-res.jpg 1x, images/high-res.jpg 2x, images/ultra-high-res.jpg 3x" > |
Trong trường hợp này, nếu tỷ lệ pixel của người dùng bằng với 1, thì hình ảnh low-res sẽ được hiển thị, bằng 2, high-res xuất hiện, và bằng 3 trở lên, ultra-high-res sẽ được lựa chọn.
Thay vào đó, bạn có thể lựa chọn hiển thị hình ảnh với các kích thước khác nhau thay vì với một tỷ lệ pixel khác. Bạn có thể thực hiện việc này với modifier w:
1 2 3 4 5 | <span class="token tag"><span class="token punctuation"><</span>img <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>images/low-res.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> images/low-res.jpg 600w, images/high-res.jpg 1000w, images/ultra-high-res.jpg 1400w<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> |
Trong trường hợp này, hình ảnh low-res được xác định với độ rộng 600 pixel, high-res là 1000px và ultra-high-res là 1400px.
Thuộc tính hình ảnh sizes
Bạn sẽ muốn hiển thị hình ảnh khác đi, dựa vào kích thước màn hình của thiết bị. Ví dụ, bạn có thể hiển thị một loạt hình ảnh được chia làm hai cột cho màn hình rộng hoặc chỉ một cột với màn hình hẹp. Bạn có thể làm được như vậy với thuộc tính sizes. Thuộc tính cho phép bạn chuyển độ rộng của màn hình thành khoảng trống phân phối cho hình ảnh và rồi lựa chọn hình ảnh phù hợp bằng thuộc tính srcset. Sau đây là ví dụ:
1 2 3 4 5 | <span class="token tag"><span class="token punctuation"><</span>img <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>images/low-res.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(max-width: 40em) 100vw, 50vw<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>images/low-res.jpg 600w, images/high-res.jpg 1000w, images/ultra-high-res.jpg 1400w<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> |
Thuộc tính sizes xác định độ rộng của hình ảnh làm 50% độ rộng viewport khi chiều rộng viewport lớn hơn 40em, hoặc 100% chiều rộng khi thấp hơn hoặc bằng 40em.
Phần tử picture
Nếu thay đổi kích thước hình ảnh cho mỗi màn hình vẫn chưa đủ, và bạn cần thêm khả năng hiện những hình ảnh hoàn toàn khác nhau, bạn có thể sử dụng phần tử picture. Nó cho phép bạn xác định hình ảnh với nhiều nguồn có các kích thước màn hình khác nhau bằng cách gói <img> của bạn với phần tử <picture> và chỉ định nhiều phần tử <source> con. Phần tử <source> sau đó đóng vai trò nguồn của URLs để tải hình ảnh.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token punctuation"><</span>picture<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>source <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(max-width: 20em)<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> images/small/low-res.jpg 1x, images/small/high-res.jpg 2x, images/small/ultra-high-res.jpg 3x <span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>source <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(max-width: 40em)<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> images/large/low-res.jpg 1x, images/large/high-res.jpg 2x, images/large/ultra-high-res.jpg 3x <span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>img <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>images/large/low-res.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>picture<span class="token punctuation">></span></span> |
Xác minh Forms với form.reportValidity()
HTML5 định nghĩa method form.checkValidity() cho phép bạn kiểm tra input của một form với trình xác nhận đã định nghĩa và trả kết quả boolean. reportValidity() cũng tương tự, nó cho phép bạn xác nhận form và trả kết quả, nhưng có thêm report lỗi đến người dùng ngay trong trình duyệt. Sau đây là ví dụ CodePen để thể hiện kết quả (đã test trong Firefox và Chrome):
See the Pen HTML 5.1 report validity demo by SitePoint (@SitePoint) on CodePen.
Input “First name” bị đánh dấu error vì input này bắt buộc nhưng lại trống rỗng. Khi hoạt động đúng như mong đợi, bạn sẽ có:
Allowfullscreen cho Frames
Thuộc tính allowfullscreen boolean mới cho frames cho phép bạn điều khiển liệu nội dung có thể thể hiện lên full screen hay không bằng method requestFullscreen().
Spellchecking (kiểm tra chính tả) với element.forceSpellCheck()
Method element.forceSpellCheck() mới cho phép bạn khích hoạt kiểm tra chính tả trên phần tử text. Đây cũng là tính năng đầu tiên trong danh sách này vẫn chưa dùng được trên bất cứ trình duyệt nào. Có khả năng, tính năng này có thể được sử dụng để thực hiện kiểm tra lỗi chính tả trên các phần tử vẫn chưa được người dùng edit trực tiếp.
Đọc thêm
Đây vẫn chưa phải là danh sách thay đổi đầy đủ trong HTML 5.1. Có rất nhiều thay đổi nhỏ khác cùng những tính năng không được sử dụng bị bỏ đi. Nếu bạn muốn xem thử toàn bộ danh sách thay đổi, hãy đọc phần Changes của thông số. Hiện thời, hãy hy vọng rằng nhà cung cấp trình duyệt sẽ nhanh chóng hỗ trợ những thay đổi mới nhất!
Mặt nào của HTML 5.1 mà bạn thích thú nhất?! Hãy comment bên dưới nhé!
ITZone via sitepoint