. :has()
pseudoklass on minu lemmik uus CSS-funktsioon. Ma tean, et see kehtib ka paljudele teist need teist, kes osalesid CSS-i seisundi uuringus. Võimalus selektoreid tagurpidi kirjutada annab meile rohkem supervõimeid, mida ma poleks kunagi arvanud.
Ma ütlen "rohkem supervõimeid", sest paljud supertarkad inimesed on avaldanud juba palju hämmastavaid nutikaid ideid, näiteks:
See artikkel ei ole lõplik juhend :has()
. See ei ole siin ka selleks, et juba öeldut tagasi lükata. Lihtsalt mina (tere 👋) hüppan korraks vagunisse, et jagada mõningaid viise, mida ma kõige tõenäolisemalt kasutan :has()
minu igapäevases töös… see tähendab, kui Firefox on seda ametlikult toetanud mis on kohe käes.
Kui see juhtub, võite kihla vedada, et hakkan kasutama :has()
laiali. Siin on mõned reaalsed näited asjadest, mida olen hiljuti ehitanud ja endamisi mõelnud: "Oh, see on kord palju toredam :has()
on täielikult toetatud."
Vältige jõudmist väljapoole oma JavaScripti komponenti
Kas olete kunagi loonud interaktiivse komponendi, mis mõnikord peab mõjutama stiile kusagil mujal lehel? Võtke järgmine näide, kus <nav>
on mega menüü, ja selle avamine muudab selle värvid <header>
sisu selle kohal.
Ma tunnen, et pean sellist asja tegema kogu aeg.
See konkreetne näide on Reacti komponent, mille tegin saidi jaoks. Ma pidin lehe Reacti osast väljapoole jõudma document.querySelector(...)
ja lülitage klassi sisse <body>
, <header>
või mõni muu komponent. See ei ole maailma lõpp, kuid see tundub kindlasti natuke jabur. Isegi täielikult Reacti saidil (näiteks Next.js saidil) peaksin valima a haldamise vahel menuIsOpen
seadke komponendipuust palju kõrgemale või tehke sama DOM-i elemendi valik – mis ei ole väga React-y.
koos :has()
, probleem kaob:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Enam ei pea minu JavaScripti komponentides DOM-i muude osadega askeldama!
Parem lauariba UX
Alternatiivsete ridade "triipude" lisamine tabelitele võib olla kena UX-i täiustus. Need aitavad teie silmadel tabelit skannides jälgida, millisel real olete.
Kuid minu kogemuse kohaselt ei tööta see suurepäraselt kahe või kolme reaga laudadel. Kui teil on näiteks kolme reaga tabel <tbody>
ja "triibutades" iga "ühtlase" rea, võib tulemuseks olla vaid üks triip. See pole tegelikult mustrit väärt ja kasutajatel võib tekkida küsimus, mis selles esiletõstetud reas nii erilist on.
Seda tehnikat kasutades kus Bramus kasutab :has()
laste arvust lähtuvate stiilide rakendamiseks, saame tabelitriipe rakendada, kui ridu on rohkem kui näiteks kolm:
Mida teha ilusamaks? Samuti võite otsustada seda teha ainult siis, kui tabelis on vähemalt teatud arv veerge:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Eemalda mallidest tingimusliku klassi loogika
Pean sageli lehe paigutust muutma sõltuvalt sellest, mis lehel on. Võtke järgmine ruudustiku paigutus, kus põhisisu paigutus muudab ruudustiku alasid olenevalt sellest, kas seal on külgriba.
See võib sõltuda sellest, kas CMS-is on seatud sõsarlehti. Tavaliselt teeksin seda tinglikult lisamiseks malliloogikaga BEM modifikaatorite klassid paigutuse ümbrisesse, et arvestada mõlema paigutusega. See CSS võib välja näha umbes selline (reageerivad reeglid ja muu sisu on lühiduse huvides välja jäetud):
/* 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 . .';
}
CSS-i mõttes on see muidugi täiesti korras. Kuid see muudab malli koodi pisut segaseks. Sõltuvalt teie mallikeelest võib klasside tinglikult lisamine olla üsna inetu, eriti kui peate seda tegema ka paljude alamelementidega.
Vastandina sellele a :has()
-põhine lähenemine:
/* 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 . .';
}
Ausalt öeldes pole see CSS-i osas palju parem. Kuid tingimuslike modifikaatorite klasside eemaldamine HTML-i mallist on hea võit, kui minu käest küsida.
Mikrodisaini otsuseid on lihtne välja mõelda :has()
- nagu kaart, kui sellel on pilt — kuid ma arvan, et see on tõesti kasulik ka nende makropaigutuse muudatuste puhul.
Parem spetsiifilisuse juhtimine
Kui sa loed minu viimane artikkel, saate teada, et ma olen konkreetsuse otsija. Kui te, nagu mina, ei taha, et teie spetsiifilisuse hinded lisamisel välja kukuks :has()
ja :not()
kasutage kindlasti kogu oma stiilis :where()
.
Seda seetõttu, et spetsiifilisus :has()
põhineb kõige spetsiifilisem element argumentide loendis. Seega, kui teil on seal midagi nagu ID, on teie valijat raske kaskaadis alistada.
Teiselt poolt, spetsiifilisus :where()
on alati null, ei lisa kunagi spetsiifilisuse skoori.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Tulevik on helge
Need on vaid mõned asjad, mida ma ei jõua ära oodata, millal saan tootmises kasutada. CSS-Tricksi almanahhil on ka hunnik näiteid. Millega tegelemist ootate :has()
? Milliseid reaalseid näiteid olete kohanud :has()
oleks olnud ideaalne lahendus?
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- võime
- Võimalik
- MEIST
- üle
- konto
- mõjutada
- Materjal: BPA ja flataatide vaba plastik
- juba
- alati
- hämmastav
- ja
- Teine
- kehtima
- lähenemine
- valdkondades
- argument
- artikkel
- põhineb
- sest
- Panus
- Parem
- vahel
- Natuke
- Puhumine
- ehitatud
- Kobar
- Saab
- kaart
- juga
- kindel
- muutma
- Vaidluste lahendamine
- laps
- Vali
- klass
- klassid
- Cms
- kood
- Veerud
- komponent
- sisaldab
- sisu
- võiks
- Kursus
- CSS
- otsused
- lõplik
- Olenevalt
- Disain
- Ei tee
- teeme
- DOM
- Ära
- alla
- elemendid
- eriti
- jms
- Isegi
- KUNAGI
- Iga
- näide
- näited
- kogemus
- silmad
- Lemmik
- tunnusjoon
- vähe
- lõpp
- Firefox
- Järel
- edasi
- Alates
- täielikult
- saama
- annab
- Goes
- läheb
- suur
- võre
- ruudustik-malli-alad
- suunata
- juhtuda
- võttes
- aitama
- siin
- hi
- rohkem
- Esiletõstetud
- HTML
- HTTPS
- Ma teen
- ideid
- pilt
- paranemine
- in
- interaktiivne
- IT
- JavaScript
- ainult üks
- hoidma
- Laps
- Teadma
- keel
- viimane
- Layout
- Tõenäoliselt
- vähe
- Vaata
- otsin
- Partii
- Makro
- tehtud
- põhiline
- tegema
- juhtiv
- palju
- võib
- hetk
- rohkem
- kõige
- Mozilla
- Vajadus
- vajadustele
- Uus
- järgmine
- Järgmine.js
- Tavaliselt
- number
- Ametlikult
- ONE
- avamine
- Muu
- väljaspool
- osa
- eriline
- osad
- Muster
- Inimesed
- täiuslik
- Koht
- Platon
- Platoni andmete intelligentsus
- PlatoData
- võimalik
- esitada
- ilus
- Probleem
- Produktsioon
- avaldatud
- jõudma
- Reageerima
- Lugenud
- päris maailm
- hiljuti
- eemaldades
- tundlik
- ROW
- eeskirjade
- jooks
- Ütlesin
- sama
- skaneerida
- valik
- komplekt
- Jaga
- site
- nutikas
- So
- lahendus
- mõned
- midagi
- kuskil
- eriline
- konkreetse
- spetsiifilisus
- algus
- riik
- triip
- Stripes
- stiil
- super
- Toetatud
- tabel
- Võtma
- TD
- šabloon
- .
- Riik
- maailm
- asi
- asjad
- arvasin
- kolm
- läbi kogu
- et
- tonn
- liiga
- TÄIELIKULT
- jälgida
- tõsi
- Upside
- us
- kasutama
- Kasutajad
- ux
- ootama
- kuidas
- M
- kas
- mis
- WHO
- võitma
- ei tea
- Töö
- maailm
- väärt
- oleks
- kirjutama
- sa
- Sinu
- sephyrnet