Izradite napredne CSS vrtuljke bez JavaScripta

Početna » Piton » Izradite napredne CSS vrtuljke bez JavaScripta

Izrada kružnih prozora samo s modernim CSS-om više nije pusti san—to je vrlo realna, produkcijski spremna opcija koja često može nadmašiti klasične JavaScript biblioteke slajdera. Zahvaljujući značajkama poput prikvačivanje pomicanja, animacije pokretane pomicanjem, eksperimentalni pseudo-elementi vrtuljka i robusni primitivi pristupačnosti, možete isporučivati ​​lagane, otporne vrtuljke koji i dalje djeluju glatko, interaktivno i uglađeno.

Ako ste umorni od povlačenja JavaScript paketa od 50KB samo za prikaz nekoliko slajdova, ovaj vodič vas vodi kroz ono što današnji CSS može učiniti za vas. Razložit ćemo ključne koncepte iza CSS-only cursela, kako ih povezati sa scroll-snap-om, kada se osloniti na novi ::scroll-button() i ::scroll-marker() pseudo-elementi i kako raspršiti automatsku reprodukciju ili kružno ponašanje, a istovremeno tretirati pristupačnost i performanse kao građane prvog reda.

Zašto su CSS-only carouls napokon ozbiljna opcija

Godinama je "carousel" bio gotovo sinonim za "JavaScript dodatak".Rješenja poput Swipera, Glidea ili domaćih klizača bila su najčešći pristup: rješavali su navigaciju, stanje, podršku za tipkovnicu i geste dodira, ali po cijenu dodatne težine, slušača događaja posvuda i poprilične količine DOM gimnastike.

Moderni CSS je tiho zatvorio većinu te praznine.Sa svojstvima kao što su scroll-snap-type i scroll-snap-align, možete pretvoriti bilo koji horizontalni ili vertikalni skroler u paginirano iskustvo. Osim toga, specifikacija CSS Overflow Level 5 uvodi generirano u pregledniku gumbi za pomicanje i markeri koji se ponašaju kao potpuno opremljeno korisničko sučelje s vrtuljkom, ali su u potpunosti deklarirani u CSS-u.

Velika pobjeda je što preglednik, a ne vaš JavaScript kod, postaje odgovoran za ključne UX probleme.: fizika pomicanja, navigacija tipkovnicom, redoslijed fokusa, pa čak i ARIA uloge za kontrole vrtuljka. U mnogim slučajevima je zaista teško izgraditi nešto pristupačnije i s boljim performansama od onoga što vam platforma sada nudi odmah po instalaciji.

Još jedna velika prednost CSS cursula je otpornost.Ako se JavaScript ne uspije učitati, korisnici s blokiranim ili onemogućenim skriptama i dalje dobivaju savršeno upotrebljiv skup stavki koje se mogu pomicati. Nema hidratacije, nema promjene rasporeda uzrokovane kasnim učitavanjem koda i ima puno manje pokretnih dijelova koji s vremenom mogu poći po zlu.

Osnovni gradivni blok: kontejner koji se može pomicati s funkcijom Scroll Snap

Svaki CSS-only carousel započinje kao običan kontejner za pomicanjeZamislite jednostavan popis slajdova koji se mogu vodoravno pomicati. Nakon toga dodajte pričvršćivanje pomicanja tako da se prikaz prirodno zaključa na svaki slajd.

Minimalna HTML struktura za horizontalni rotirajući izbornik je namjerno jednostavna: omotač i niz elemenata slajda unutra. Možete koristiti ul sa li elementi ili div s djetetom divs—CSS obavlja teški posao, tako da vam nisu potrebne posebne klase za svako dijete osim ako vaš dizajn to ne zahtijeva.

Osnovna postavka pomicanja i prianjanja mogla bi izgledati ovako u CSS-u, pod pretpostavkom prikaza pune širine, s jednim slajdom:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Ovdje kontejner koristi display: flex poredati svoju djecu vodoravnoi overflow-x: auto kako biste omogućili pomicanje. Čarolija je u scroll-snap-type: x mandatory, što govori pregledniku da se horizontalno pomicanje uvijek treba zaustaviti na valjanoj točki snap-a, i u scroll-snap-align: center na svakom slajdu, što definira te točke pričvršćivanja.

