5 tính năng HTML và CSS mới được mong đợi trong năm 2018

HTML và CSS luôn phát triển, cung cấp cho các lập trình viên front-end và các nhà thiết kế web nhiều khả năng mới. Hôm nay, chúng ta hãy cùng xem 5 tính năng HTML và CSS mới thật sự thú vị để tạo ra các trang web tốt hơn trong năm 2018.

Native <dialog> Element

Được phát hành cùng với HTML 5.2 spec vào 12/2017, phần tử <dialog> cung cấp khả năng tạo các hộp thoại bằng HTML thuần.

Các trình duyệt hỗ trợ <dialog> tại thời điểm viết bài (01/2018): Chrome, Chrome mobile

CSS Scroll Snap Points

CSS Scroll Snap là một mô-đun 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).

Hiện tại nó vẫn ở trạng thái nháp, hãy đọc để biết thêm thông tin về chức năng mới thú vị này.

Inline CSS trong

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.

Các biến

Các CSS preprocessor đã có các biến trong một thời gian dài. Tuy nhiên, tôi 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. Bạn có thể đọc thêm thông tin trên W3C.

Bây giờ, đây là một ví dụ, tự giải thích về cách sử dụng các biến trong CSS:

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 lập trình viên một 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.

 

5 tính năng HTML và CSS mới được mong đợi trong năm 2018
5 (100%) 10 votes

Nhận xét