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

402
29-03-2018
5 tính năng mới của HTML và CSS được mong đợi nhất 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, Bizfly Cloud  hãy cùng xem 5 tính năng HTMLvà CSS mới thật sự thú vị để tạo ra các trang web tốt hơn 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.

Native dialog Element

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.

CSS Scroll Snap Points

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.

Inline CSS

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:

Variables

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.

Support Queries

 Theo Bizfly Cloud chia sẻ

Tham khảo: catswhocode.com/blog/5-exciting-new-html-and-css-features-to-look-forward-to-in-2018

TAGS: htmlCSS
SHARE