Ova kombinacija flexboxa i scroll snapa odmah se osjeća kao vrtuljak: korisnici se pomiču ili prevlače prstom, a najbliži slajd se pomiče na mjesto. Budući da koristi izvorno pomicanje, unos dodirom na telefonima i tabletima jednostavno funkcionira, bez ikakvog rukovatelji gestama ili dodatne biblioteke.

Niste ograničeni na jednu stavku po pregleduZa višestupne karuselje koji prikazuju nekoliko kartica odjednom, možete koristiti fleksibilnu širinu za stavke, na primjer:

.carousel-item { flex: 0 0 calc(33.333% - 1rem); margin: 0 0.5rem; scroll-snap-align: center; }

Ova varijacija vam omogućuje prikaz, recimo, tri kartice po prikazu s malo razmaka, a istovremeno imaju koristi od ponašanja pri pričvršćivanju. Korisnici klize kroz stranice kartica umjesto kroz pojedinačne slajdove, što izvrsno funkcionira za popise proizvoda ili galerije.

Gumbi za pomicanje s pseudoelementom ::scroll-button()

Nakon što imate brzi skroler, sljedeća stvar koju većina ljudi želi su eksplicitni navigacijski gumbi.—prethodne i sljedeće kontrole koje pomiču rotirajući izbornik lijevo ili desno. Tradicionalno biste stvorili <button> elementi, povezati događaje klika i izračunati koliko daleko se treba pomicati.

Specifikacija CSS Overflow 5 predstavlja ::scroll-button(), pseudoelement koji omogućuje pregledniku da obavi sav taj teški posaoIako je ovo trenutno dostupno počevši od Chromea 135 (i obično je isprva ispod eksperimentalnih oznaka), ovo je uvid u to kako će se rotirajući elementi stvarati u budućnosti.

Gumbe za pomicanje deklarirate na isti način kao i bilo koji drugi pseudoelementNa primjer, za generiranje lijeve i desne tipke za vaš rotirajući izbornik:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }
.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }
.carousel::scroll-button(*) :focus-visible { outline-offset: 5px; }

Kada se primijeni ovaj CSS, preglednik zapravo stvara pravi <button> elementi kao braća i sestre kontejnera za pomicanje, povezuje ih sa scrollerom, dodjeljuje odgovarajuće uloge i određuje njihovo ponašanje. Jedan klik obično pomiče oko 85% područja pomicanja, što se u većini kružnih izgleda čini kao "stranica".

Ako vaš dizajn očekuje točno jednu stavku pune širine po kliku, možete kombinirati ove pseudoelemente sa strožim pričvršćivanjem na svako dijete dodavanjem scroll-snap-stop: alwaysTo prisiljava prikaz da se zaustavi na granicama stavki umjesto da se zaustavi na pola puta.

Svojstvo sadržaja ovdje služi dvostrukoj svrsi: prva vrijednost je ono što korisnici vizualno vide (u ovom slučaju, znakovi strelice), a drugi niz je pristupačan rezervni tekst koji se može prikazati pomoćnoj tehnologiji. Slobodno možete stilizirati i pozicionirati ove gumbe pomoću CSS-a ili koristiti funkcije poput anchor() kako biste ih precizno poravnali s vašim rasporedom.

Markeri za pomicanje s ::scroll-marker() i ::scroll-marker-group

Točke ili oznake ispod vrtuljka - često nazvane "oznake za paginaciju" ili "oznake" - još su jedan uobičajeni zahtjevOni pokazuju koliko stavki postoji i koja je trenutno vidljiva te omogućuju korisnicima da izravno pređu na određeni slajd.

The ::scroll-marker() pseudo-element vam daje ove indikatore bez ručnog generiranja sidrenih veza ili rasponaSvaki marker je u biti navigacijski <a> element koji je kreirao preglednik, a koji pokazuje na odgovarajuću stavku za pomicanje i sudjeluje u navigaciji pomoću tipkovnice i čitača zaslona.

Da biste to postavili, morate reći pregledniku gdje da postavi grupu markera sa scroll-marker-group, i na kojim elementima stvoriti markere. Minimalna konfiguracija mogla bi izgledati ovako:

