Sản phẩm :has()
lớp giả thực tế là tính năng CSS mới yêu thích của tôi. Tôi biết nó cũng dành cho nhiều bạn, ít nhất là những người trong số các bạn đã tham gia cuộc khảo sát Tình trạng CSS. Khả năng viết ngược bộ chọn mang lại cho chúng tôi nhiều siêu năng lực hơn mà tôi chưa bao giờ nghĩ là có thể.
Tôi nói “nhiều siêu năng lực hơn” bởi vì đã có rất nhiều ý tưởng thông minh thực sự đáng kinh ngạc được xuất bản bởi một nhóm người siêu thông minh, chẳng hạn như:
Bài viết này không phải là một hướng dẫn dứt khoát để :has()
. Nó cũng không ở đây để lặp lại những gì đã được nói. Chỉ có tôi (hi 👋) nhảy vào nhóm một lúc để chia sẻ một số cách mà tôi có nhiều khả năng sử dụng nhất :has()
trong công việc hàng ngày của tôi… tức là khi nó được Firefox hỗ trợ chính thức sắp xảy ra.
Khi điều đó xảy ra, bạn có thể cá là tôi sẽ bắt đầu sử dụng :has()
khắp nơi. Dưới đây là một số ví dụ thực tế về những thứ tôi đã xây dựng gần đây và tự nghĩ: “Chà, cái này sẽ đẹp hơn rất nhiều :has()
được hỗ trợ đầy đủ.”
Tránh phải tiếp cận bên ngoài thành phần JavaScript của bạn
Bạn đã bao giờ xây dựng một thành phần tương tác đôi khi cần tác động đến các kiểu ở một nơi khác trên trang chưa? Lấy ví dụ sau đây, nơi <nav>
là một đơn lớnvà mở nó sẽ thay đổi màu sắc của <header>
nội dung bên trên nó.
Tôi cảm thấy như tôi cần phải làm điều này mọi lúc.
Ví dụ cụ thể này là một thành phần React mà tôi đã tạo cho một trang web. Tôi đã phải “vươn ra ngoài” phần React của trang với document.querySelector(...)
và chuyển một lớp trên <body>
, <header>
, hoặc một thành phần khác. Đó không phải là ngày tận thế, nhưng nó chắc chắn cảm thấy hơi tệ. Ngay cả trong một trang React đầy đủ (chẳng hạn như trang Next.js), tôi phải chọn giữa việc quản lý một menuIsOpen
trạng thái cao hơn trên cây thành phần hoặc thực hiện lựa chọn phần tử DOM tương tự - điều này không giống React-y cho lắm.
Với :has()
, vấn đề biến mất:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Không còn loay hoay với các phần khác của DOM trong các thành phần JavaScript của tôi!
UX phân chia bảng tốt hơn
Việc thêm các “sọc” hàng thay thế vào bảng của bạn có thể là một cải tiến tốt về UX. Chúng giúp mắt bạn theo dõi bạn đang ở hàng nào khi quét bảng.
Nhưng theo kinh nghiệm của tôi, điều này không hoạt động tốt trên các bảng chỉ có hai hoặc ba hàng. Ví dụ, nếu bạn có một bảng có ba hàng trong <tbody>
và bạn đang “vạch” từng hàng “chẵn”, bạn có thể chỉ còn một vạch. Đó thực sự không phải là một mẫu và có thể khiến người dùng tự hỏi có gì đặc biệt về một hàng được đánh dấu đó.
Sử dụng kỹ thuật này nơi Bramus sử dụng :has()
để áp dụng phong cách dựa trên số lượng trẻ em, chúng ta có thể áp dụng các sọc tble khi có nhiều hơn ba hàng:
Những gì để có được fancier? Bạn cũng có thể quyết định chỉ làm điều này nếu bảng cũng có ít nhất một số cột nhất định:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Xóa logic lớp có điều kiện khỏi các mẫu
Tôi thường cần thay đổi bố cục trang tùy thuộc vào nội dung trên trang. Sử dụng bố cục Lưới sau đây, trong đó vị trí của nội dung chính sẽ thay đổi các khu vực lưới tùy thuộc vào việc có thanh bên hay không.
Đó là điều có thể phụ thuộc vào việc có các trang anh chị em được đặt trong CMS hay không. Tôi thường làm điều này với logic mẫu để thêm có điều kiện Các lớp sửa đổi BEM vào trình bao bọc bố cục để giải thích cho cả hai bố cục. CSS đó có thể trông giống như thế này (quy tắc đáp ứng và những thứ khác được bỏ qua cho ngắn gọn):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
Tất nhiên, thông minh về CSS, điều này hoàn toàn ổn. Nhưng nó làm cho mã mẫu hơi lộn xộn. Tùy thuộc vào ngôn ngữ tạo khuôn mẫu của bạn, việc thêm một loạt các lớp một cách có điều kiện có thể trở nên khá khó chịu, đặc biệt nếu bạn cũng phải làm điều này với nhiều phần tử con.
Ngược lại với một :has()
cách tiếp cận dựa trên:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
Thành thật mà nói, đó không phải là CSS tốt hơn nhiều. Nhưng việc loại bỏ các lớp sửa đổi có điều kiện khỏi mẫu HTML là một chiến thắng tuyệt vời nếu bạn hỏi tôi.
Thật dễ dàng để nghĩ về các quyết định thiết kế vi mô cho :has()
- giống như một thẻ khi nó có một hình ảnh trong đó — nhưng tôi nghĩ nó cũng sẽ thực sự hữu ích cho những thay đổi bố cục macro này.
Quản lý tính đặc hiệu tốt hơn
Nếu bạn đọc bài báo cuối cùng của tôi, bạn sẽ biết tôi là một người thích tính cụ thể. Nếu, giống như tôi, bạn không muốn điểm số cụ thể của mình bị giảm khi thêm :has()
và :not()
trong suốt phong cách của bạn, hãy chắc chắn sử dụng :where()
.
Đó là do tính đặc thù của :has()
được dựa trên phần tử cụ thể nhất trong danh sách đối số của nó. Vì vậy, nếu bạn có thứ gì đó giống như ID trong đó, thì bộ chọn của bạn sẽ khó ghi đè lên trong tầng.
Mặt khác, tính đặc thù của :where()
luôn luôn là số không, không bao giờ thêm vào điểm cụ thể.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Tương lai tươi sáng
Đây chỉ là một vài điều tôi nóng lòng muốn có thể sử dụng trong sản xuất. CSS-Tricks Almanac cũng có rất nhiều ví dụ. bạn đang mong muốn làm gì với :has()
? Bạn đã gặp loại ví dụ thực tế nào ở đâu :has()
sẽ là giải pháp hoàn hảo?
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến thức. Truy cập Tại đây.
- nguồn: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- có khả năng
- Có khả năng
- Giới thiệu
- ở trên
- Tài khoản
- ảnh hưởng đến
- Tất cả
- Đã
- luôn luôn
- tuyệt vời
- và
- Một
- Đăng Nhập
- phương pháp tiếp cận
- khu vực
- đối số
- bài viết
- dựa
- bởi vì
- Đặt cược
- Hơn
- giữa
- Một chút
- Thổi
- xây dựng
- xăn lên
- Có thể có được
- thẻ
- thác nước
- nhất định
- thay đổi
- Những thay đổi
- trẻ em
- Chọn
- tốt nghiệp lớp XNUMX
- các lớp học
- CMS
- mã
- Cột
- thành phần
- chứa
- nội dung
- có thể
- Khóa học
- CSS
- quyết định
- dứt khoát
- Tùy
- Thiết kế
- Không
- làm
- DOM
- dont
- xuống
- các yếu tố
- đặc biệt
- vv
- Ngay cả
- BAO GIỜ
- Mỗi
- ví dụ
- ví dụ
- kinh nghiệm
- Mắt
- Yêu thích
- Đặc tính
- vài
- cuối
- Firefox
- tiếp theo
- Forward
- từ
- đầy đủ
- được
- cho
- Đi
- đi
- tuyệt vời
- lưới
- lưới-mẫu-khu vực
- hướng dẫn
- xảy ra
- có
- giúp đỡ
- tại đây
- hi
- cao hơn
- Nhấn mạnh
- HTML
- HTTPS
- TÔI SẼ
- ý tưởng
- hình ảnh
- cải thiện
- in
- tương tác
- IT
- JavaScript
- chỉ một
- Giữ
- Loại
- Biết
- Ngôn ngữ
- Họ
- Bố trí
- Có khả năng
- ít
- Xem
- tìm kiếm
- Rất nhiều
- Macro
- thực hiện
- Chủ yếu
- làm cho
- quản lý
- nhiều
- Might
- thời điểm
- chi tiết
- hầu hết
- Mozilla
- Cần
- nhu cầu
- Mới
- tiếp theo
- Tiếp theo.js
- Thông thường
- con số
- Chính thức
- ONE
- mở
- Nền tảng khác
- bên ngoài
- một phần
- riêng
- các bộ phận
- Họa tiết
- người
- hoàn hảo
- Nơi
- plato
- Thông tin dữ liệu Plato
- PlatoDữ liệu
- có thể
- trình bày
- khá
- Vấn đề
- Sản lượng
- công bố
- đạt
- Phản ứng
- Đọc
- thế giới thực
- gần đây
- loại bỏ
- đáp ứng
- HÀNG
- quy tắc
- chạy
- Nói
- tương tự
- quét
- lựa chọn
- định
- Chia sẻ
- website
- thông minh
- So
- giải pháp
- một số
- một cái gì đó
- một nơi nào đó
- đặc biệt
- riêng
- tính cụ thể
- Bắt đầu
- Tiểu bang
- sọc
- Sọc
- phong cách
- lớn
- Hỗ trợ
- bàn
- Hãy
- TD
- mẫu
- Sản phẩm
- Nhà nước
- thế giới
- điều
- điều
- nghĩ
- số ba
- khắp
- đến
- tấn
- quá
- TỔNG CỘNG
- theo dõi
- đúng
- upside
- us
- sử dụng
- Người sử dụng
- ux
- chờ đợi
- cách
- Điều gì
- liệu
- cái nào
- CHÚNG TÔI LÀ
- giành chiến thắng
- tự hỏi
- Công việc
- thế giới
- giá trị
- sẽ
- viết
- Bạn
- trên màn hình
- zephyrnet