CSS :has() psevdo razred se uvaja v številnih brskalnikih s Krom in Safari že v celoti podpira. Pogosto ga imenujemo "nadrejeni izbirnik" - kot v, lahko izberemo slog nadrejenega elementa iz podrejenega izbirnika - vendar je veliko več, :has() nam lahko pomaga rešiti. Ena od teh stvari je ponovno izumljanje vzorca kartic, ki ga je mogoče klikniti, ki ga mnogi izmed nas občasno radi uporabljamo.
Ogledali si bomo, kako :has() nam lahko pomaga pri obdelavi povezanih kartic, vendar najprej ...
Kaj je to :has() psevdo razred?
Obstaja že a kup of veliko objav lebdi naokoli ki odlično razložijo, kaj :has() je in za kaj se uporablja, vendar je še vedno dovolj nov, da bi o njem morali povedati nekaj besed tudi tukaj.
:has() je relacijski psevdo razred, ki je del Delovni osnutek W3C Selectors Level 4. Za to gre v oklepajih: ujemanje elementov, ki so povezani z določenimi podrejenimi elementi ali, natančneje, vsebujejo.
/* Matches an article element that contains an image element */
article:has(img) { }
/* Matches an article element with an image contained immediately within it */
article:has(> img) { }Torej, lahko razumete, zakaj bi ga morda želeli imenovati "starševski" izbirnik. Lahko pa ga tudi kombiniramo z drugimi funkcionalnimi psevdo razredi, da postanemo bolj specifični. Recimo, da želimo stilizirati članke, ki to počnejo ne vsebuje kakršne koli slike. Lahko združimo relacijske moči :has() z zanikalnimi močmi :not() narediti to:
/* Matches an article without images */
article:not(:has(img)) { }Toda to je šele začetek tega, kako lahko združimo moči, da naredimo več :has(). Preden se konkretno posvetimo reševanju zagate s karticami, ki jih je mogoče klikniti, si poglejmo nekaj načinov, kako se jim trenutno približamo, ne da bi uporabili :has().
Kako trenutno obravnavamo kartice, ki jih je mogoče klikniti
Obstajajo trije glavni pristopi k temu, kako ljudje dandanes ustvarijo karto, ki jo je mogoče v celoti klikniti, in da bi v celoti razumeli moč tega psevdo razreda, bi bilo dobro, če bi imeli malo povzetka.
Pristop »Povezava kot ovoj«.
Ta pristop se pogosto uporablja. Nikoli ne uporabljam tega pristopa, vendar sem ustvaril hitro predstavitev, da to pokažem:
Tu je veliko pomislekov, zlasti kar zadeva dostopnost. Ko uporabniki krmarijo po vašem spletnem mestu z funkcijo rotorja, bodo slišali celotno besedilo v tem element — naslov, besedilo in povezava. Nekdo morda ne želi presedeti vsega tega. Lahko smo boljši. Od HTML5 naprej lahko blokovne elemente ugnezdimo znotraj element. Ampak nikoli se mi ne zdi prav, še posebej iz tega razloga.
Prednosti:
- Hitro za izvedbo
- Pomensko pravilno
Slabosti:
- Pomisleki glede dostopnosti
- Besedila ni mogoče izbrati
- Veliko težav pri prepisovanju slogov, ki ste jih uporabili na privzetih povezavah
Metoda JavaScript
Z uporabo JavaScripta lahko naši kartici pripnemo povezavo, namesto da bi jo zapisali v oznako. Ta odličen demo CodePen sem našel pri costdev ki je omogočil tudi izbiro besedila kartice v procesu:
Ta pristop ima veliko prednosti. Naše povezave so dostopne v fokusu in lahko celo izberemo besedilo. Vendar pa obstajajo nekatere pomanjkljivosti, ko gre za stilsko oblikovanje. Če želimo na primer te kartice animirati, bi jih morali dodati :hover stilov na naši glavni .card ovoj namesto same povezave. Prav tako nam ne bi koristile animacije, ko so povezave v fokusu zaradi tabulatorjev na tipkovnici.
Prednosti:
- Lahko se naredi popolnoma dostopen
- Možnost izbire besedila
Slabosti:
- Potreben je JavaScript
- Desni klik ni mogoč (čeprav bi ga lahko popravili z dodatnim skriptom)
- Kartica bo zahtevala veliko oblikovanja, kar ne bi delovalo pri fokusiranju povezave
O ::after selektorski pristop
Ta metoda zahteva, da kartico nastavimo z relativnim pozicioniranjem, nato pa nastavimo absolutno pozicioniranje na povezavah ::after psevdo izbirnik povezave. To ne zahteva nobenega JavaScripta in je zelo enostavno implementirati:
Tukaj je nekaj pomanjkljivosti, zlasti ko gre za izbiro besedila. Če ne zagotovite višjega indeksa z na telesu kartice, ne boste mogli izbrati besedila, če pa ga, vas opozarjamo, da s klikom na besedilo ne boste aktivirali vaše povezave. Ali želite izbirno besedilo ali ne, je odvisno od vas. Mislim, da je to lahko težava UX, vendar je odvisno od primera uporabe. Besedilo je še vedno dostopno bralnikom zaslona, vendar je moja glavna težava pri metodi pomanjkanje možnosti animacije.
Prednosti:
- Enostaven za izvedbo
- Dostopna povezava brez napihnjenega besedila
- Deluje pri lebdenju in ostrenju
Slabosti:
- Besedila ni mogoče izbrati
- Povezavo lahko samo animirate, saj je to element, nad katerim lebdite.
Nov pristop: uporaba ::after z :has()
Zdaj, ko smo vzpostavili obstoječe pristope za kartice, ki jih je mogoče klikniti, želim pokazati, kako predstavljamo :has() mešanica odpravi večino teh pomanjkljivosti.
Pravzaprav zasnujmo ta pristop na podlagi zadnjega, ki smo ga preučili ::after na elementu povezave. Dejansko lahko uporabimo :has() tam, da bi premagali omejitve animacije tega pristopa.
Začnimo z oznako:
Some Heading
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
Stvari bom čim bolj poenostavil s ciljanjem na elemente v CSS namesto na razrede.
Za to predstavitev bomo dodali povečavo slike in senco na kartico ob lebdenju ter animirali povezavo s puščico, ki se prikaže in spreminja barvo besedila povezave. Da bi to olajšali, bomo dodali nekaj lastnosti po meri, ki jih obsega naša kartica. Tukaj je osnovni stil:
/* The card element */
article {
--img-scale: 1.001;
--title-color: black;
--link-icon-translate: -20px;
--link-icon-opacity: 0;
position: relative;
border-radius: 16px;
box-shadow: none;
background: #fff;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}
/* The link's ::after pseudo */
article a::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
}Super! Dodali smo začetno merilo za sliko (--img-scale: 1.001), začetna barva naslova kartice (--title-color: black) in nekaj dodatnih lastnosti, ki jih bomo uporabili, da bo naša puščica izskočila iz povezave. Prav tako smo nastavili prazno stanje box-shadow deklaracijo, da jo pozneje animiramo. To nastavi tisto, kar trenutno potrebujemo za kartico, ki jo je mogoče klikniti, zato ji dodamo nekaj ponastavitev in stilov, tako da dodamo te lastnosti po meri elementom, ki jih želimo animirati:
article h2 {
margin: 0 0 18px 0;
font-family: "Bebas Neue", cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
color: var(--title-color);
transition: color 0.3s ease-out;
}
article figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}
article a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #28666e;
}
article a:focus {
outline: 1px dotted #28666e;
}
article a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(--link-icon-translate));
opacity: var(--link-icon-opacity);
transition: all 0.3s;
}
.article-body {
padding: 24px;
}Bodimo prijazni do ljudi dodajmo tudi a razred bralnika zaslona skrit za povezavo:
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}Naša voščilnica je začela izgledati zelo sladko. Čas je, da temu dodamo malo čarovnije. z :has() psevdo razreda, lahko zdaj preverimo, ali je naša povezava lebdeča ali fokusirana, nato posodobimo lastnosti po meri in dodamo box-shadow. S tem majhnim koščkom CSS naša kartica resnično oživi:
/* Matches an article element that contains a hover or focus state */
article:has(:hover, :focus) {
--img-scale: 1.1;
--title-color: #28666e;
--link-icon-translate: 0;
--link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}Vidite, kaj je tam zgoraj? Zdaj dobimo posodobljene sloge if kaj podrejeni element na kartici je lebdeč ali fokusiran. In čeprav je element povezave edina stvar, ki lahko vsebuje stanje lebdenja ali fokusa v ::after pristop kartice s klikom, lahko to uporabimo za ujemanje z nadrejenim elementom in uporabo prehodov.
In tukaj ga imate. Samo še en močan primer uporabe za :has() selektor. Ne samo, da se lahko ujemamo z nadrejenim elementom tako, da druge elemente deklariramo kot argumente, ampak lahko tudi ujemamo z uporabo psevdov za ujemanje in oblikovanje nadrejenih elementov.
Prednosti:
- dostopno
- Animable
- JavaScript ni potreben
- uporabljate
:hoverna pravem elementu
Slabosti:
- Besedila ni enostavno izbrati.
- Podpora brskalnika je omejena na Chrome in Safari (v Firefoxu je podprta za zastavico).
Tukaj je predstavitev te tehnike. Morda boste opazili dodaten ovoj okoli kartice, vendar se s tem samo igram poizvedbe vsebnika, ki je le ena od tistih drugih fantastičnih stvari, ki se pojavljajo v vseh večjih brskalnikih.
Imam nekaj drugi primeri želite deliti? Druge rešitve ali ideje so več kot dobrodošle v oddelku za komentarje.