.carousel { scroll-marker-group: after; }
.carousel > li::scroll-marker { content: " "; }
.carousel > li::scroll-marker:target-current { background: var(--accent); }

Preglednik gradi ::scroll-marker-group kontejner kao rođaka scrollera i popunjava ga s jednim markerom za svako odabrano dijeteU ovom jednostavnom primjeru markeri su prikazani kao prazne točke, ali možete jednako lako koristiti tekst poput "Sezona 1", ikone ili čak sličice promjenom content nekretnine.

Što ove markere čini posebnima u usporedbi s običnom trakom za pomicanje jest da su to prave navigacijske poveznice. Omogućuju korisnicima izravan skok na smislene pozicije i dolaze s korisnom semantikom: postoji :target-current stanje koje označava koji marker odgovara slajdu koji je trenutno prikazan ili je pričvršćen. Podrška za tipkovnicu ponaša se poput fokus grupe, a čitači zaslona mogu ih prikazati kao kontrolu sličnu popisu tablica.

Ova strategija je posebno moćna kada vaš scroller predstavlja logičke dijelove, a ne pojedinačne stavke.Na primjer, umjesto stvaranja deset markera za deset epizoda, možete stvoriti dva markera koji preskaču na početak prve i druge sezone. Slobodni ste odlučiti koje će se „točke interesa“ adresirati.

Kombiniranje gumba i markera u potpuno korisničko sučelje vrtuljka

Kada stavite ::scroll-button() i ::scroll-marker() zajedno na istom scrolleru, dobivate korisničko sučelje koje korisnici odmah prepoznaju kao vrtuljak: kontrole za prethodno/sljedeće, red markera koji pokazuju koliko su daleko napredovali i glatko prebacivanje između slajdova.

Ključna razlika od klasičnih JavaScript slidera je u tome što se većina te logike sada nalazi u pregledniku.Gumbi i markeri su generirani elementi s ispravnim ARIA ulogama, pravilno integrirani u redoslijed tabulatora i pričom o pristupačnosti koju su dizajnirali temeljni timovi preglednika, a ne iznova izmišljenom za svaku web-lokaciju.

Ovaj pristup donosi nekoliko vrlo praktičnih prednostiRadi s onemogućenim JavaScriptom, uklanja treperenje hidratacije i probleme s vremenom, smanjuje kumulativni pomak izgleda jer su kontrole poznate u vrijeme CSS izgleda i besprijekorno se integrira s animacijama pokretanim pomicanjem ili upitima stanja pomicanja ako želite dodati stil.

Na uređajima osjetljivim na dodir, iskustvo je prirodno prilagođeno prstima jer je kontejner za pomicanje i dalje samo izvorni pomicač. Na računalima, unos kotačićem miša i tipkovnicom radi kako se očekuje, a indikatori fokusa na generiranim kontrolama mogu se stilizirati kako bi odgovarali vašim smjernicama za dizajn i pristupačnost.

Iz perspektive održavanja, "radi manje, dosegni više" postaje prilično točan opisUmjesto održavanja logike višestrukih implementacija vrtuljka u različitim projektima, oslanjate se na zajedničke, standardizirane značajke platforme koje će se s vremenom poboljšavati bez dodatnog rada s vaše strane.

Kako koristiti Scroll Snap u stvarnim projektima

Čak i ako na trenutak zanemarite nove pseudoelemente, samo pomicanje i prianjanje je već dovoljno dobro za mnoge produkcijske karuselje.Podrška preglednika za pomicanje i prianjanje u modernim preglednicima je solidna, a ponašanje je predvidljivo i kod gesti kotačića miša i dodira.

U najjednostavnijem scenariju, vaš HTML rotirajući prozor može biti div s nizom slika unutraMožete tom kontejneru dati klasu poput .carousel i ostavite podređene slike neklasificiranima; CSS obrađuje poravnanje i pomicanje.

Uključivanjem scroll-behavior: smooth na spremniku, pomicanje između točaka pričvršćivanja postaje ugodno animirano umjesto skokovito. To je posebno uočljivo kada korisnici kliknu na markere ili sidrene poveznice ili kada programski pokrećete pomicanje u hibridnim postavkama.

