O :has()
psevdorazred je moja najljubša nova funkcija CSS. Vem, da je vsaj za mnoge od vas tisti, ki ste sodelovali v raziskavi o stanju CSS. Sposobnost pisanja izbirnikov na glavo nam daje več supermoči, za katere si nikoli nisem mislil, da so možne.
Pravim »več velemoči«, ker je bilo že ogromno neverjetnih pametnih idej, ki jih je objavila skupina super pametnih ljudi, kot so:
Ta članek ni dokončen vodnik za :has()
. Prav tako ni tukaj, da bi ponavljali že povedano. Samo jaz sem (živjo 👋) za trenutek skočil na vagon, da bi delil nekaj načinov, ki jih bom najverjetneje uporabil :has()
v mojem vsakodnevnem delu ... to je, ko ga Firefox uradno podpira ki je neizbežna.
Ko se to zgodi, lahko stavite, da ga bom začel uporabljati :has()
povsod. Tukaj je nekaj resničnih primerov stvari, ki sem jih zgradil pred kratkim in sem si rekel: »Joj, to bo enkrat veliko lepše :has()
je v celoti podprt.”
Izogibajte se poseganju zunaj vaše komponente JavaScript
Ste že kdaj zgradili interaktivno komponento, ki mora včasih vplivati na sloge nekje drugje na strani? Vzemimo naslednji primer, kjer <nav>
je mega meniin odpiranje spremeni barve <header>
vsebino nad njim.
Počutim se, kot da moram narediti takšno stvar ves čas.
Ta poseben primer je komponenta React, ki sem jo naredil za spletno mesto. Moral sem "seči zunaj" Reactovega dela strani document.querySelector(...)
in preklopite razred na <body>
, <header>
, ali drugo komponento. To ni konec sveta, vendar se zagotovo počuti malo fuj. Tudi na spletnem mestu, ki je popolnoma React (na primer spletno mesto Next.js), bi moral izbirati med upravljanjem menuIsOpen
navedite višje v drevesu komponent ali naredite isto izbiro elementa DOM — kar ni ravno React-y.
z :has()
, težava izgine:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
Nič več poigravanja z drugimi deli DOM v mojih komponentah JavaScript!
Boljši uporabniški vmesnik črtanja tabele
Dodajanje »črt« nadomestnih vrstic v vaše tabele je lahko dobra izboljšava UX. Pomagajo vašim očem spremljati, v kateri vrstici ste, ko pregledujete mizo.
Toda po mojih izkušnjah to ne deluje dobro na mizah z dvema ali tremi vrsticami. Če imate na primer tabelo s tremi vrsticami v <tbody>
in če »črtate« vsako »sodo« vrstico, lahko na koncu dobite samo eno črto. To v resnici ni vredno vzorca in bi se lahko uporabniki spraševali, kaj je tako posebnega na tej označeni vrstici.
Uporaba te tehnike kjer Bramus uporablja :has()
uporabiti sloge glede na število otrok, lahko uporabimo trakove tabele, ko je več kot, na primer, tri vrstice:
Kaj narediti bolj všečnega? Lahko se tudi odločite, da to storite samo, če ima tabela tudi vsaj določeno število stolpcev:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
Odstranite logiko pogojnega razreda iz predlog
Pogosto moram spremeniti postavitev strani glede na to, kaj je na strani. Vzemimo naslednjo postavitev mreže, kjer postavitev glavne vsebine spreminja mrežna območja glede na to, ali je prisotna stranska vrstica.
To je nekaj, kar je lahko odvisno od tega, ali so v CMS nastavljene sorodne strani. Običajno bi to naredil z logiko predloge za pogojno dodajanje Razredi modifikatorjev BEM v ovoj postavitve, da upoštevate obe postavitvi. Ta CSS bi lahko izgledal nekako takole (odzivna pravila in druge stvari zaradi kratkosti izpuščene):
/* 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 . .';
}
Kar zadeva CSS, je to seveda povsem v redu. Toda zaradi tega je koda predloge nekoliko neurejena. Odvisno od vašega jezika predloge lahko postane precej grdo pogojno dodajanje množice razredov, še posebej, če morate to storiti tudi z veliko podrejenimi elementi.
Primerjajte to z a :has()
-pristop:
/* 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 . .';
}
Iskreno povedano, kar zadeva CSS, to ni veliko boljše. Toda odstranitev razredov pogojnih modifikatorjev iz predloge HTML je dobra zmaga, če mene vprašate.
Preprosto je razmišljati o odločitvah za mikro oblikovanje :has()
- kot kartica, ko je v njej slika — vendar mislim, da bo zelo uporabno tudi za te spremembe postavitve makrov.
Boljše upravljanje specifičnosti
Če berete moj zadnji članek, vedeli boste, da sem ljubitelj natančnosti. Če, tako kot jaz, ne želite, da se vaši rezultati specifičnosti pri dodajanju razstrelijo :has()
in :not()
v vseh vaših stilih, se prepričajte, da uporabljate :where()
.
To je zaradi specifičnosti :has()
temelji na najbolj specifičen element na seznamu argumentov. Torej, če imate notri nekaj podobnega ID-ju, bo vaš izbirnik v kaskadi težko preglasiti.
Po drugi strani pa specifičnost :where()
je vedno nič, ki nikoli ne prispeva k rezultatu specifičnosti.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
Prihodnost je svetla
To je le nekaj stvari, ki jih komaj čakam, da jih bom lahko uporabil v produkciji. Almanah CSS-Tricks ima tudi kup primerov. S čim se veseliš :has()
? Na kakšne primere iz resničnega sveta ste kje naleteli :has()
bi bila popolna rešitev?
- Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
- Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
- vir: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- sposobnost
- Sposobna
- O meni
- nad
- Račun
- vplivajo
- vsi
- že
- vedno
- Neverjetno
- in
- Še ena
- Uporabi
- pristop
- območja
- Argument
- članek
- temeljijo
- ker
- Stavim
- Boljše
- med
- Bit
- Piha
- zgrajena
- Bunch
- Lahko dobiš
- kartice
- slapovi
- nekatere
- spremenite
- Spremembe
- otrok
- Izberite
- razred
- razredi
- Cms
- Koda
- Stolpci
- komponenta
- Vsebuje
- vsebina
- bi
- Tečaj
- CSS
- odločitve
- dokončno
- Odvisno
- Oblikovanje
- Ne
- tem
- DOM
- dont
- navzdol
- elementi
- zlasti
- itd
- Tudi
- VEDNO
- Tudi vsak
- Primer
- Primeri
- izkušnje
- oči
- Priljubljeni
- Feature
- Nekaj
- konec
- Firefox
- po
- Naprej
- iz
- v celoti
- dobili
- daje
- goes
- dogaja
- veliko
- Mreža
- grid-template-areas
- vodi
- se zgodi
- ob
- pomoč
- tukaj
- hi
- več
- Poudarjeno
- HTML
- HTTPS
- Bom
- Ideje
- slika
- Izboljšanje
- in
- interaktivno
- IT
- JavaScript
- samo en
- Imejte
- Otrok
- Vedite
- jezik
- Zadnja
- postavitev
- Verjeten
- malo
- Poglej
- si
- Sklop
- Makro
- je
- Glavne
- Znamka
- upravljanje
- več
- morda
- Trenutek
- več
- Najbolj
- Mozilla
- Nimate
- potrebe
- Novo
- Naslednja
- Naprej.js
- Običajno
- Številka
- Uradno
- ONE
- o odprtju
- Ostalo
- zunaj
- del
- zlasti
- deli
- Vzorec
- ljudje
- popolna
- Kraj
- platon
- Platonova podatkovna inteligenca
- PlatoData
- mogoče
- predstaviti
- precej
- problem
- proizvodnja
- objavljeno
- dosežejo
- Reagirajo
- Preberi
- resnični svet
- Pred kratkim
- odstranjevanje
- odziven
- ROW
- pravila
- Run
- Je dejal
- Enako
- skeniranje
- izbor
- nastavite
- Delite s prijatelji, znanci, družino in partnerji :-)
- spletna stran
- pametna
- So
- Rešitev
- nekaj
- Nekaj
- nekje
- posebna
- specifična
- specifičnosti
- Začetek
- Država
- trak
- Stripes
- slog
- Super
- Podprti
- miza
- Bodite
- TD
- Predloga
- O
- Država
- svet
- stvar
- stvari
- mislil
- 3
- vsej
- do
- Ton
- tudi
- POPOLNOMA
- sledenje
- Res
- Upside
- us
- uporaba
- Uporabniki
- ux
- Počakaj
- načini
- Kaj
- ali
- ki
- WHO
- zmago
- spraševati
- delo
- svet
- vredno
- bi
- pisati
- Vi
- Vaša rutina za
- zefirnet