Những điểm mới của HTML 5.1 (Phần 1)

HTML 5.1 được xuất bản vào ngày 21 tháng 6 năm 2016, với sự cải tiến so với người anh em tiền nhiệm trước đó là HTML 5, HTML 5.1 trong tương lai sẽ trở thành một công cụ hữu ích cho các nhà phát triển web, tuy nhiên tại thời điểm hiện tại, các tính năng mới của HTML 5.1 chưa được hỗ trợ đầy đủ trên tất cả các Browser. Trong bài viết hôm nay chúng ta sẽ tìm hiểu một số tính năng mới của HTML 5.1 này nhé:

Contextmenu

• Trình duyệt hỗ trợ: firefox
• Sử dụng thẻ <menu> chứa nhiều <menuitem>
• Mỗi menuitem có thể là 1 trong các kiểu: checkbox: chọn hay bỏ 1 option radio: chọn 1 option trong 1 nhóm command: xử lý 1 action onclick
• So với HTML5: tính năng thêm mới
• Bị xoá ở phiên bản HTML5.2
• Code (sử dụng PugJs):

p(contextmenu="popup-menu") Right click on this text
menu#popup-menu(type="context")
  menuitem(type="checkbox") Checkbox
  menuitem(type="radio") Radio
  menuitem(type="radio") Radio
  menuitem(type="command", onclick="alert('bạn vừa chọn command')") Command

Ẩn hiện nội dung với thẻ details và summary

• Trình duyệt hỗ trợ: firefox, chrome, safari
• Thẻ detail sẽ chứa 1 thẻ summary và nhiều nội dung khác, các nội dung này sẽ được ẩn/hiện khi click vào nội dung thẻ summary
• So với html5: Tính năng thêm mới. Ở HTML5 thì chúng có thể dùng javascript hoặc dùng 1 thẻ input(type="checkbox") ẩn, sau đó bắt sự kiện checked / uncheck để thực hiện.
• Code:

details
  summary Click on this text to show more infomation
  p More information
  p More information
  p More information

Thêm các input type

• Trình duyệt hỗ trợ: chrome + edge
• Các input type được thêm: month, week, datetime-local
• Sử dụng: khi click vào ô input, trình duyệt sẽ xổ xuống 1 cái dropdown để user có thể chọn tháng/năm (kiểu month), tuần/năm(kiểu week), tháng/ngày/năm/giờ(kiểu datetime-local)
• So với HTML5: Tính năng thêm mới
• Code:

.group
  label Type = month
  input(type="month")
.group
  label Type = week
  input(type="week")
.group
  label Type = date time-local
  input(type="datetime-local")

Responsive image

• Trình duyệt hỗ trợ: chrome, firefox, edge, safari
• Sử dụng thẻ picture cùng với các thuộc tính srcset, size để responsive hay thay đổi hình ảnh trên các màn hình khác nhau.
• Thuộc tính srcset: thay đổi hình ảnh trên màn hình có độ phân giải khác nhau
• Thuộc tính sizes: thay đổi width và height của ảnh dựa vào width và height của màn hình
• Thẻ picture: cho phép thay những ảnh khác nhau dựa theo sự thay đổi kích thước màn hình, đồng thời có thể thêm các thuộc tính srcset và size
• So với HTML5: Tính năng thêm mới. Ở HTML5 chúng ta phải load nhiều ảnh một lúc, sau đó dùng media queries hay javascript để ẩn/hiện các ảnh đó. Còn những tính năng thêm ở HTML5.1 để trình duyệt kiểm tra điều kiện (màn hình) rồi sau đó mới load 1 ảnh phù hợp, từ đó tăng tốc độ load trang và giảm bớt dung lượng web(app)
• Code:

//- Sử dụng srcset để thay đổi hình ảnh dựa theo độ phân giải màn hình
img(src="default.png", srcset="low-res.png 1x, hight-res.png 2x, ultra-res.png 3x", alt="")
//- Responsive img dùng sizes: ảnh rộng 100% khi màn hình nhỏ hơn hoặc bằng 400px, và 50% cho trường hợp còn lại
img(src="default.png", sizes="(max-width: 400px) 100% 50%", srcset="low-res.png 1x, hight-res.png 2x, ultra-res.png 3x", alt="")

//- responsive: small.png nếu màn hình <= 200px, medium.png nếu màn hình <= 400px, large.png nếu màn hình <= 600px, trường hợp còn lại trình duyệt sẽ chọn default.png
picture
  source(media="(max-width: 200px)", srcset="small.png")
  source(media="(max-width: 400px)", srcset="medium.png")
  source(media="(max-width: 600px)", srcset="large.png")
  img(src="default.png", alt="")

Chức năng popup với thẻ dialog

• Trình duyệt hỗ trợ: firefox, chrome
• Thẻ dialog có thể dùng làm popup của trang web
• Thẻ dialog có thể dùng được các function javascript: show(): hiện dialog close(): ẩn dialog showModal(): hiện modal dialog
• Style lớp nền nằm dưới dialog với ::backdrop pseudo element
• So với HTML5: Tính năng thêm mới
• Code:

.container  
  button#open-dialog open dialog
  button#open-modal-dialog open modal dialog
  dialog#my-popup
    p This is dialog content 
    button#close-dialog close dialog

File JS

var myDialog = document.getElementById('my-popup');
document.getElementById('open-dialog').addEventListener('click', function(){
  myDialog.show();
});
document.getElementById('open-modal-dialog').addEventListener('click', function(){
  myDialog.showModal();
});
document.getElementById('close-dialog').addEventListener('click', function(){
  myDialog.close();
});

Chức năng validate form

• Trình duyệt hỗ trợ: chrome, firefox
• Chức năng validate HTML5.1 có thể kiểm tra những field trống, email, url, number không hợp lệ
• Để tắt chức năng validate, chỉ cần thêm thuộc tính novalidate vào thẻ <form>
• So với HTML5: Tính năng này giống với HTML5, nhưng ở HTML5.1 thông báo lỗi được hiện ngay tới user dưới dạng tooltip
• Code:

form
  label Không điền gì vào ô dưới rồi submit:
  input(type="text", required)
  button(type="submit") Submit
form
  label Thử điền 1 email sai vào ô dưới rồi submit:
  input(type="email", required)
  button(type="submit") Submit
form
  label Thử điền 1 url sai vào ô dưới rồi submit:
  input(type="url", required)
  button(type="submit") Submit
form
  label Thử điền một số bé hơn 5 hoặc lớn hơn 10 vào ô dưới rồi submit:
  input(type="number", min="5", max="10", required)
  button(type="submit") Submit
form(novalidate)
  label Thử điền một số bé hơn 5 hoặc lớn hơn 10 vào ô dưới rồi submit:
  input(type="number", min="5", max="10", required)
  button(type="submit") Submit

Bên trên là 6 tính năng mới mà mình tìm hiểu được, còn 8 tính năng nữa trong tổng số 14 tính năng mới mình sẽ trình bày ở phần 2 của bài viết. Mọi người chú ý theo dõi nhé. Cảm ơn mọi người và chúc mừng năm mới!