A CSS :has() A pszeudo osztály sok böngészőben megjelenik króm és a Safari már teljes mértékben támogatja. Gyakran „a szülő választónak” nevezik – például a szülőelem stílusát kiválaszthatjuk a gyermekválasztóból –, de sokkal több van, :has() segíthet megoldani. Az egyik ilyen dolog az, hogy újra feltaláljuk a kattintható kártyamintát, amelyet sokan szívesen használunk időről időre.
Megnézzük, hogyan :has() segíthet nekünk a linkelt kártyák kezelésében, de először…
Mi ez :has() álosztály?
Már van egy csokor of nagy hozzászólás lebegve amelyek kiválóan elmagyarázzák, mit :has() van, és mire használják, de még mindig elég új ahhoz, hogy itt is ejtsünk néhány szót róla.
:has() egy relációs pszeudoosztály, amely része a W3C Selectors 4. szintű munkavázlat. Erről szólnak a zárójelek: olyan elemek illesztése, amelyek kapcsolódnak bizonyos gyermekelemekhez, vagy pontosabban tartalmaznak.
/* 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) { }Tehát láthatja, miért nevezhetjük „szülő” választónak. De kombinálhatjuk más funkcionális pszeudoosztályokkal is, hogy pontosabbak legyünk. Tegyük fel, hogy olyan cikkeket szeretnénk kialakítani, amelyek igen nem képeket tartalmaznak. Összekapcsolhatjuk a kapcsolati erőket :has() tagadó erejével :not() ehhez:
/* Matches an article without images */
article:not(:has(img)) { }De ez még csak a kezdete annak, hogyan kombinálhatjuk az erőket, hogy többet tudjunk elérni :has(). Mielőtt konkrétan rátérnénk a kattintható kártyák rejtélyének megoldására, nézzünk meg néhány módot, amellyel jelenleg megközelíthetjük őket anélkül, hogy használnánk. :has().
Hogyan kezeljük jelenleg a kattintható kártyákat
Három fő megközelítés létezik arra vonatkozóan, hogyan hoznak létre manapság az emberek egy teljesen kattintható kártyát, és hogy teljes mértékben megértsük ennek a pszeudoosztálynak az erejét, jó, ha van egy kis összefoglaló.
A „Link mint csomagoló” megközelítés
Ezt a megközelítést elég gyakran használják. Soha nem használom ezt a megközelítést, de készítettem egy gyors bemutatót annak bemutatására:
Itt sok aggodalomra ad okot, különösen ami a hozzáférhetőséget illeti. Amikor a felhasználók a használatával navigálnak a webhelyén a rotor funkció, hallani fogják a teljes szöveget azon belül elem – a címsor, a szöveg és a hivatkozás. Lehet, hogy valaki nem akarja végigülni ezt az egészet. Tudunk jobban csinálni. A HTML5 óta a blokkelemeket beágyazhatjuk egy elem. De soha nem érzem jól magam, különösen ezért.
Előnyök:
- Gyorsan megvalósítható
- Szemantikailag helyes
Hátrányok:
- Hozzáférhetőségi aggályok
- A szöveg nem választható
- Sok gondot okoz az alapértelmezett hivatkozásokon használt stílusok felülírása
A JavaScript módszer
JavaScript használatával linket csatolhatunk a kártyánkhoz, ahelyett, hogy beírnánk a jelölésbe. Megtaláltam ezt a nagyszerű CodePen demót costdev aki a kártya szövegét is kiválaszthatóvá tette a folyamat során:
Ennek a megközelítésnek sok előnye van. Linkjeink fókuszban elérhetők, és akár szöveget is kiválaszthatunk. De van néhány hátránya, ami a stílust illeti. Ha például animálni akarjuk ezeket a kártyákat, akkor hozzá kell adnunk :hover stílusok főként .card maga a link helyett. Az animációk akkor sem hasznot húznának, ha a hivatkozások fókuszban vannak a billentyűzet lapozásából.
Előnyök:
- Tökéletesen hozzáférhetővé tehető
- Szöveg kiválasztásának lehetősége
Hátrányok:
- JavaScript szükséges
- A jobb kattintás nem lehetséges (bár néhány extra szkripttel javítható)
- Sok stílust igényel magán a kártyán, ami nem működik a link fókuszálásakor
A ::after választó megközelítés
Ez a módszer megköveteli, hogy a kártyát relatív pozicionálással állítsuk be, majd az abszolút pozicionálást a linkeken ::after egy link pszeudo választója. Ez nem igényel JavaScriptet, és meglehetősen könnyen megvalósítható:
Ennek van néhány hátránya, különösen a szöveg kiválasztásánál. Hacsak nem ad meg magasabb z-indexet a kártyatörzsön, nem tud majd szöveget kijelölni, de ha igen, akkor figyelmeztesse, hogy a szövegre kattintva nem aktiválódik a link. Az Önön múlik, hogy kíván-e kiválasztható szöveget vagy sem. Szerintem ez lehet UX probléma, de ez a használati esettől függ. A szöveg továbbra is elérhető a képernyőolvasók számára, de a módszerrel a fő problémám az animációs lehetőségek hiánya.
Előnyök:
- Könnyen kivitelezhető
- Hozzáférhető link dagadt szöveg nélkül
- Lebegéssel és fókuszálással működik
Hátrányok:
- A szöveg nem választható
- Csak a linket animálhatja, mivel ez az az elem, amelyen lebeg.
Új megközelítés: Használat ::after val vel :has()
Most, hogy létrehoztuk a kattintható kártyák meglévő megközelítéseit, szeretném megmutatni, milyen bevezető :has() a keverékhez megoldja a legtöbb hiányosságot.
Tulajdonképpen alapozzuk meg ezt a megközelítést a legutóbb használt módszerre ::after a link elemen. Valójában használhatjuk :has() ott, hogy leküzdjük e megközelítés animációs korlátait.
Kezdjük a jelöléssel:
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.
A lehető legegyszerűbben fogom tartani a dolgokat úgy, hogy az osztályok helyett elemeket célozok meg a CSS-ben.
Ennél a bemutatónál képnagyítást és árnyékolást fogunk hozzáadni a kártyához, amikor az egérmutatót lebegteti, és animálni fogjuk a hivatkozást egy felugró nyíllal, miközben megváltoztatjuk a link szövegének színét. Ennek megkönnyítése érdekében hozzáadunk néhány egyéni tulajdonságot a kártyánkhoz. Íme az alapvető stílus:
/* 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;
}Nagy! Hozzáadtunk egy kezdeti léptéket a képhez (--img-scale: 1.001), a kártya fejlécének kezdeti színe (--title-color: black) és néhány extra tulajdonságot fogunk használni, hogy a nyilak kiugorjanak a hivatkozásból. Beállítottunk egy üres állapotot is box-shadow nyilatkozatot, hogy később animálhassuk. Ezzel beállítjuk, mire van szükségünk a kattintható kártyához, ezért adjunk hozzá néhány alaphelyzetbe állítást és stílust azáltal, hogy hozzáadjuk ezeket az egyéni tulajdonságokat az animálni kívánt elemekhez:
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;
}Legyünk kedvesek az emberekhez, és adjunk hozzá a képernyőolvasó osztály a link mögé rejtve:
.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;
}A kártyánk kezd nagyon édesnek tűnni. Ideje hozzátenni egy kis varázslatot. A ... val :has() pszeudo osztály, most ellenőrizhetjük, hogy a hivatkozásunk lebeg-e vagy fókuszálva van-e, majd frissíthetjük egyéni tulajdonságainkat, és hozzáadhatunk egy box-shadow. Ezzel a kis CSS-szel a kártyánk igazán életre kel:
/* 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;
}Látod, mi van odafent? Most megkapjuk a frissített stílusokat, ha bármilyen a kártya gyermekeleme lebeg vagy fókuszálva van. És bár a link elem az egyetlen olyan dolog, amely tartalmazhat hover vagy fókusz állapotot a ::after kattintható kártya megközelítést, ezt használhatjuk a szülőelemhez való illeszkedéshez és az átmenetek alkalmazásához.
És itt van. Csak egy újabb hatékony használati eset a :has() választó. Nem csak egy szülőelemet egyeztethetünk úgy, hogy más elemeket argumentumként deklarálunk, hanem pszeudókat is alkalmazhatunk a szülők párosítására és stílusára.
Előnyök:
- mindenki
- Animálható
- Nincs szükség JavaScriptre
- Felhasználás
:hovera megfelelő elemen
Hátrányok:
- A szöveg nem könnyen kiválasztható.
- A böngésző támogatása a Chrome-ra és a Safarira korlátozódik (a Firefoxban egy zászló mögött támogatott).
Itt van egy demó ezzel a technikával. Lehet, hogy észrevesz egy extra borítást a kártya körül, de ezzel csak én játszom konténer lekérdezések, amely csak egyike azoknak a fantasztikus dolgoknak, amelyek minden nagyobb böngészőben megjelennek.
Van néhány egyéb példák szeretnél megosztani? Egyéb megoldásokat vagy ötleteket szívesen látunk a megjegyzés rovatban.