Svako ključno svojstvo prihvata pomicanja igra vrlo različitu ulogu. scroll-snap-type definira os i je li pričvršćivanje obavezno ili samo nagovještaj; scroll-snap-align na djeci određuje gdje se zaključavaju u prikaz (početak, središte, kraj); i scroll-snap-stop: always sprječava preglednik da preskače točke prianjanja prilikom brzog pomicanja.

Korištena zajedno, ova svojstva omogućuju vam da točno odredite kako bi se vrtuljak trebao osjećati—od nježnog, opraštajućeg snimanja pogodnog za velike odjeljke sadržaja, do strogog ponašanja slajd po slajd, savršenog za glavne bannere gdje nikada ne želite završiti „između“ elemenata.

Budući da se radi o čistom CSS-u, izgled možete jednostavno responzivno prilagoditi.Pomoću medijskih upita možete prebacivati ​​s jednog slajda po prikazu na uskim zaslonima na nekoliko slajdova po prikazu na širokim računalima, jednostavnom promjenom flex-basis stavki. Nisu potrebne JavaScript točke prekida, slušači za promjenu veličine ili ponovno izračunate širine.

Eksperimentalni pseudo-elementi i detekcija značajki

Novi pseudo-elementi orijentirani na vrtuljak—::scroll-button(), ::scroll-marker() i ::scroll-marker-group—su snažni, ali još uvijek relativno svježiU trenutku pisanja ovog teksta dostupni su u Chromeu 135 i novijim verzijama, često s potrebnim eksperimentalnim oznakama, a s vremenom će se proširiti i na druge pretraživače.

Budući da podrška još nije univerzalna, produkcijske lokacije trebale bi se oslanjati na detekciju značajki i elegantne alternative.CSS vam daje @supports at-pravilo, koje vam omogućuje uvjetnu primjenu pravila na temelju prepoznavanja svojstava.

Možete definirati jednostavnu rezervnu navigacijsku traku—skup poveznica ili gumba koji se nalaze ispod vrtuljka — a zatim skrivaju tu traku kada preglednik podržava izvorne gumbe za pomicanje. Na primjer:

.carousel-nav { display: flex; gap: 0.5rem; }
@supports (scroll-button-inline: both) { .carousel-nav { display: none; } }

Ovdje .carousel-nav može sadržavati ručno napisane sidrene poveznice koje upućuju na slajdove putem ID-ova, Kao i <a href="#slide1">1</a>U preglednicima koji razumiju novo svojstvo gumba za pomicanje, pojavljuju se vaše izvorne kontrole, a rezervna navigacija je skrivena; u starijim preglednicima navigacija sidra ostaje, uparena s pomicanjem i pričvršćivanjem za savršeno upotrebljivo iskustvo.

Ova hibridna strategija omogućuje sigurno eksperimentiranje s značajkama vrtuljka sljedeće generacije već danas., bez vezanja za određenu konfiguraciju tražilice ili zastavice. Kako podrška preglednika sazrijeva, možete se više oslanjati na pseudoelemente i smanjiti dio ručnog scaffoldinga.

Vrtuljci s automatskim pokretanjem samo putem CSS-a s animacijama ključnih kadrova

Drugi uobičajeni zahtjev je automatska reprodukcija - vrtuljak koji se samostalno pomiče, opcionalno pauzirajući kada se zadrži pokazivač miša iznad njega.Iako automatska reprodukcija ima neke nedostatke u pogledu korisničkog iskustva i pristupačnosti, moguće ju je postići isključivo CSS animacijama.

Jednostavan obrazac je animirati horizontalno pomicanje vaše klizne trake..

