W CSS często brakowało sposobu na bezpośrednie wybieranie elementu nadrzędnego na podstawie jego elementów podrzędnych. Od wielu lat deweloperzy oczekują tego najbardziej. Rozwiązuje to selektor :has(), który jest teraz obsługiwany przez wszystkie popularne przeglądarki. Przed :has() często umieszczano w łańcuchu długie selektory lub dodawano do nich klasy zaczepów stylów. Teraz możesz nadać styl na podstawie relacji elementu z elementami podrzędnymi. Więcej informacji o selektorze :has() znajdziesz w opisie kodu CSS z 2023 r. i 5 fragmentach kodu CSS, które każdy programista frontendu powinien znać.
Choć ten selektor wydaje się mały, może przydać się w ogromnych przypadkach.
Z tego artykułu dowiesz się, jakie przypadki użycia odblokowały firmy e-commerce za pomocą selektora :has().
:has() jest częścią pakietu Baseline Newly available.
Zapoznaj się z całą serią, której częścią jest ten artykuł, z której dowiesz się, jak firmy e-commerce ulepszyły swoje strony internetowe za pomocą nowych funkcji CSS i interfejsu.
Policybazaar
Dzięki selektorowi
:has()mogliśmy wyeliminować weryfikację wyboru użytkownika opartą na języku JavaScript i zastąpić ją rozwiązaniem CSS, które działa bez problemu z taką samą funkcją jak wcześniej – Aman Soni, kierownik ds. technicznych, Policybazaar.
Zespół ds. inwestycji firmy Policybazaar zręcznie zastosował selektor :has(), aby zapewnić użytkownikom, którzy porównują plany, aby wyraźnie wskazać użytkownikom, którzy porównują plany. Na ilustracji poniżej widać 2 rodzaje planów w interfejsie porównania (żółty i niebieski). Każdy abonament można porównać tylko z jego własnym. Jeśli używany jest :has(), gdy użytkownik wybierze jeden typ abonamentu, drugiego typu nie można wybrać.
:has() w celu stylizacji elementu nadrzędnego i jego elementów podrzędnych w celu utworzenia funkcji wyboru na podstawie kategorii.Kod
:has() daje Ci dostęp do stylu elementów nadrzędnych i ich elementów podrzędnych. Ten kod sprawdza, czy kontener nadrzędny ma ustawioną klasę .disabled-group.
Jeśli tak, karta staje się wyszarzona, a przycisk „Dodaj” nie może reagować na kliknięcia po ustawieniu opcji pointer-events na none.
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
Zespół ds. zdrowia w Policybazaar wdrożył nieco inny przypadek użycia. Mają wbudowany test dla użytkownika i za pomocą :has() sprawdzają stan pola wyboru pytania, aby zobaczyć, czy otrzymano już odpowiedź na pytanie. Jeśli tak, zostanie zastosowana animacja, która pozwoli przejść do następnego pytania.
Kod
W przykładzie porównania abonamentów użyto funkcji :has() do sprawdzenia obecności klasy. Stan elementu wejściowego, np. pole wyboru, możesz też sprawdzić za pomocą polecenia :has(input:checked). Na ilustracji z quizem każde pytanie na fioletowym banerze jest polem wyboru. Policybazaar sprawdza, czy odpowiedź na pytanie została udzielona za pomocą funkcji :has(input:checked), a jeśli tak, uruchamia animację przy użyciu metody animation: quesSlideOut 0.3s 0.3s linear forwards, aby przejść do następnego pytania. Szczegółowe informacje na ten temat znajdziesz w kodzie poniżej.
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
Tokopedia
Tokopedia użyła :has() do utworzenia nakładki graficznej, jeśli miniatura produktu zawiera film. Jeśli miniatura produktu zawiera klasę .playIcon, jest dodawana nakładka CSS. W tym przypadku selektor :has() jest używany razem z selektorem zagnieżdżenia & w nadrzędnej klasie .thumbnailWrapper, która dotyczy wszystkich miniatur. W ten sposób powstaje bardziej modułowy i czytelny kod CSS.
:has().Kod
Ten kod korzysta z selektorów i kombinatorów arkusza CSS (& i >) oraz zagnieżdżania za pomocą elementu :has(), aby określić styl miniatury.
W przypadku nieobsługiwanych przeglądarek jako kreacji zastępczej używana jest standardowa reguła dodatkowej klasy CSS. Reguła @supports selector(:has(*)) służy też do sprawdzania obsługi przeglądarek.
Dlatego ogólne działanie jest takie samo we wszystkich wersjach przeglądarki.
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
Co wziąć pod uwagę podczas korzystania z tagu :has()
Aby uzyskać bardziej złożony warunek, połącz selektory :has() z innymi selektorami. Zobacz kilka przykładów z użyciem funkcji has() w selektorze rodziny.
Przydatne materiały:
- Podsumowanie CSS 2023 r.
- :has(): selektor rodziny
- Wersje demonstracyjne :has()
- Czy chcesz zgłosić błąd czy poprosić o dodanie nowej funkcji? Chętnie poznamy Twoją opinię
Zapoznaj się z innymi artykułami z tej serii, które omawiają, w jaki sposób firmy zajmujące się handlem elektronicznym skorzystają na nowych funkcjach CSS i UI, takich jak animacje przewijane, przejścia widoku, wyskakujące okienka i zapytania kontenera.