Có một CSS xứng đáng, mạnh mẽ và ổn định mà bạn có thể sử dụng ngay hôm nay.
Tôi tin rằng mọi nhà phát triển giao diện người dùng nên biết cách sử dụng truy vấn vùng chứa, tạo trải nghiệm nhấp nhanh, tránh sử dụng position: absolute bằng lưới, nhanh chóng tạo một vòng tròn, sử dụng các lớp tầng và tiếp cận nhiều người hơn với ít hơn thông qua thuộc tính logic. Dưới đây là tổng quan nhanh về từng kỳ vọng đó.
1. Truy vấn vùng chứa
Tính năng CSS được yêu cầu nhiều nhất trong 10 năm liên tiếp, hiện đang ổn định trên các trình duyệt và có sẵn để bạn sử dụng cho các truy vấn có chiều rộng trong năm 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
@containercontainer2. Di chuyển chốt
Trải nghiệm cuộn được sắp xếp hợp lý sẽ làm cho trải nghiệm của bạn khác biệt với những trải nghiệm còn lại và di chuyển ảnh nhanh là cách hoàn hảo để phù hợp với trải nghiệm cuộn của hệ thống trong khi cung cấp các điểm dừng có ý nghĩa.
.snaps {
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.snap-target {
scroll-snap-align: center;
}
.snap-force-stop {
scroll-snap-stop: always;
}
Hãy tìm hiểu thêm về tiềm năng của tính năng CSS này trong bộ sưu tập Codepen khổng lồ và truyền cảm hứng này, gồm khoảng 25 bản minh hoạ.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Cột lưới
Tránh dùng vị trí tuyệt đối bằng một lưới CSS gồm một ô. Sau khi các thuộc tính này nằm chồng lên nhau, hãy sử dụng các thuộc tính căn chỉnh và căn chỉnh để đặt chúng.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Vòng kết nối nhanh
Có rất nhiều cách để tạo vòng kết nối trong CSS, nhưng đây chắc chắn là cách ít nhất.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. Biến thể đối chứng bằng @layer
Các lớp phân tầng có thể giúp chèn các biến thể được phát hiện hoặc tạo ra sau này, vào đúng vị trí trong tầng bằng tập hợp các biến thể ban đầu.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Sau đó, trong một tệp hoàn toàn khác, được tải vào một thời điểm ngẫu nhiên khác, hãy thêm một biến thể mới vào lớp nút như thể nó ở đó với phần còn lại của toàn bộ thời gian này.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Ghi nhớ ít hơn và tiếp cận nhiều người hơn nhờ các thuộc tính logic
Hãy ghi nhớ mô hình hộp mới này và không bao giờ phải lo về việc thay đổi khoảng đệm hoặc lề trái và phải cho chế độ ghi quốc tế và hướng tài liệu nữa.
Điều chỉnh kiểu của bạn từ thuộc tính thực tế thành kiểu logic như padding-inline, margin-inline, inset-inline và giờ đây, trình duyệt sẽ thực hiện công việc điều chỉnh.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}