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 :has() không chỉ là một "bộ chọn gốc", cách thức và lý do của subgrid, cách lồng bằng cú pháp CSS tích hợp, cách cho phép trình duyệt cân bằng văn bản dòng tiêu đề 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 nối 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 cầ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ỏ và vô hại, nhưng bạn sẽ ngạc nhiên với tất cả các trường hợp sử dụng mà bộ chọn này có thể mở khoá: trò chơi, khả năng phản ứng, bố cục nhận biết nội dung, thành phần thông minh, v.v. đã tìm hiểu kỹ trong bài viết này của Jhey.
Sau đây là một vài ví dụ về cách sử dụng :has() làm bộ chọn mẹ. Lớp này có tên này vì
thường tiêu đề của bộ chọn nằm ở cuối, chẳng hạn như ul li, trong đó li là tiêu đề
và nhận các kiểu. Với :has(), phần tử ở đầu bộ chọn có thể trở thành chủ thể. Trong ví dụ sau, nút có một khoảng trống nếu có một phần tử bên trong có 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 mà bạn muốn dùng là để thay đổi bố cục dựa trên số lượng mục mà bố cục đó có. Bạn hiện có thể thực hiện việc này với :has() vì hàm này 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 bạn bật một hộp đánh dấu cụ thể trên trang:
html:has(#dark-mode:checked) {…}
Đây là những trường hợp sử dụng đơn giản và không làm thay đổi tiêu đề của bộ chọn. Nếu chỉ xem xét những ví dụ như thế này, bạn có thể thấy :has() bị giới hạn ở việc trở thành bộ chọn mẹ. Tuy nhiên, hãy xem các ví dụ sau. Những thao tác này sẽ kiểm tra nội dung nào đó dựa trên một đối tượng cấp trên chung, sau đó điều chỉnh bộ chọn theo đối tượng con ở vị trí nào đó sâu hơn trên trang.
Phần này minh hoạ phần tử lỗi biểu mẫu nếu có bất kỳ thông tin đầu vào nào không hợp lệ:
form:has(:user-invalid) .error {
display: block;
}
Phần này sẽ trượt ra vùng nội dung chính khi điều hướng bên có một lớp .--is-open:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Sau đây là một bản minh hoạ thú vị sử dụng :has() làm bộ chọn mẹ, :has() với truy vấn số lượng và truy vấn vùng chứa để tạo một bố cục lưới có khả năng hiển thị trang nhã 1-12 phần tử theo hướng dọc hoặc ngang:
Tạo lưới con
subgrid
Trong nhiều năm, cộng đồng web giao diện người dùng đã yêu cầu có lưới con giúp hoàn thiện và hoàn thiện công cụ bố cục lưới CSS mạnh mẽ và phổ biến. Tính năng này hiện có ở cả 3 công cụ chính.
Tìm hiểu thêm về lưới con tại đây nếu bạn muốn xem thông tin tổng quan.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Lồng ghép CSS theo cách riêng
nesting
Tính năng lồng ghép CSS tích hợp sẵn đã có trên tất cả các trình duyệt chính vào 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 dịch lồng nhau và giờ tôi gửi một biểu định kiểu nhỏ hơn! Đúng vậy, các biểu định kiểu có lồng ghép nhỏ hơn và tất cả các công cụ cho nhà phát triển trình duyệt đều sẵn sàng biểu thị mục đó.
Bạn có thể tìm thấy thông tin tổng quan về cú pháp lồng ghép 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, nhà phát triển và người viết nội dung sẽ vẫn có các gợi ý ngắt dòng, chẳng hạn như các phần tử <wbr> hoặc ­. Đây chủ yếu là một 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 thì không có gì đảm bảo rằng các gợi ý bao bọc đó sẽ ở đúng vị trí cho cách trình bày mới của nội dung.
Với tính năng tự động xuống dòng tự động, bạn có thể để trình duyệt xử lý công việc này. Bạn có thể xem phần so sánh trong Codepen sau đâ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 chưa tìm hiểu, hãy nghĩ đến năm 2024 để bắt đầu triển khai và xem cả 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ề đơn vị truy vấn vùng chứa vào năm 2021.
Có sáu đơn vị quý hàng mới:
- Biến thể cùng dòng
cqi. - Biến thể chiều rộng
cqw. - Một biến thể khối
cqb. - Một biến thể chiều cao
cqh. - Một biến thể cho bất kỳ độ dài nào nhỏ hơn
cqmin. - Một biến thể cho bất kỳ độ dài nào lớn hơn
cqmax.
Xem xét một tình huống cho ảnh động tương đối và nội tại đối với một vùng chứa. Một phần tử con trượt hoàn toàn ra khỏi vùng chứa bằng cách sử dụng 100cqi (tức là 100% kích thước cùng dòng 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 dành cho vùng chứa và một hình ảnh thích ứng theo hướng của vùng chứa, sẽ giảm một nửa kích thước nếu hướng là ngang.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Nếu mới sử dụng những bài này, bạn nên xem lại tất cả các bài học hiện có trong năm 2024.