5 tính năng mới của HTML và CSS được mong đợi nhất trong năm 2018
1. Native <dialog> Element
Được phát hành cùng với HTML 5.2 spec vào 12/2017, phần tử <dialog> này cung cấp khả năng tạo các hộp thoại bằng HTML thuần.
Tính tới tháng 1/2018, <dialog> chỉ khả dụng trên Chrome và Chrome mobile.
2. CSS Scroll Snap Points
CSS Scroll Snap là một module mới của CSS giới thiệu các vị trí scroll snap. Chúng xác định các vị trí cụ thể mà scrollport của một container có thể kết thúc sau khi một thao tác cuộn đã hoàn thành.
Tính năng này chưa được triển khai trong hầu hết các trình duyệt.
Trong ví dụ trên, một loạt hình ảnh được sắp xếp trong một container cuộn được sử dụng để xây dựng một thư viện ảnh (photo gallery).
Nó được lấy từ W3C working draft, hãy tìm hiểu để biết thêm thông tin về chức năng mới thú vị này.
3. Inline CSS trong <body>
HTML 5.2 spec cho phép tạo style inline CSS trong body như một cách hợp lệ. Không phải là tính năng mới thú vị nhất, nhưng điều này có thể thực sự hữu ích trong một số trường hợp.
4. Variables (biến)
Các CSS preprocessor đã có các biến trong một thời gian dài. Tuy nhiên, mình thực sự rất vui mừng về ý tưởng các biến có sẵn trong CSS.
Các biến CSS đã triển khai khá tốt và sẽ hoạt động hoàn hảo trong hầu hết các trình duyệt.
Sau đây là một ví dụ giải thích về cách sử dụng các biến trong CSS:
5. Support Queries
Như đã thấy với các tính năng đã được giới thiệu ở phía trên, khả năng tương thích của trình duyệt vẫn luôn là vấn đề lớn khi sử dụng các tính năng CSS mới.
Tính năng @supports cung cấp cho các dev cách để đưa ra các rule dựa trên việc một thuộc tính cụ thể có được hỗ trợ trong CSS hay không.
@supports hiện được hỗ trợ bởi tất cả các trình duyệt ngoại trừ Internet Explorer 11.
Tham khảo: catswhocode.com/blog/5-exciting-new-html-and-css-features-to-look-forward-to-in-2018
