CSS xứng đáng, mạnh mẽ và ổn định mà bạn có thể sử dụng hiện nay.
Tôi tin rằng mọi nhà phát triển giao diện người dùng đều nên biết rằng :has() không chỉ là "bộ chọn cha mẹ",
cách thức và lý do của subgrid, cách lồng ghép bằng cú pháp CSS tích hợp, cách cho phép
việc gói văn bản dòng tiêu đề cân bằng trình duyệt và cách sử dụng đơn vị truy vấn vùng chứa.
Bài đăng này là phần tiếp theo của 6 đoạn mã CSS của năm ngoái mà mọi nhà phát triển giao diện người dùng nên biết trong năm 2023.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() đã có mặt trên mọi trình duyệt chính vào cuối năm 2023! Bộ chọn mới này có vẻ như
nhỏ và vô hại nhưng bạn sẽ ngạc nhiên về tất cả các trường hợp sử dụng mà tính năng này có thể mang lại:
trò chơi, tính phản ứng, bố cục nhận biết nội dung, thành phần thông minh và
còn nhiều điều nữa được tìm hiểu kỹ trong bài viết này của Jhey.
Dưới đây là một vài ví dụ về cách sử dụng :has() làm bộ chọn mẹ. Trợ lý có tên này vì
thường là đối tượng của bộ chọn ở cuối, như ul li, trong đó li là chủ thể
và nhận các kiểu. Với :has(), phần tử ở đầu bộ chọn có thể trở thành
tiêu đề. Trong ví dụ sau, nút có một khoảng trống nếu có một phần tử bên trong
với lớp .icon. Thẻ sẽ thay đổi hướng nếu có hình ảnh bên trong.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Bộ chọn dài mong muốn là để thay đổi một bố cục dựa trên số lượng mục mà bố cục đó có. Hiện có thể thực hiện việc này
với :has() vì nó có thể giữ vùng chứa làm chủ thể trong khi truy vấn số lượng phần tử con.
main:has(> :nth-child(5)) {…}
Một ví dụ khác ở cấp cao hơn, đó là thay đổi kiểu được đặt trên toàn bộ tài liệu khi một hộp đánh dấu cụ thể trên trang được bật:
html:has(#dark-mode:checked) {…}
Đây là những trường hợp sử dụng đơn giản không làm thay đổi chủ đề của bộ chọn, nếu bạn chỉ xem ví dụ
như thế này, bạn có thể cho rằng :has() bị giới hạn ở vai trò bộ chọn mẹ. Hãy cân nhắc những điều sau
ví dụ. Các thao tác này sẽ kiểm tra nội dung nào đó dựa trên đối tượng cấp trên chung, sau đó chuyển hướng bộ chọn
hiển thị theo bối cảnh trẻ em
ở đâu đó sâu hơn trong trang.
Ví dụ này cho thấy một phần tử lỗi biểu mẫu nếu có bất kỳ giá trị nhập vào nào không hợp lệ:
form:has(:user-invalid) .error {
display: block;
}
Thao tác này sẽ trượt ra vùng nội dung chính khi một ngăn điều hướng bên có lớp .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Dưới đây là một bản minh hoạ thú vị sử dụng :has() làm bộ chọn mẹ, :has() với các truy vấn số lượng,
và vùng chứa để tạo một bố cục lưới có khả năng hiển thị thanh lịch
1–12 phần tử theo hướng dọc hoặc ngang:
Tạo lưới phụ
subgrid
Trong nhiều năm, cộng đồng web giao diện người dùng đã yêu cầu lưới phụ giúp hoàn tất và hoàn tất công cụ bố cục lưới CSS cực kỳ phổ biến và mạnh mẽ. Tính năng này hiện đã có trong cả ba công cụ chính.
Nếu bạn muốn xem thông tin tổng quan, hãy tìm hiểu thêm về lưới phụ tại đây.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Nest theo phong cách CSS
nesting
Tính năng lồng CSS tích hợp sẵn đã có trên tất cả các trình duyệt chính từ năm 2023. Tôi thậm chí đã cập nhật trang web của mình để xoá quy trình xây dựng đã biên soạn quá trình lồng ghép, và giờ đây, tôi có thể bắt đầu giao hàng một biểu định kiểu nhỏ hơn! Đúng, biểu định kiểu có lồng nhau nhỏ hơn và tất cả các công cụ cho nhà phát triển của trình duyệt sẵn sàng đại diện cho nó.
Bạn có thể tìm thấy thông tin tổng quan về cú pháp lồng CSS tại đây, để biết toàn bộ thông tin chi tiết. Ví dụ về mã sau đây cho thấy một ví dụ về cú pháp.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Hãy để trình duyệt cân bằng các dòng tiêu đề
balance
pretty
Nếu không có text-wrap: balance, các nhà phát triển và người viết nội dung sao chép sẽ còn lại gợi ý ngắt dòng
chẳng hạn như phần tử <wbr> hoặc ­. Hầu như đây là trận chiến thua vì ngay khi
nội dung được dịch, thu phóng hoặc sửa đổi theo bất kỳ cách nào, không có gì đảm bảo rằng những
gợi ý gói sẽ nằm ở đúng vị trí cho bản trình bày mới của nội dung.
Với tính năng xuống dòng văn bản cân bằng, bạn có thể giao công việc này cho trình duyệt. Bạn có thể xem phép so sánh trong Codepen dưới đây.
Sử dụng đơn vị truy vấn vùng chứa
cqw
Bài đăng năm ngoái đã đề xuất rằng mọi nhà phát triển giao diện người dùng đều nên biết cách viết truy vấn vùng chứa. Nếu bạn vẫn chưa học được điều này, hãy tận dụng năm 2024 để nhanh chóng khai thác, cũng như xem các đơn vị truy vấn vùng chứa. Nhìn chung, Ahmad Shadeed viết một bài viết tuyệt vời về các đơn vị truy vấn vùng chứa vào năm 2021.
Có 6 đơn vị nhà hàng mới:
- Một biến thể cùng dòng
cqi. - Biến thể chiều rộng
cqw. - Biến thể khối
cqb. - Một biến thể chiều cao
cqh. - Một biến thể với độ dài bất kỳ nhỏ hơn
cqmin. - Một biến thể với chiều dài bất kỳ lớn hơn
cqmax.
Hãy xem xét một tình huống về ảnh động tương đối và nội tại cho một vùng chứa. Một phần tử con trượt ra hoàn toàn khỏi vùng chứa của nó bằng 100cqi, tức là 100% kích thước nội tuyến của vùng chứa.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Dưới đây là một thẻ có kiểu chữ thích ứng vùng chứa và hình ảnh thích ứng hướng của vùng chứa, trở thành một nửa kích thước nếu hướng ngang.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Nếu các bài này mới được sử dụng, bạn nên xem tất cả các đơn vị dành cho bạn trong năm 2024.