Połączenia :has()
pseudoklasa jest, bez dwóch zdań, moją ulubioną nową funkcją CSS. Wiem, że przynajmniej dla wielu z was też ci z was, którzy wzięli udział w ankiecie State of CSS. Możliwość pisania selektorów do góry nogami daje nam więcej supermocy, o których nigdy nie myślałem, że to możliwe.
Mówię „więcej supermocy”, ponieważ grupa super inteligentnych ludzi opublikowała już mnóstwo naprawdę niesamowitych, sprytnych pomysłów, takich jak:
Ten artykuł nie jest ostatecznym przewodnikiem po :has()
. Nie jest też tutaj, aby powtarzać to, co już zostało powiedziane. To tylko ja (cześć 👋) wskakuję przez chwilę na modę, aby podzielić się niektórymi sposobami, których najprawdopodobniej użyję :has()
w mojej codziennej pracy… czyli od momentu oficjalnego wsparcia przez Firefoksa co jest bliskie.
Kiedy tak się stanie, możesz się założyć, że zacznę używać :has()
wszędzie wokoło. Oto kilka rzeczywistych przykładów rzeczy, które ostatnio zbudowałem i pomyślałem sobie: „O rany, kiedyś będzie o wiele ładniej :has()
jest w pełni obsługiwany”.
Unikaj konieczności sięgania poza komponent JavaScript
Czy kiedykolwiek zbudowałeś interaktywny komponent, który czasami musi wpływać na style w innym miejscu na stronie? Weźmy następujący przykład, gdzie <nav>
jest mega menu, a otwarcie go zmienia kolory <header>
treść nad nim.
Czuję, że muszę zrobić coś takiego cały czas.
Ten konkretny przykład to komponent React, który stworzyłem dla witryny. Musiałem „wyjść poza” część strony z Reactem document.querySelector(...)
i przełącz klasę na <body>
, <header>
lub inny składnik. To nie koniec świata, ale na pewno czuje się trochę fuj. Nawet w witrynie w pełni Reactowej (powiedzmy na stronie Next.js) musiałbym wybierać między zarządzaniem a menuIsOpen
stan znacznie wyżej w drzewie komponentów lub dokonaj tego samego wyboru elementu DOM — co nie jest bardzo React-y.
Z :has()
, problem znika:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Koniec z majstrowaniem przy innych częściach DOM w moich komponentach JavaScript!
Lepsze rozłożenie tabeli UX
Dodanie alternatywnych „pasków” wierszy do twoich tabel może być miłym ulepszeniem UX. Pomagają twoim oczom śledzić, w którym rzędzie się znajdujesz, podczas przeglądania stołu.
Ale z mojego doświadczenia wynika, że nie działa to dobrze na stołach z zaledwie dwoma lub trzema rzędami. Jeśli masz na przykład tabelę z trzema wierszami w pliku <tbody>
i „pasujesz” w każdym „parzystym” rzędzie, możesz skończyć z tylko jednym paskiem. To naprawdę nie jest warte wzorca i może sprawić, że użytkownicy będą się zastanawiać, co jest takiego specjalnego w tym jednym podświetlonym wierszu.
Używając tej techniki gdzie używa Bramus :has()
zastosować style na podstawie liczby dzieci, możemy zastosować paski tabeli, gdy jest więcej niż, powiedzmy, trzy rzędy:
Co stać się bardziej wyrafinowanym? Możesz również zdecydować się na zrobienie tego tylko wtedy, gdy tabela ma co najmniej określoną liczbę kolumn:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Usuń logikę klas warunkowych z szablonów
Często muszę zmieniać układ strony w zależności od tego, co się na niej znajduje. Weźmy następujący układ siatki, w którym rozmieszczenie głównej treści zmienia obszary siatki w zależności od tego, czy obecny jest pasek boczny.
To może zależeć od tego, czy w systemie CMS są ustawione strony równorzędne. Zwykle robię to z logiką szablonu, aby warunkowo dodać Klasy modyfikatorów BEM do opakowania układu, aby uwzględnić oba układy. Ten CSS może wyglądać mniej więcej tak (reguły responsywne i inne rzeczy pominięto dla zwięzłości):
/* 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 . .';
}
Pod względem CSS jest to oczywiście całkowicie w porządku. Ale powoduje to, że kod szablonu jest trochę bałaganiarski. W zależności od języka szablonów warunkowe dodanie kilku klas może być dość brzydkie, zwłaszcza jeśli musisz to zrobić również z dużą ilością elementów potomnych.
Porównaj to z a :has()
podejście oparte na:
/* 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 . .';
}
Szczerze mówiąc, nie jest to o wiele lepsze pod względem CSS. Ale usunięcie warunkowych klas modyfikatorów z szablonu HTML to niezła wygrana, jeśli mnie o to poprosisz.
Łatwo jest myśleć o decyzjach dotyczących mikroprojektu :has()
- jak karta, gdy zawiera obraz — ale myślę, że będzie to bardzo przydatne również w przypadku tych zmian układu makr.
Lepsze zarządzanie specyficznością
Jeśli czytasz mój ostatni artykuł, będziesz wiedział, że jestem zwolennikiem konkretów. Jeśli, tak jak ja, nie chcesz, aby Twoje wyniki specyficzności wypadły podczas dodawania :has()
i :not()
w swoich stylach, pamiętaj o użyciu :where()
.
To dlatego, że specyfika :has()
oparta jest na najbardziej szczegółowy element na liście argumentów. Tak więc, jeśli masz tam coś w rodzaju identyfikatora, twój selektor będzie trudny do przesłonięcia w kaskadzie.
Z drugiej strony, specyfika :where()
jest zawsze zero, nigdy nie dodając do wyniku specyficzności.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Przyszłość jest jasna
To tylko kilka rzeczy, których nie mogę się doczekać, aby móc wykorzystać je w produkcji. CSS-Tricks Almanac również zawiera wiele przykładów. Z czym nie możesz się doczekać :has()
? Jakie przykłady z prawdziwego świata napotkałeś gdzie :has()
byłoby idealnym rozwiązaniem?
- Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
- Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
- Źródło: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- zdolność
- Zdolny
- O nas
- powyżej
- Konto
- oddziaływać
- Wszystkie kategorie
- już
- zawsze
- zdumiewający
- i
- Inne
- Aplikuj
- podejście
- obszary
- argument
- artykuł
- na podstawie
- bo
- Zakład
- Ulepsz Swój
- pomiędzy
- Bit
- Dmuchanie
- wybudowany
- Pęczek
- Może uzyskać
- karta
- wodospady
- pewien
- zmiana
- Zmiany
- dziecko
- Dodaj
- klasa
- Klasy
- CMS
- kod
- kolumny
- składnik
- zawiera
- zawartość
- mógłby
- Kurs
- CSS
- Decyzje
- ostateczny
- W zależności
- Wnętrze
- Nie
- robi
- DOM
- nie
- na dół
- Elementy
- szczególnie
- itp
- Parzyste
- EVER
- Każdy
- przykład
- przykłady
- doświadczenie
- Oczy
- Moja lista
- Cecha
- kilka
- w porządku
- Firefox
- następujący
- Naprzód
- od
- w pełni
- otrzymać
- daje
- Goes
- będzie
- wspaniały
- Krata
- obszary-szablonów-siatki
- poprowadzi
- zdarzyć
- mający
- pomoc
- tutaj
- hi
- wyższy
- Podświetlony
- HTML
- HTTPS
- CHORY
- pomysły
- obraz
- poprawa
- in
- interaktywne
- IT
- JAVASCRIPT
- tylko jeden
- Trzymać
- Uprzejmy
- Wiedzieć
- język
- Nazwisko
- układ
- Prawdopodobnie
- mało
- Popatrz
- poszukuje
- Partia
- Macro
- zrobiony
- Główny
- robić
- zarządzający
- wiele
- może
- moment
- jeszcze
- większość
- Mozilla
- Potrzebować
- wymagania
- Nowości
- Następny
- Next.js
- normalnie
- numer
- Oficjalnie
- ONE
- otwarcie
- Inne
- zewnętrzne
- część
- szczególny
- strony
- Wzór
- Ludzie
- doskonały
- Miejsce
- plato
- Analiza danych Platona
- PlatoDane
- możliwy
- teraźniejszość
- bardzo
- Problem
- Produkcja
- opublikowany
- dosięgnąć
- React
- Czytaj
- Prawdziwy świat
- niedawno
- usuwanie
- czuły
- RZĄD
- reguły
- run
- Powiedział
- taki sam
- skanować
- wybór
- zestaw
- Share
- witryna internetowa
- mądry
- So
- rozwiązanie
- kilka
- coś
- gdzieś
- specjalny
- specyficzny
- specyficzność
- początek
- Stan
- pas
- Paski
- styl
- Wspaniały
- Utrzymany
- stół
- Brać
- TD
- szablon
- Połączenia
- Państwo
- świat
- rzecz
- rzeczy
- myśl
- trzy
- poprzez
- do
- Tona
- także
- CAŁKOWICIE
- śledzić
- prawdziwy
- Upside
- us
- posługiwać się
- Użytkownicy
- ux
- czekać
- sposoby
- Co
- czy
- który
- KIM
- wygrać
- pełen zdumienia
- Praca
- świat
- wartość
- by
- napisać
- You
- Twój
- zefirnet