@keyframes slide {
0%, 20% { transform: translateX(0); }
25%, 45% { transform: translateX(-100%); }
50%, 70% { transform: translateX(-200%); }
75%, 95% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
.autoplay-carousel { display: flex; animation: slide 12s infinite; }
.autoplay-carousel:hover { animation-play-state: paused; }

U ovom primjeru, ključni okviri provode određeno vrijeme na svakom pomaku prije nego što prijeđu na sljedeći slajd.Pjesma se na kraju vraća u petlju, stvarajući izgled ponavljajuće prezentacije preko četiri slajda. Zadržavanje pokazivača miša iznad vrtuljka pauzira animaciju, tako da korisnici mogu pregledavati sadržaj bez stalnog kretanja.

Poštovati korisnike koji preferiraju smanjeno kretanje iz zdravstvenih ili udobnostnih razloga, animaciju možete omotati medijskim upitom:

@media (prefers-reduced-motion: reduce) { .autoplay-carousel { animation: none; } }

To osigurava da na sustavima gdje se traži smanjeno kretanje, klizači ostaju statični, čime se učinkovito onemogućuje automatska reprodukcija, a istovremeno se omogućuje ručno pomicanje ili navigacija pomoću gumba/markera gdje je to moguće.

Jedan važan kompromis je taj što se automatska reprodukcija temeljena na ključnim kadrovima ne integrira automatski s funkcijom pomicanja i prianjanja.Ručno prevodite sadržaj umjesto da se oslanjate na izvorno pomicanje, stoga morate pažljivo dizajnirati animaciju kako biste izbjegli poluvidljive slajdove i kako bi vrijeme bilo usklađeno s izgledom.

Razmatranja pristupačnosti za CSS rotirajuće elemente

Pristupačnost je područje gdje CSS-bazirani kružni alati zaista mogu zablistati, jer se velik dio teške logike prebacuje s vašeg prilagođenog koda na ponašanja platforme koja su pažljivo dizajnirana i testirana.

Kada se oslanjate na izvorno pomicanje plus pomicanje-snap, automatski nasljeđujete podršku za tipkovnicu, dodir i mišKorisnici mogu koristiti Tab za pomicanje, koristiti tipke sa strelicama za pomicanje, prevlačiti prstom po zaslonima osjetljivim na dodir i pomicati se kotačićem, bez ikakvih slušača događaja ili prilagođenih rukovatelja.

Eksperimentalni gumbi za pomicanje i markeri idu korak daljePreglednik ih stvara s odgovarajućom semantikom, integrira ih u redoslijed tabulatora i održava njihovo stanje, što vrlo otežava slučajno zaboravljanje ARIA atributa ili njihovo pogrešno označavanje. Rezultirajuće kontrole u obliku vrtuljka obično su dosljednije dostupne od implementacija s početnim pomicanjem.

I dalje možete i trebate dodavati semantičke naznake svojim regijama vrtuljkaNa primjer, označavanje spremnika s role="region" i opisni aria-label pomaže korisnicima čitača zaslona da razumiju što komponenta predstavlja:

<div class="carousel" role="region" aria-label="Product gallery">
<div class="carousel-item" aria-label="Slide 1 of 3">...</div>
</div>

Osiguravanje vidljivih indikatora fokusa za sve interaktivne elemente ostaje ključnoBez obzira jesu li kontrole vaši vlastiti gumbi i poveznice ili pseudoelementi generirani od strane preglednika, provjerite nisu li obrisi fokusa uklonjeni ili previše suptilni da bi se vidjeli. Prilagodi outline, outline-offset ili promjene pozadine prema potrebi kako bi se zadovoljili zahtjevi kontrasta.

Veličina mete dodira još je jedno praktično razmatranjeCiljajte na kontrole veličine najmanje 44 × 44 piksela kako biste bili u skladu s uobičajenim smjernicama za pristupačnost, tako da korisnici ne bi imali problema s dodirivanjem strelica ili točaka na manjim zaslonima.

Za bilo koju funkciju automatske reprodukcije, dajte korisnicima jasnu kontrolu i izbjegavajte preagresivne pokreteOsigurajte pauzu prilikom zadržavanja pokazivača miša ili eksplicitni gumb za pauzu i razmislite o isključivanju automatske reprodukcije ako je sadržaj gust ili prepun teksta. U kombinaciji s prefers-reduced-motion, ovo čini vaš rotirajući izbornik ugodnijim za širu publiku.

Obrada kružnog ili "beskonačnog" skrolovanja pomoću CSS-a

Jedno ponašanje koje ljudi često traže je kružno pomicanje.Kada dođete do zadnjeg slajda i pomaknete se dalje, glatko se vraćate na prvi, poput fizičkog vrtuljka koji se vrti beskrajno.

Danas ne postoji izravno, isključivo CSS svojstvo koje bi kontejner za pomicanje učinilo inherentno kružnim.Bez dupliciranja sadržaja, izvorni skroler imat će početak i kraj: nakon što dođete do posljednje stavke, daljnje skrolovanje vas jednostavno ne pomiče naprijed.

Autori specifikacija svjesni su da mnogi UI kružni prikazi očekuju ovo ponašanje petlje., i postoji aktivan interes za istraživanje rješenja na razini platforme za cikličko pomicanje, slično kao što su standardizirani novi gumbi i markeri za pomicanje. Uz to, trenutno ne možete tražiti od preglednika da izvorno prelomi pozicije pomicanja jednom CSS deklaracijom.

U čisto CSS postavkama, simuliranje petlje obično znači animiranje transformacija (kao u primjerima ključnih kadrova automatske reprodukcije) ili prihvaćanje linearnog završetka sekvence.Ako je besprijekorna beskonačnost apsolutno potrebna i ne možete duplicirati sadržaj, JavaScript je za sada i dalje fleksibilniji alat.

Dobra vijest je da vas ništa ne sprječava da kombinirate uglavnom CSS-om vođenu vrtuljku s malo JavaScripta tamo gdje to zaista dodaje vrijednost.Za svakodnevnu navigaciju možete se osloniti na gumbe za pomicanje i CSS, a zatim dodati nekoliko redaka skripte za praćenje položaja pomicanja i skok s kraja na početak kada je to prikladno.

HTML/CSS u odnosu na JavaScript za bogate karusele temeljene na karticama

Česta dilema za novije programere je mora li složeniji karusel kartica biti napisan u JavaScriptuLjudi često zamišljaju da čim se od jednostavnih slika prijeđe na responzivne kartice s raznim komponentama, sam CSS prestaje biti održiv.

U praksi, CSS scroll-snap funkcionira jednako dobro za bogate kartice kao i za obične slike.Sve dok je svaka kartica blok unutar spremnika za pomicanje, možete se prikačiti na nju, animirati oko nje i slagati dodatne stilove preko nje. Naslovi, gumbi, fragmenti teksta, pa čak i ugrađeni mediji, ne mijenjaju bitno mehaniku.

JavaScript blista u uvjetnom ponašanju i složenim stanjimaAko vaš rotirajući izbornik mora dinamički filtrirati kartice, mijenjati redoslijed slajdova, sinkronizirati se s drugim komponentama, dohvaćati novi sadržaj u hodu ili podržavati visoko prilagođenu logiku („ako se klikne na ovu točku, prikaži tu potpuno nepovezanu karticu“), tada JavaScript može lakše izraziti tu poslovnu logiku nego sam CSS.

Međutim, iznenađujući broj svakodnevnih klizača u biti su statički popisi stavki koji se linearno krećuU tim slučajevima, korištenje nekoliko redaka CSS-a umjesto uvoza velike JS biblioteke jednostavnije je za razmišljanje i bolje za performanse. Razumijevanje scroll-snap-a i novijih pseudoelemenata omogućuje vam da JavaScript rezervirate za rijetke slučajeve kada se stvarno isplati.

Ako još uvijek učite front-end razvoj, tretiranje CSS carousel-a kao zadane osnovne postavke odlična je navika.Započnite s HTML-om i CSS-om, a skriptu koristite tek kada naiđete na jasno ograničenje. To vas uči više o tome što platforma već može i često dovodi do vitkijih i čišćih kodnih baza.

Korak unatrag, novi skup CSS značajki vezanih uz pomicanje, pričvršćivanje, gumbe, markere i upite o stanju pomicanja transformirao je karusele iz widgeta s puno skripti u uglavnom deklarativne komponente. Oslanjajući se na pomicanje i pričvršćivanje za osnovno ponašanje podjele stranica, korištenjem ::scroll-button() i ::scroll-marker() gdje je to podržano, i primjenjujući najbolje prakse za otkrivanje značajki i pristupačnost, možete isporučivati ​​karusele koji su brzi, robusni i lakši za održavanje od tradicionalnih JS-om pokretanih slajdera - a istovremeno zadržati dovoljno fleksibilnosti za miješanje s JavaScriptom tamo gdje to ciklička logika ili napredne interakcije zaista zahtijevaju.