:has()
pseudo-clasă este, fără îndoială, noua mea caracteristică CSS preferată. Știu că este și pentru mulți dintre voi, cel puțin cei dintre voi care au participat la sondajul State of CSS. Abilitatea de a scrie selectoare cu susul în jos ne oferă mai multe superputeri pe care nu le-am crezut niciodată posibile.
Spun „mai multe superputeri” pentru că au existat deja o mulțime de idei inteligente cu adevărat uimitoare publicate de o grămadă de oameni super inteligenți, cum ar fi:
Acest articol nu este un ghid definitiv pentru :has()
. Nici nu este aici pentru a regurgita ceea ce s-a spus deja. Sunt doar eu (bună 👋) să sar în vagon pentru un moment pentru a vă împărtăși câteva dintre modalitățile pe care este cel mai probabil să le folosesc :has()
în munca mea de zi cu zi... adică odată ce este susținut oficial de Firefox care este iminentă.
Când se întâmplă asta, poți să pariezi că voi începe să folosesc :has()
peste tot. Iată câteva exemple din lumea reală de lucruri pe care le-am construit recent și m-am gândit în sinea mea: „Păi, asta va fi mult mai frumos odată :has()
este pe deplin susținută.”
Evitați să fiți nevoit să ajungeți în afara componentei dvs. JavaScript
Ați construit vreodată o componentă interactivă care uneori trebuie să afecteze stilurile în altă parte a paginii? Luați următorul exemplu, unde <nav>
este mega meniu, iar deschiderea acestuia schimbă culorile <header>
conținut deasupra acestuia.
Simt că trebuie să fac așa ceva tot timpul.
Acest exemplu special este o componentă React pe care am făcut-o pentru un site. A trebuit să „ating în afara” partea React a paginii cu document.querySelector(...)
și comutați o clasă pe <body>
, <header>
, sau altă componentă. Acesta nu este sfârșitul lumii, dar cu siguranță se simte puțin prost. Chiar și într-un site complet React (un site Next.js, să zicem), ar trebui să aleg între gestionarea unui menuIsOpen
stare mult mai sus în arborele componente sau faceți aceeași selecție de elemente DOM - care nu este foarte React-y.
cu :has()
, problema dispare:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Gata cu alte părți ale DOM din componentele mele JavaScript!
UX mai bun pentru striping de masă
Adăugarea de „dungi” pe rânduri alternative la mesele dvs. poate fi o îmbunătățire plăcută a UX. Ele vă ajută ochii să țină evidența în ce rând vă aflați în timp ce scanați tabelul.
Dar, din experiența mea, acest lucru nu funcționează grozav pe mesele cu doar două sau trei rânduri. Dacă aveți, de exemplu, un tabel cu trei rânduri în <tbody>
și „dungi” fiecare rând „par”, ai putea ajunge cu o singură dungă. Acesta nu merită cu adevărat un model și ar putea face utilizatorii să se întrebe ce este atât de special la rândul evidențiat.
Folosind această tehnică unde Bramus folosește :has()
să aplice stiluri în funcție de numărul de copii, putem aplica dungi de tablă atunci când există mai mult de, să zicem, trei rânduri:
Ce să devin mai chic? De asemenea, puteți decide să faceți acest lucru numai dacă tabelul are și cel puțin un anumit număr de coloane:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Eliminați logica de clasă condiționată din șabloane
De multe ori trebuie să schimb aspectul unei pagini în funcție de ceea ce este pe pagină. Luați următorul aspect al grilei, unde plasarea conținutului principal modifică zonele grilei în funcție de dacă există o bară laterală.
Acesta este ceva care ar putea depinde de dacă există pagini frate setate în CMS. În mod normal, aș face acest lucru cu logica șablonului pentru a adăuga condiționat Clasele modificatoare BEM la ambalajul layout-ului pentru a ține cont de ambele layout-uri. Acel CSS ar putea arăta cam așa (reguli receptive și alte lucruri omise din motive de concizie):
/* 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 . .';
}
Din punct de vedere CSS, acest lucru este perfect, desigur. Dar face codul șablonului puțin dezordonat. În funcție de limbajul dvs. de șablon, poate deveni destul de urât să adăugați condiționat o grămadă de clase, mai ales dacă trebuie să faceți acest lucru și cu o mulțime de elemente copil.
Compară asta cu a :has()
abordare bazată pe:
/* 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 . .';
}
Sincer, nu este mult mai bun din punct de vedere CSS. Dar eliminarea claselor modificatoare condiționale din șablonul HTML este un câștig frumos dacă mă întrebați pe mine.
Este ușor să te gândești la decizii de micro-design pentru :has()
- ca un card când are o imagine în el — dar cred că va fi foarte util și pentru aceste modificări de aspect macro.
Management mai bun al specificității
Dacă citiți ultimul meu articol, o să știi că sunt un obstinat pentru specificitate. Dacă, ca mine, nu doriți ca scorurile dvs. de specificitate să explodeze atunci când adăugați :has()
și :not()
pe toate stilurile dvs., asigurați-vă că le utilizați :where()
.
Asta pentru că specificul :has()
se bazeaza pe elementul cel mai specific din lista sa de argumente. Deci, dacă aveți ceva de genul unui ID acolo, selectorul dvs. va fi greu de anulat în cascadă.
Pe de altă parte, specificul de :where()
este întotdeauna zero, fără nicio adăugare la scorul de specificitate.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Viitorul e luminos
Acestea sunt doar câteva lucruri pe care abia aștept să le pot folosi în producție. Almanahul CSS-Tricks are și o grămadă de exemple. Cu ce aștepți cu nerăbdare să faci :has()
? Ce fel de exemple din lumea reală ați întâlnit unde :has()
ar fi fost solutia perfecta?
- Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
- Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
- Sursa: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- capacitate
- Capabil
- Despre Noi
- mai sus
- Cont
- afecta
- TOATE
- deja
- mereu
- uimitor
- și
- O alta
- Aplică
- abordare
- domenii
- argument
- articol
- bazat
- deoarece
- Pariu
- Mai bine
- între
- Pic
- Suflare
- construit
- Buchet
- Poate obține
- card
- cascadă
- sigur
- Schimbare
- Modificări
- copil
- Alege
- clasă
- clase
- CMS
- cod
- Coloane
- component
- conține
- conţinut
- ar putea
- Curs
- CSS
- Deciziile
- definitiv
- În funcție
- Amenajări
- Nu
- face
- HOTĂRÂREA
- Dont
- jos
- element
- mai ales
- etc
- Chiar
- EVER
- Fiecare
- exemplu
- exemple
- experienţă
- Ochi
- Favorite
- Caracteristică
- puțini
- capăt
- Firefox
- următor
- Înainte
- din
- complet
- obține
- oferă
- Merge
- merge
- mare
- Grilă
- zone-șablon-grilă
- ghida
- întâmpla
- având în
- ajutor
- aici
- hi
- superior
- Evidențiat
- HTML
- HTTPS
- BOLNAV
- idei
- imagine
- îmbunătățire
- in
- interactiv
- IT
- JavaScript
- doar unul
- A pastra
- Copil
- Cunoaște
- limbă
- Nume
- Aspect
- Probabil
- mic
- Uite
- cautati
- Lot
- Macro
- făcut
- Principal
- face
- de conducere
- multe
- ar putea
- moment
- mai mult
- cele mai multe
- Mozilla
- Nevoie
- nevoilor
- Nou
- următor
- Next.js
- în mod normal
- număr
- Oficial
- ONE
- de deschidere
- Altele
- exterior
- parte
- special
- piese
- Model
- oameni
- Perfect
- Loc
- Plato
- Informații despre date Platon
- PlatoData
- posibil
- prezenta
- destul de
- Problemă
- producere
- publicat
- ajunge
- Reacţiona
- Citeste
- lumea reală
- recent
- eliminarea
- sensibil
- RÂND
- norme
- Alerga
- Said
- acelaşi
- scanare
- selecţie
- set
- Distribuie
- teren
- inteligent
- So
- soluţie
- unele
- ceva
- undeva
- special
- specific
- specificitate
- Începe
- Stat
- dungă
- dungi
- stil
- Super
- Suportat
- tabel
- Lua
- TD
- șablon
- Statul
- lumea
- lucru
- lucruri
- gândit
- trei
- de-a lungul
- la
- Tonă
- de asemenea
- INTRU TOTUL
- urmări
- adevărat
- întoarsă pe dos
- us
- utilizare
- utilizatorii
- ux
- aștepta
- modalități de
- Ce
- dacă
- care
- OMS
- câştiga
- întrebam
- Apartamente
- lume
- valoare
- ar
- scrie
- Tu
- Ta
- zephyrnet