Để giúp các nhà phát triển tùy chỉnh trang web của họ với sự kết hợp của JavaScript và CSS, các thuộc tính CSS mới đã được phát triển và hiện hỗ trợ các trình duyệt phổ biến. Một số trong số này được liệt kê bên dưới -
focus-trong
Nó nhằm mục đích giải quyết khả năng tiếp cận tiêu điểm trong các phần tử
scroll-snap
Điều này cho phép cuộn và giảm tốc gốc
@media (prefers- *)
Giúp thiết lập cả giao diện người dùng và trải nghiệm người dùng của trang theo sở thích thiết bị của người dùng, do đó, cho phép mức độ cá nhân hóa cao hơn.
* có thể biểu thị mức độ ánh sáng, màu sắc bắt buộc, phối màu, độ tương phản, giảm chuyển động và giảm độ trong suốt
vị trí:dính
Để giữ giao diện người dùng trong chế độ xem.
thuộc tính logic để có bố cục chuẩn
Cho phép chúng tôi có khoảng cách hướng động bên trong và xung quanh các phần tử.
thuộc tính gap
Thuộc tính này hiện có sẵn cho flexbox. gap đặt vùng chứa sở hữu khoảng cách thay vì mỗi phần tử con có khoảng cách riêng.
backfrop-filter
Để thiết lập các kiểu phía sau một phần tử một cách thuận tiện.
API CSS Houdini
API cấp thấp cung cấp cho nhà phát triển khả năng cho trình duyệt biết cách họ muốn đọc và hiểu CSS tùy chỉnh. Mô hình đối tượng CSS hiện có thể truy cập được cho các nhà phát triển theo cách dễ sử dụng hơn. API bố cục, API sơn, API phân tích cú pháp, API thuộc tính &giá trị, AnimationWorklet, gõ OM và API số liệu phông chữ có trong này.
tỷ lệ khung hình
Duy trì kích thước của phương tiện
kích thước
Đặt chiều cao và chiều rộng trong một thuộc tính
min (), max () và kẹp ()
Đặt các ràng buộc trên bất kỳ thuộc tính CSS nào
hiển thị:bên trong bên ngoài
Hai cú pháp có giá trị để các phần tử phù hợp hơn
list-style-type
Thêm kiểu tùy chỉnh vào danh sách
Mô-đun CSS
Giờ đây, chúng tôi có thể sử dụng JavaScript để yêu cầu một mô-đun cụ thể từ tệp cục bộ hoặc từ xa
Vùng CSS
Điền vào một khu vực với nội dung
Lưới phụ CSS
Giúp chúng tôi tạo bố cục vi mô với bố cục vi mô trong CSS Grid.
Ví dụ
Các ví dụ sau đây cho thấy một số thuộc tính này -
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body> Đầu ra
Điều này sẽ tạo ra kết quả sau -
