Công nghệ Lập trình

5 tính năng HTML và CSS thú vị đáng mong chờ trong năm 2018

Chúng tôi đưa ra tổng quan ngắn gọn về 5 tính năng HTML và CSS thú vị mà gần đây được thêm vào các ngôn ngữ lập trình, sẽ cho phép bạn tạo ra các trang web và ứng dụng tốt hơn.

HTML và CSS không ngừng phát triển, luô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. Mời các bạn cùng Quản Trị Mang đón 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 trong bài viết này nhé!

5 tính năng HTML và CSS mới thú vị đáng mong chờ trong năm 2018

Native <dialog> Element

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

Kể từ tháng 01 năm 2018, <dialog> chỉ hoạt động trên các trình duyệt Chrome và Chrome mobile:

<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 thao tác cuộn hoàn thành.

Tiếc rằng tính năng này chưa được triển khai trong hầu hết các trình duyệt.

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;
}
<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 sử dụng để xây dựng một thư viện ảnh.

Hiện tại nó được lấy từ bản dự thảo của W3C, hãy đọc để biết thêm thông tin về chức năng mới thú vị này.

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 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.

<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 (ngôn ngữ kịch bản mở rộng của CSS) đã đưa ra 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 spec.

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 trang W3C.

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

:root {
 --main-color: #069;
}
h1, h2, h3 { color: var(--main-color); } 
a { color: var(--main-color); text-decoration:underline }

Support Queries

Như 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 mới cung cấp cho các lập trình viên 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.

@supports (mix-blend-mode: overlay) {
 .example {
 mix-blend-mode: overlay;
 }
}

Tham khảo thêm một số bài viết:

Chúc các bạn vui vẻ!

Thứ Ba, 27/02/2018 16:20
5 ★ 3 👨 613

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
    ❖ Lập trình

    Cũ vẫn chất

    Xem thêm