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
|
1 2 3 4 |
<dialog> <h2>Your title</h2> <p>Your content...</p> </dialog> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
img { /* Specifies that the center of each photo should align with the center of the scroll container in the X axis when snapping */ scroll-snap-align: center none; } .photoGallery { width: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; /* Requires that the scroll position always be at a snap position when the scrolling operation completes. */ scroll-snap-type: x mandatory; } |
|
1 2 3 4 5 6 7 |
<div class="photoGallery"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> <img src="img5.jpg"> </div> |
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.
|
1 2 3 4 5 6 7 |
<body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <style> p { color: #069; } </style> <p>Vestibulum interdum pellentesque massa</p> </body> |
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:
|
1 2 3 4 5 |
:root { --main-color: #069; } h1, h2, h3 { color: var(--main-color); } a { color: var(--main-color); text-decoration:underline } |
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.
|
1 2 3 4 5 |
@supports (mix-blend-mode: overlay) { .example { mix-blend-mode: overlay; } } |
