De :has()
pseudo-klasse is zonder twijfel mijn favoriete nieuwe CSS-functie. Ik weet dat het voor velen van jullie ook geldt, in ieder geval degenen onder u die de State of CSS-enquête hebben ingevuld. De mogelijkheid om selectors ondersteboven te schrijven geeft ons meer superkrachten die ik nooit voor mogelijk had gehouden.
Ik zeg "meer superkrachten" omdat er al heel veel echt verbazingwekkende slimme ideeën zijn gepubliceerd door een stel superslimme mensen, zoals:
Dit artikel is geen definitieve gids voor :has()
. Het is ook niet hier om uit te braken wat er al is gezegd. Ik ben het alleen (hoi 👋) die even op de kar springt om enkele manieren te delen die ik waarschijnlijk zal gebruiken :has()
in mijn dagelijkse werk ... dat wil zeggen, zodra het officieel wordt ondersteund door Firefox wat aanstaande is.
Als dat gebeurt, kun je er zeker van zijn dat ik ga gebruiken :has()
overal. Hier zijn enkele praktijkvoorbeelden van dingen die ik onlangs heb gebouwd en waarvan ik bij mezelf dacht: "Goh, dit wordt zoveel mooier als :has()
wordt volledig ondersteund.”
Voorkom dat u buiten uw JavaScript-component moet reiken
Heb je ooit een interactieve component gebouwd die soms stijlen ergens anders op de pagina moet beïnvloeden? Neem het volgende voorbeeld, waar <nav>
is een mega menu, en als je het opent, veranderen de kleuren van het <header>
inhoud erboven.
Ik heb het gevoel dat ik dit soort dingen moet doen altijd.
Dit specifieke voorbeeld is een React-component die ik voor een site heb gemaakt. Ik moest "buiten reiken" het React-gedeelte van de pagina met document.querySelector(...)
en schakel een klas op de <body>
, <header>
, of een ander onderdeel. Dat is niet het einde van de wereld, maar het voelt zeker een beetje vies. Zelfs op een volledig React-site (bijvoorbeeld een Next.js-site), zou ik moeten kiezen tussen het beheren van een menuIsOpen
sta veel hoger in de componentenboom, of doe dezelfde DOM-elementselectie - wat niet erg React-y is.
met :has()
, het probleem verdwijnt:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Geen gedoe meer met andere delen van de DOM in mijn JavaScript-componenten!
Betere tafelstriping UX
Het toevoegen van alternatieve rij "strepen" aan uw tabellen kan een mooie UX-verbetering zijn. Ze helpen uw ogen bij te houden op welke rij u zich bevindt terwijl u de tafel scant.
Maar mijn ervaring is dat dit niet goed werkt op tabellen met slechts twee of drie rijen. Als je bijvoorbeeld een tabel hebt met drie rijen in de <tbody>
en je "streept" elke "even" rij, je zou kunnen eindigen met slechts één streep. Dat is niet echt een patroon waard en gebruikers vragen zich misschien af wat er zo speciaal is aan die ene gemarkeerde rij.
Met behulp van deze techniek waar Bramus gebruikt :has()
stijlen toepassen op basis van het aantal kinderen, kunnen we dubbele strepen toepassen als er meer dan, laten we zeggen, drie rijen zijn:
Wat liefhebber te worden? U kunt er ook voor kiezen om dit alleen te doen als de tabel ook minimaal een bepaald aantal kolommen heeft:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Voorwaardelijke klassenlogica uit sjablonen verwijderen
Ik moet vaak een paginalay-out wijzigen, afhankelijk van wat er op de pagina staat. Neem de volgende rasterlay-out, waarbij de plaatsing van de hoofdinhoud de rastergebieden verandert, afhankelijk van of er een zijbalk aanwezig is.
Dat is iets dat kan afhangen van het feit of er zusterpagina's zijn ingesteld in het CMS. Ik zou dit normaal gesproken doen met sjabloonlogica om voorwaardelijk toe te voegen BEM-modificatieklassen naar de lay-outverpakking om rekening te houden met beide lay-outs. Die CSS zou er ongeveer zo uit kunnen zien (responsieve regels en andere dingen zijn kortheidshalve weggelaten):
/* 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 . .';
}
Qua CSS is dit natuurlijk helemaal prima. Maar het maakt de sjablooncode wel een beetje rommelig. Afhankelijk van je sjabloontaal kan het behoorlijk lelijk worden om voorwaardelijk een aantal klassen toe te voegen, vooral als je dit ook met veel onderliggende elementen moet doen.
Vergelijk dat met een :has()
-gebaseerde aanpak:
/* 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 . .';
}
Eerlijk gezegd is dat qua CSS niet veel beter. Maar het verwijderen van de voorwaardelijke modificatieklassen uit de HTML-sjabloon is een mooie overwinning als je het mij vraagt.
Het is gemakkelijk om micro-ontwerpbeslissingen voor te bedenken :has()
- als een kaart als er een afbeelding in staat - maar ik denk dat het ook erg handig zal zijn voor deze wijzigingen in de macro-indeling.
Beter specificiteitsbeheer
Als je leest mijn laatste artikel, je zult weten dat ik een voorstander ben van specificiteit. Als je, zoals ik, niet wilt dat je specificiteitsscores eruit springen bij het optellen :has()
en :not()
in al uw stijlen, zorg ervoor dat u gebruikt :where()
.
Dat komt omdat de specificiteit van :has()
is gebaseerd op het meest specifieke element in de lijst met argumenten. Dus als je zoiets als een ID hebt, zal je selector moeilijk te overschrijven zijn in de cascade.
Daarnaast is de specificiteit van :where()
is altijd nul, nooit toevoegend aan de specificiteitsscore.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
De toekomst ziet er rooskleurig uit
Dit zijn slechts een paar dingen die ik niet kan wachten om in productie te kunnen gebruiken. De CSS-Tricks Almanac heeft ook een heleboel voorbeelden. Waar kijk je naar uit om mee te doen :has()
? Wat voor voorbeelden uit de praktijk ben je waar tegengekomen :has()
zou de perfecte oplossing zijn geweest?
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
- Bron: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- vermogen
- in staat
- Over
- boven
- Account
- invloed hebben op
- Alles
- al
- altijd
- verbazingwekkend
- en
- Nog een
- Solliciteer
- nadering
- gebieden
- argument
- dit artikel
- gebaseerde
- omdat
- Wedden
- Betere
- tussen
- Beetje
- Blazen
- bebouwd
- Bos
- Kan krijgen
- kaart
- watervallen
- zeker
- verandering
- Wijzigingen
- kind
- Kies
- klasse
- klassen
- cms
- code
- columns
- bestanddeel
- bevat
- content
- kon
- Type cursus
- CSS
- beslissingen
- definitief
- Afhankelijk
- Design
- Nee
- doen
- ARREST
- Dont
- beneden
- geeft je de mogelijkheid
- vooral
- etc
- Zelfs
- OOIT
- Alle
- voorbeeld
- voorbeelden
- ervaring
- Ogen
- Favoriet
- Kenmerk
- weinig
- einde
- Firefox
- volgend
- Naar voren
- oppompen van
- geheel
- krijgen
- geeft
- Goes
- gaan
- groot
- Raster
- raster-sjabloon-gebieden
- gids
- gebeuren
- met
- hulp
- hier
- hi
- hoger
- Gemarkeerd
- HTML
- HTTPS
- ZIEK
- ideeën
- beeld
- verbetering
- in
- interactieve
- IT
- JavaScript
- eentje maar
- Houden
- Soort
- blijven
- taal
- Achternaam*
- Layout
- Waarschijnlijk
- Elke kleine stap levert grote resultaten op!
- Kijk
- op zoek
- lot
- Macro
- gemaakt
- Hoofd
- maken
- beheren
- veel
- macht
- moment
- meer
- meest
- mozilla
- Noodzaak
- behoeften
- New
- volgende
- Next.js
- normaal
- aantal
- Officieel
- EEN
- opening
- Overige
- buiten
- deel
- bijzonder
- onderdelen
- Patronen
- Mensen
- plaats
- Plato
- Plato gegevensintelligentie
- PlatoData
- mogelijk
- presenteren
- mooi
- probleem
- productie
- gepubliceerde
- bereiken
- Reageren
- Lees
- echte wereld
- onlangs
- het verwijderen van
- responsive
- RIJ
- reglement
- lopen
- Zei
- dezelfde
- aftasten
- selectie
- reeks
- Delen
- website
- slim
- So
- oplossing
- sommige
- iets
- ergens
- special
- specifiek
- specificiteit
- begin
- Land
- streep
- Strepen
- stijl
- Super
- ondersteunde
- tafel
- Nemen
- TD
- sjabloon
- De
- De Staat
- de wereld
- ding
- spullen
- gedachte
- drie
- overal
- naar
- Toon
- ook
- TOTAAL
- spoor
- waar
- bovenkant
- us
- .
- gebruikers
- ux
- wachten
- manieren
- Wat
- of
- welke
- WIE
- winnen
- afvragen
- Mijn werk
- wereld
- waard
- zou
- schrijven
- You
- Your
- zephyrnet