:has()
pseudoklasse er, praktisk talt, min nye foretrukne CSS-funktion. Jeg ved, at det i hvert fald også er det for mange af jer de af jer, der deltog i State of CSS-undersøgelsen. Evnen til at skrive vælgere på hovedet giver os flere superkræfter, jeg aldrig havde troet var muligt.
Jeg siger "flere superkræfter", fordi der allerede har været et væld af virkelig fantastiske smarte ideer udgivet af en flok superkloge mennesker, som:
Denne artikel er ikke en endelig guide til :has()
. Det er heller ikke her for at gengive det, der allerede er blevet sagt. Det er bare mig (hej 👋), der hopper med på vognen et øjeblik for at dele nogle af de måder, jeg med størst sandsynlighed vil bruge :has()
i mit daglige arbejde... det vil sige, når det officielt er understøttet af Firefox som er nært forestående.
Når det sker, kan du vædde på, at jeg begynder at bruge :has()
over det hele. Her er nogle eksempler fra den virkelige verden på ting, jeg har bygget for nylig og tænkte ved mig selv: "Jamen, det her bliver så meget pænere en gang :has()
er fuldt understøttet."
Undgå at skulle nå uden for din JavaScript-komponent
Har du nogensinde bygget en interaktiv komponent, der nogle gange skal påvirke stilarter et andet sted på siden? Tag følgende eksempel, hvor <nav>
er en mega menu, og åbning af den ændrer farverne på <header>
indhold over det.
Jeg føler, at jeg er nødt til at gøre denne slags ting hele tiden.
Dette særlige eksempel er en React-komponent, jeg lavede til et websted. Jeg var nødt til at "nå udenfor" React-delen af siden med document.querySelector(...)
og slå en klasse på <body>
, <header>
eller en anden komponent. Det er ikke verdens undergang, men det føles bestemt en smule yuck. Selv på et fuldt React-websted (f.eks. et Next.js-websted), ville jeg skulle vælge mellem at administrere en menuIsOpen
stat langt højere oppe i komponenttræet, eller gør det samme DOM-elementvalg — hvilket ikke er særlig React-y.
Med :has()
, problemet forsvinder:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Ikke mere rode med andre dele af DOM i mine JavaScript-komponenter!
Bedre bordstriber UX
Tilføjelse af alternative række "striber" til dine tabeller kan være en god UX-forbedring. De hjælper dine øjne med at holde styr på, hvilken række du er på, mens du scanner bordet.
Men efter min erfaring fungerer dette ikke godt på borde med kun to eller tre rækker. Hvis du for eksempel har en tabel med tre rækker i <tbody>
og du "striber" hver "lige" række, kan du ende med kun en stribe. Det er egentlig ikke et mønster værd og kan få brugere til at spekulere på, hvad der er så specielt ved den ene fremhævede række.
Bruger denne teknik hvor Bramus bruger :has()
at anvende stilarter baseret på antallet af børn, kan vi anvende bordstriber, når der er mere end f.eks. tre rækker:
Hvad skal man blive mere avanceret? Du kan også beslutte kun at gøre dette, hvis tabellen også har mindst et vist antal kolonner:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Fjern betinget klasselogik fra skabeloner
Jeg har ofte brug for at ændre et sidelayout alt efter hvad der er på siden. Tag følgende gitterlayout, hvor placeringen af hovedindholdet ændrer gitterområder afhængigt af, om der er en sidebjælke til stede.
Det er noget, der kan afhænge af, om der er indstillet søskendesider i CMS'et. Jeg ville normalt gøre dette med skabelonlogik for at tilføje betinget BEM modifikator klasser til layoutindpakningen for at tage højde for begge layouts. Den CSS kan se sådan ud (responsive regler og andre ting udeladt for kortheds 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-mæssigt er dette selvfølgelig helt fint. Men det gør skabelonkoden lidt rodet. Afhængigt af dit skabelonsprog kan det blive ret grimt at tilføje en masse klasser betinget, især hvis du også skal gøre dette med mange underordnede elementer.
Sammenlign det med en :has()
-baseret tilgang:
/* 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 . .';
}
Helt ærligt, det er ikke meget bedre CSS-mæssigt. Men at fjerne de betingede modifikatorklasser fra HTML-skabelonen er en god gevinst, hvis du spørger mig.
Det er nemt at tænke på mikrodesignbeslutninger :has()
— som et kort, når der er et billede i det - men jeg tror også, det vil være rigtig nyttigt til disse makrolayoutændringer.
Bedre specificitetsstyring
Hvis du læser min sidste artikel, vil du vide, at jeg holder fast i specificitet. Hvis du, ligesom jeg, ikke vil have, at dine specificitetsscore blæser ud, når du tilføjer :has()
, :not()
i hele dine styles, sørg for at bruge :where()
.
Det er fordi specificiteten af :has()
er baseret på det mest specifikke element i sin argumentliste. Så hvis du har noget som et ID derinde, vil din vælger være svær at tilsidesætte i kaskaden.
På den anden side, specificiteten af :where()
er altid nul, aldrig tilføje til specificitet score.
/* 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 blot nogle få ting, jeg glæder mig til at kunne bruge i produktionen. CSS-Tricks Almanac har også en masse eksempler. Hvad glæder du dig til at lave med :has()
? Hvilken slags eksempler fra den virkelige verden er du stødt på hvor :has()
ville have været den perfekte løsning?
- SEO Powered Content & PR Distribution. Bliv forstærket i dag.
- Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
- Kilde: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- evne
- I stand
- Om
- over
- Konto
- påvirke
- Alle
- allerede
- altid
- forbløffende
- ,
- En anden
- Indløs
- tilgang
- områder
- argument
- artikel
- baseret
- fordi
- Bet
- Bedre
- mellem
- Bit
- blowing
- bygget
- Bunch
- Kan få
- kort
- vandfald
- vis
- lave om
- Ændringer
- barn
- Vælg
- klasse
- klasser
- cms
- kode
- Kolonner
- komponent
- indeholder
- indhold
- kunne
- Kursus
- CSS
- afgørelser
- endelige
- Afhængigt
- Design
- Er ikke
- gør
- DOM
- Dont
- ned
- elementer
- især
- etc.
- Endog
- NOGENSINDE
- Hver
- eksempel
- eksempler
- erfaring
- Øjne
- Favorit
- Feature
- få
- ende
- Firefox
- efter
- Videresend
- fra
- fuldt ud
- få
- giver
- Goes
- gå
- stor
- Grid
- gitter-skabelon-områder
- vejlede
- ske
- have
- hjælpe
- link.
- hi
- højere
- Fremhævet
- HTML
- HTTPS
- SYG
- ideer
- billede
- in
- interaktiv
- IT
- JavaScript
- bare en
- Holde
- Venlig
- Kend
- Sprog
- Efternavn
- Layout
- Sandsynlig
- lidt
- Se
- leder
- Lot
- Makro
- lavet
- Main
- lave
- styring
- mange
- måske
- øjeblik
- mere
- mest
- Mozilla
- Behov
- behov
- Ny
- næste
- Next.js
- Normalt
- nummer
- Officielt
- ONE
- åbning
- Andet
- uden for
- del
- særlig
- dele
- Mønster
- Mennesker
- perfekt
- Place
- plato
- Platon Data Intelligence
- PlatoData
- mulig
- præsentere
- smuk
- Problem
- produktion
- offentliggjort
- nå
- Reagerer
- Læs
- virkelige verden
- for nylig
- fjernelse
- lydhør
- RÆKKE
- regler
- Kør
- Said
- samme
- scanne
- valg
- sæt
- Del
- websted
- Smart
- So
- løsninger
- nogle
- noget
- et eller andet sted
- særligt
- specifikke
- specificitet
- starte
- Tilstand
- stribe
- Striber
- stil
- Super
- Understøttet
- bord
- Tag
- TD
- skabelon
- Staten
- verdenen
- ting
- ting
- tænkte
- tre
- hele
- til
- Ton
- også
- HELT
- spor
- sand
- upside
- us
- brug
- brugere
- ux
- vente
- måder
- Hvad
- hvorvidt
- som
- WHO
- vinde
- undrende
- Arbejde
- world
- værd
- ville
- skriver
- Du
- Din
- zephyrnet