De :has()
pseudoklasse er uten tvil min nye favoritt CSS-funksjon. Jeg vet at det er for mange av dere også, i det minste de av dere som tok State of CSS-undersøkelsen. Evnen til å skrive velgere opp ned gir oss flere superkrefter jeg aldri hadde trodd var mulig.
Jeg sier "flere superkrefter" fordi det allerede har vært massevis av virkelig fantastiske smarte ideer publisert av en haug med supersmarte mennesker, som:
Denne artikkelen er ikke en definitiv guide til :has()
. Det er heller ikke her for å gjengi det som allerede er sagt. Det er bare meg (hei 👋) som hopper på vognen et øyeblikk for å dele noen av måtene jeg mest sannsynlig vil bruke :has()
i det daglige arbeidet mitt... det vil si når det er offisielt støttet av Firefox som er nært forestående.
Når det skjer, kan du satse på at jeg begynner å bruke :has()
over alt. Her er noen eksempler fra den virkelige verden på ting jeg har bygget nylig og tenkte med meg selv: «Jøss, dette blir så mye finere en gang :has()
støttes fullt ut."
Unngå å måtte nå utenfor JavaScript-komponenten
Har du noen gang bygget en interaktiv komponent som noen ganger må påvirke stiler et annet sted på siden? Ta følgende eksempel, hvor <nav>
er en mega-menyen, og å åpne den endrer fargene på <header>
innhold over det.
Jeg føler at jeg trenger å gjøre denne typen ting hele tiden.
Dette spesielle eksemplet er en React-komponent jeg har laget for et nettsted. Jeg måtte "nå utenfor" React-delen av siden med document.querySelector(...)
og slå en klasse på <body>
, <header>
, eller en annen komponent. Det er ikke verdens ende, men det føles sikkert litt tøft. Selv på et fullstendig React-nettsted (f.eks. et Next.js-nettsted), må jeg velge mellom å administrere en menuIsOpen
oppgi langt høyere opp i komponenttreet, eller gjør det samme DOM-elementvalget - som ikke er veldig React-y.
Med :has()
, problemet forsvinner:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Ikke mer fikle med andre deler av DOM i JavaScript-komponentene mine!
Bedre bordstriping UX
Å legge til alternative rad "striper" til tabellene dine kan være en fin UX-forbedring. De hjelper øynene dine med å holde oversikt over hvilken rad du er på mens du skanner tabellen.
Men etter min erfaring fungerer ikke dette bra på bord med bare to eller tre rader. Hvis du for eksempel har en tabell med tre rader i <tbody>
og du "striper" hver "jevn" rad, kan du ende opp med bare én stripe. Det er egentlig ikke verdt et mønster og kan få brukere til å lure på hva som er så spesielt med den uthevede raden.
Ved å bruke denne teknikken hvor Bramus bruker :has()
å bruke stiler basert på antall barn, kan vi bruke bordstriper når det er mer enn for eksempel tre rader:
Hva å bli mer avansert? Du kan også velge å bare gjøre dette hvis tabellen har minst et visst antall kolonner også:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Fjern betinget klasselogikk fra maler
Jeg må ofte endre et sideoppsett avhengig av hva som er på siden. Ta følgende rutenettoppsett, der plasseringen av hovedinnholdet endrer rutenettområder avhengig av om det er en sidefelt til stede.
Det er noe som kan avhenge av om det er angitt søskensider i CMS. Jeg vil vanligvis gjøre dette med mallogikk for å legge til betinget BEM-modifikatorklasser til layoutomslaget for å ta hensyn til begge layoutene. Den CSS kan se omtrent slik ut (responsive regler og andre ting utelatt for korthets skyld):
/* 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-messig er dette helt greit, selvfølgelig. Men det gjør malkoden litt rotete. Avhengig av malspråket ditt kan det bli ganske stygt å betinget legge til en haug med klasser, spesielt hvis du også må gjøre dette med mange barneelementer.
Kontrast det med en :has()
-basert tilnærming:
/* 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 . .';
}
Ærlig talt, det er ikke mye bedre CSS-messig. Men å fjerne de betingede modifikatorklassene fra HTML-malen er en fin gevinst spør du meg.
Det er lett å tenke på mikrodesignbeslutninger :has()
- som et kort når det har et bilde i seg - men jeg tror det vil være veldig nyttig for disse makrolayoutendringene også.
Bedre spesifisitetsstyring
Hvis du leser min siste artikkel, vil du vite at jeg holder fast på spesifisitet. Hvis du, som meg, ikke vil at spesifisitetspoengene dine skal slå ut når du legger til :has()
og :not()
gjennom stilene dine, sørg for å bruke :where()
.
Det er fordi spesifisiteten til :has()
er basert på det mest spesifikke elementet i argumentlisten. Så hvis du har noe sånt som en ID der inne, vil velgeren din være vanskelig å overstyre i kaskaden.
På den annen side, spesifisiteten til :where()
er alltid null, og legger aldri til spesifisitetspoengsummen.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Fremtiden er lys
Dette er bare noen få ting jeg gleder meg til å kunne bruke i produksjonen. CSS-Tricks Almanac har også en haug med eksempler. Hva gleder du deg til å gjøre med :has()
? Hva slags eksempler fra den virkelige verden har du støtt på hvor :has()
hadde vært den perfekte løsningen?
- SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
- Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
- kilde: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- evne
- I stand
- Om oss
- ovenfor
- Logg inn
- påvirke
- Alle
- allerede
- alltid
- utrolig
- og
- En annen
- Påfør
- tilnærming
- områder
- argument
- Artikkel
- basert
- fordi
- Bet
- Bedre
- mellom
- Bit
- Blåser
- bygget
- Bunch
- Kan få
- kort
- cascade
- viss
- endring
- Endringer
- barn
- Velg
- klasse
- klasser
- CMS
- kode
- kolonner
- komponent
- inneholder
- innhold
- kunne
- Kurs
- CSS
- avgjørelser
- definitive
- avhengig
- utforming
- ikke
- gjør
- DOM
- ikke
- ned
- elementer
- spesielt
- etc
- Selv
- NOEN GANG
- Hver
- eksempel
- eksempler
- erfaring
- øyne
- Favoritt
- Trekk
- Noen få
- slutt
- Firefox
- etter
- Forward
- fra
- fullt
- få
- gir
- Går
- skal
- flott
- Grid
- rutenett-mal-områder
- veilede
- skje
- å ha
- hjelpe
- her.
- hi
- høyere
- Fremhevet
- HTML
- HTTPS
- JEG VIL
- Ideer
- bilde
- forbedring
- in
- interaktiv
- IT
- Javascript
- bare én
- Hold
- Type
- Vet
- Språk
- Siste
- Layout
- Sannsynlig
- lite
- Se
- ser
- Lot
- Makro
- laget
- Hoved
- gjøre
- administrerende
- mange
- kunne
- øyeblikk
- mer
- mest
- Mozilla
- Trenger
- behov
- Ny
- neste
- Next.js
- normalt
- Antall
- offisielt
- ONE
- åpning
- Annen
- utenfor
- del
- Spesielt
- deler
- Mønster
- Ansatte
- perfekt
- Sted
- plato
- Platon Data Intelligence
- PlatonData
- mulig
- presentere
- pen
- Problem
- Produksjon
- publisert
- å nå
- Reager
- Lese
- virkelige verden
- nylig
- fjerne
- responsive
- RAD
- regler
- Kjør
- Sa
- samme
- skanne
- utvalg
- sett
- Del
- nettstedet
- Smart
- So
- løsning
- noen
- noe
- et sted
- spesiell
- spesifikk
- spesifisitet
- Begynn
- Tilstand
- stripe
- Stripes
- stil
- Super
- Støttes
- bord
- Ta
- TD
- mal
- De
- Staten
- verden
- ting
- ting
- trodde
- tre
- hele
- til
- ton
- også
- HELT KLART
- spor
- sant
- upside
- us
- bruke
- Brukere
- ux
- vente
- måter
- Hva
- om
- hvilken
- HVEM
- vinne
- lurer
- Arbeid
- verden
- verdt
- ville
- skrive
- Du
- Din
- zephyrnet