A :has()
álosztály lefelé a kedvenc új CSS-funkcióm. Tudom, hogy ez sokaknak így van, legalábbis azok közül, akik részt vettek a CSS állapota felmérésben. Az a képesség, hogy fejjel lefelé írjuk a szelektorokat, olyan szuperképességeket ad nekünk, amelyeket soha nem gondoltam volna.
Azért mondom, hogy „több szuperképesség”, mert rengeteg igazán elképesztő okos ötletet tett közzé már egy csomó szuperokos ember, mint például:
Ez a cikk nem egy végleges útmutató :has()
. Szintén nem azért van itt, hogy a már elhangzottakat visszaterelje. Csak én (szia 👋) ugrok egy pillanatra a kocsira, hogy megosszam néhány módszert, amelyet valószínűleg használni fogok :has()
a mindennapi munkám során… vagyis ha már hivatalosan is támogatja a Firefox ami küszöbön áll.
Amikor ez megtörténik, fogadhat, hogy elkezdem használni :has()
mindenhol. Íme néhány valós példa azokra a dolgokra, amelyeket a közelmúltban építettem, és azt gondoltam magamban: „Jé, ez egyszer sokkal szebb lesz :has()
teljes mértékben támogatott.”
Ne kelljen a JavaScript-összetevőn kívülre nyúlni
Létrehozott már olyan interaktív összetevőt, amelynek néha az oldalon máshol is befolyásolnia kell a stílusokat? Vegyük a következő példát, ahol <nav>
egy olyan mega menü, és megnyitása megváltoztatja a színeket a <header>
felette lévő tartalom.
Úgy érzem, nekem ilyesmit kell csinálnom mindig.
Ez a konkrét példa egy React komponens, amelyet egy webhelyhez készítettem. Ki kellett érnem az oldal React részét document.querySelector(...)
és váltson egy osztályt a <body>
, <header>
, vagy más komponens. Ez nem a világ vége, de az biztos, hogy egy kicsit rossz érzés. Még egy teljesen React webhelyen is (például egy Next.js webhelyen) választanom kell az a menuIsOpen
állítsa feljebb az összetevőfát, vagy végezze el ugyanazt a DOM-elem kiválasztását – ami nem túl React-y.
A :has()
, a probléma megszűnik:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Nem kell többé babrálni a DOM más részeivel a JavaScript-összetevőimben!
Jobb asztali csíkozású UX
Alternatív soros „csíkok” hozzáadása a táblázatokhoz szép UX-javítást jelenthet. Segítenek a szemének nyomon követni, hogy melyik sorban áll a táblázat átvizsgálása közben.
De tapasztalataim szerint ez nem működik jól a mindössze két vagy három soros asztalokon. Ha van például egy táblája három sorral a <tbody>
és ha minden „páros” sort „csíkoz”, akkor csak egy csíkot kaphat. Ez nem igazán ér egy mintát, és előfordulhat, hogy a felhasználók elgondolkodnak azon, hogy mi olyan különleges abban az egy kiemelt sorban.
Ezzel a technikával hol Bramus használ :has()
stílusokat alkalmazni a gyerekek száma alapján, akkor alkalmazhatunk táblázatcsíkokat, ha mondjuk háromnál több sor van:
Mit lehet még szebbé tenni? Dönthet úgy is, hogy ezt csak akkor teszi meg, ha a táblázat legalább bizonyos számú oszlopot tartalmaz:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Távolítsa el a feltételes osztálylogikát a sablonokból
Gyakran meg kell változtatnom az oldal elrendezését attól függően, hogy mi van az oldalon. Vegyük a következő Rács elrendezést, ahol a fő tartalom elhelyezése megváltoztatja a rács területeit attól függően, hogy van-e oldalsáv.
Ez attól függhet, hogy vannak-e testvéroldalak beállítva a CMS-ben. Általában sablonlogikával tenném ezt a feltételes hozzáadáshoz BEM módosító osztályok az elrendezés burkolójába, hogy figyelembe vegye mindkét elrendezést. Ez a CSS valahogy így nézhet ki (reszponzív szabályok és egyéb dolgok a rövidség kedvéért kihagyva):
/* 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 szempontjából ez természetesen teljesen rendben van. Ez azonban kissé zavarossá teszi a sablonkódot. A sablonozási nyelvtől függően meglehetősen csúnya lehet egy csomó osztály feltételes hozzáadása, különösen, ha ezt sok gyermek elemmel is meg kell tennie.
Ezzel szemben a :has()
- alapú megközelítés:
/* 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 . .';
}
Őszintén szólva, ez nem sokkal jobb a CSS szempontjából. De a feltételes módosító osztályok eltávolítása a HTML-sablonból szép győzelem, ha engem kérdezel.
Könnyű mikrotervezési döntésekre gondolni :has()
- mint egy kártya, ha kép van benne — de szerintem nagyon hasznos lesz ezeknél a makróelrendezési változtatásoknál is.
Jobb specifikusságkezelés
Ha elolvasod utolsó cikkem, tudni fogja, hogy ragaszkodó vagyok a konkrétsághoz. Ha hozzám hasonlóan nem szeretné, hogy a specifikussági pontszámai kicsapjanak az összeadás során :has()
és a :not()
minden stílusában mindenképpen használja :where()
.
Ez azért van, mert a sajátossága :has()
azon alapszik argumentumlistájának legspecifikusabb eleme. Tehát, ha van benne valami, például egy azonosító, akkor a választót nehéz lesz felülbírálni a kaszkádban.
Másrészt, sajátossága :where()
mindig nulla, soha nem növeli a specifikussági pontszámot.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
A jövő fényes
Ez csak néhány dolog, amit alig várok, hogy a termelésben is felhasználhassam. A CSS-Tricks Almanachnak is van egy csomó példája. Mit vársz, hogy csinálj vele :has()
? Milyen valós példákkal találkoztál, hol :has()
tökéletes megoldás lett volna?
- SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
- Forrás: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- képesség
- Képes
- Rólunk
- felett
- Fiók
- érint
- Minden termék
- már
- mindig
- elképesztő
- és a
- Másik
- alkalmaz
- megközelítés
- területek
- érv
- cikkben
- alapján
- mert
- Tét
- Jobb
- között
- Bit
- Fúj
- épült
- Csokor
- Kaphat
- kártya
- vízesések
- bizonyos
- változik
- Változások
- gyermek
- A pop-art design, négy időzóna kijelzése egyszerre és méretének arányai azok az érvek, amelyek a NeXtime Time Zones-t kiváló választássá teszik. Válassza a
- osztály
- osztályok
- cms
- kód
- Oszlopok
- összetevő
- tartalmaz
- tartalom
- tudott
- Tanfolyam
- CSS
- határozatok
- végleges
- attól
- Design
- Nem
- Ennek
- DOM
- ne
- le-
- elemek
- különösen
- stb.
- Még
- EVER
- Minden
- példa
- példák
- tapasztalat
- Szemek
- Kedvenc
- Funkció
- kevés
- végén
- Firefox
- következő
- Előre
- ból ből
- teljesen
- kap
- ad
- Goes
- megy
- nagy
- Rács
- rács-sablon-területek
- útmutató
- történik
- tekintettel
- segít
- itt
- hi
- <p></p>
- Kiemelt
- HTML
- HTTPS
- BETEG
- ötletek
- kép
- javulás
- in
- interaktív
- IT
- JavaScript
- csak egy
- Tart
- Kedves
- Ismer
- nyelv
- keresztnév
- elrendezés
- Valószínű
- kis
- néz
- keres
- Sok
- Macro
- készült
- Fő
- csinál
- kezelése
- sok
- esetleg
- pillanat
- több
- a legtöbb
- Mozilla
- Szükség
- igények
- Új
- következő
- Next.js
- rendszerint
- szám
- Hivatalosan
- ONE
- nyitás
- Más
- kívül
- rész
- különös
- alkatrészek
- Mintás
- Emberek (People)
- tökéletes
- Hely
- Plató
- Platón adatintelligencia
- PlatoData
- lehetséges
- be
- szép
- Probléma
- Termelés
- közzétett
- el
- Reagál
- Olvass
- való Világ
- nemrég
- eltávolítása
- fogékony
- SOR
- szabályok
- futás
- Mondott
- azonos
- beolvasás
- kiválasztás
- készlet
- Megosztás
- weboldal
- okos
- So
- megoldások
- néhány
- valami
- valahol
- speciális
- különleges
- sajátosság
- kezdet
- Állami
- csík
- Stripes
- stílus
- szuper
- Támogatott
- táblázat
- Vesz
- TD
- sablon
- A
- Az állam
- a világ
- dolog
- dolgok
- gondoltam
- három
- egész
- nak nek
- tonna
- is
- TELJESEN
- vágány
- igaz
- fejjel
- us
- használ
- Felhasználók
- ux
- várjon
- módon
- Mit
- vajon
- ami
- WHO
- nyer
- csodálkozó
- Munka
- világ
- érdemes
- lenne
- ír
- te
- A te
- zephyrnet