CSS-karusellit ilman JavaScriptiä: Täydellinen opas

Etusivu » Python » CSS-karusellit ilman JavaScriptiä: Täydellinen opas

Karusellien rakentaminen ilman riviäkään JavaScriptiä ei ole enää tieteisfiktiota; moderni CSS tarjoaa sinulle kaiken tarvittavan luodaksesi sulavia ja kosketusystävällisiä liukusäätimiä käyttämällä CSS-kosketustoimintoominaisuus jotka tuntuvat selaimessa natiiveilta. Vierityksen napsauttamisesta kokeellisiin pseudo-elementteihin, jotka luovat automaattisesti navigointiohjaimet, voit toimittaa täysimittaisia ​​komponentteja pitäen samalla pakettisi virtaviivaisena ja elämäsi yksinkertaisempana.

Jos olet joskus paininut raskaiden JS-karusellikirjastojen, nesteytysongelmien tai saavutettavuusongelmien kanssa, pelkästään CSS:ään perustuvat karusellit ovat kuin raikas tuulahdus.Uusimpien teknisten tietojen (kuten CSS Overflow Level 5) ja vakiintuneiden ominaisuuksien, kuten scroll-snap-typeon nyt realistista toimittaa tuotantovalmiita karuselleja, jotka ovat nopeita, näppäimistöllä käytettäviä ja vikasietoisia, vaikka JavaScript olisi poistettu käytöstä.

Miksi moderni CSS tekee JavaScript-karuselleista valinnaisia

Vuosien ajan oletusarvoinen vastaus kysymykseen "miten rakennan karusellin?" oli "hankkia JS-kirjasto".Swiper, Slick, Glide, Bootstrapin karuselli ja monet muut ratkaisivat ongelman tasapainottelemalla tapahtumakuuntelijoita, ajastimia, koonmuuttajien tarkkailijoita ja ARIA-rooleja puolestasi – mutta ne myös tungettivat pakettiin ylimääräisiä kilotavuja ja toivat mukanaan uuden ylläpidettävän riippuvuuden.

Nykyään CSS on hiljaisesti saavuttanut yleisimmät karusellien käyttötapaukset.Muutamalla ominaisuudella voit muuttaa normaalin vaakasuuntaisen vierityspalkin sivutetuksi, diaan napsauttavaksi käyttökokemukseksi, joka toimii hiiren rullalla, ohjauslevyllä, näppäimistön nuolilla ja kosketusnäytöillä. Ei kuuntelijoita, ei JS-logiikan aiheuttamia uudelleenjuoksutuksia eikä kilpailuehtoja hydratoinnin yhteydessä kehyksissä.

Perusajatus on yksinkertainen: käsittelet karuselliasi vieritettävänä alueena, ei taianomaisena komponenttina, joka teleporttautuu diojen välillä. CSS sitten "auttaa" vieritystä kohdistuspisteillä, sujuvilla siirtymillä ja uusimmassa speksissä sisäänrakennetuilla painikkeilla ja merkeillä, jotka selain lisää DOM:iin todellisina interaktiivisina elementteinä.

Tällä muutoksella on suuria seurauksia suorituskyvylle ja sietokyvylleCSS-karuselli toimii silti täydellisesti, vaikka JS estetään, ei lataudu tai käyttäjä poistaa sen käytöstä. Selaimen oma vieritysmoottori tekee suurimman osan raskaasta työstä, ja se on optimoitu tarkasti kaikissa tärkeimmissä vieritysmoottoreissa ja viritetty vähän virtaa kuluttaville laitteille ja esteettömyystyökaluille.

Tämän lisäksi CSS-ominaisuuksia ovat mm. :has(), ruudukkoasettelu ja vieritysohjatut animaatiot kytkeytyvät samaan vieritysalueeseen, jonka avulla voit luoda hienostuneita diaindikaattoreita, sisällön paljastuksia tai parallaksia yhdistämättä kolmea eri järjestelmää (koodiasi, kirjaston logiikkaa ja selaimen vierityspalkkia) hauraalla tavalla.

Ydinosa: Scroll Snap vain CSS:lle tarkoitettuihin karuselleihin

CSS-pohjaisen karusellin ytimessä on Scroll Snap -moduuli., jonka avulla voit määrittää "magneettisia" pisteitä, joihin vierityskohdan tulisi lukittua käyttäjän lopetettua vierittämisen. Sen sijaan, että näkymä pysähtyisi kahden dian puoliväliin, se napsahtaa lähimpään diaan, mikä antaa sille klassisen liukusäädintuntuman.

HTML-rakenne voi olla minimaalinen: vaakasuunnassa vierivä säilö sekä sen sisällä olevat diaelementit. Sinun ei tarvitse edes antaa jokaiselle kuvalle tai kortille omaa luokkaa, jos merkintäsi on johdonmukainen – vaikka kohteiden nimeäminen usein auttaakin tyylin ja esteettömyyden kannalta:

Esimerkki peruskuvakarusellin rakenteesta voitaisiin käsitteellistää kääreenä, kuten <ul class="carousel"> useiden kanssa <li> kohteita, joista jokainen sisältää kuvan tai kortin. Taika asuu CSS:ssä:

Määrittelet säilön vaakasuoraksi joustavaksi asetteluksi, jossa vieritys on käytössä. ja määritä, että sen pitäisi napsahtaa x-akselin suuntaisesti:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }

Jokainen yksittäinen dia paljastaa sitten napsautuskohdan, yleensä näkymän keskellä tai alussa, ja asettaa kiinteän perustan, jotta yksi tai useampi näkyy näkymässä:

.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Tämä kuvio antaa sinulle jo yllättävän täydellisen karusellinKäyttäjät voivat pyyhkäistä mobiililaitteella, vierittää hiirellä tai ohjauslevyllä, ja katselualue asettuu aina lähimpään diaan. JS ei tarkkaile vieritystapahtumia tai säädä sijainteja manuaalisesti.

Usean tuotteen karusellien (kuten tuotelistojen) luomiseksi sinun tarvitsee vain säätää joustopohjaa.Voit esimerkiksi näyttää kolme kohdetta näkymää kohden pienellä rivivälillä käyttämällä jotain seuraavanlaista: flex: 0 0 calc(33.333% - 1rem) plus sivumarginaalit. Scroll Snap ei välitä siitä, onko jokainen "sivu" yksi täysleveä dia vai joukko pienempiä kortteja.

Ominaisuudet, kuten object-fit: cover ovat hyödyllisiä raakakuvien kanssa työskenneltäessävarmistaen, että ne täyttävät dia-alueen venyttämättä. Yhdessä kiinteän kuvasuhteen kanssa saat kuvakaruselleja, jotka pysyvät visuaalisesti yhdenmukaisina kaikissa näytön kokoluokissa.

Yksinkertaisista vierityspalkeista natiivin tuntuisiin karuselleihin

Pelkkä vierityskaruselli tuntuu jo hyvältä, mutta modernit ominaisuudet vievät sen pidemmälle, erityisesti Chromen versiossa 135+, jossa CSS Overflow Level 5 -luonnos alkaa näkyä todellisina ominaisuuksina. Spesifikaatio käsittelee karusellia vieritysalueena, jonka ympärillä on valinnainen, selaimen luoma käyttöliittymä.

Tässä mallissa "karuselli" tarkoittaa yhtä vierityspalkkia ja enintään kahta affordanssien sarjaa.—vierityspainikkeet ja vieritysmerkit. Molemmat luodaan CSS-pseudoelementeillä, mutta selain näyttää vierityspalkin vieressä oikeita DOM-sisaruselementtejä, joten ne toimivat kuin natiivit ohjausobjektit.

Ratkaisevasti selain hoitaa semantiikan, kohdistusjärjestyksen ja tilanhallinnan puolestasi.Injektoiduilla elementeillä on oikeat roolit, ne ovat tabulaattoreilla järkevässä järjestyksessä ja ne heijastavat nykyistä vierityskohtaa. Tämä tarkoittaa, että saman esteettömyystason replikointi käsintehdyllä JS-kirjastolla ei ole triviaalia; tarvitsisit ARIA-attribuutteja, kohderyhmätoimintoja, näppäimistönavigointia ja reaaliaikaisten alueiden ilmoituksia, jotka kaikki toimivat yhdessä.

Vaikka et olisikaan vielä valmis luottamaan kokeellisiin osiin, tämä suunta on tärkeäSe viestii siitä, että karuselleista, välilehdistä, Scrollspy-komponenteista ja vastaavista käyttöliittymäkuvioista tehdään CSS:ssä "ensimmäisen luokan kansalaisia", mikä vähentää tasaisesti mukautetun JavaScript-liimakoodin tarvetta.

Lopputuloksena on vankempi lähtötilanne kaikille käyttäjille– mukaan lukien ihmiset, jotka poistavat JS:n käytöstä, ovat riippuvaisia ​​avustavasta teknologiasta, käyttävät vähän virtaa kuluttavia laitteita tai selaavat epävakaissa verkkoyhteyksissä. Natiivi vieritys ja CSS-tyyli ovat parempia kuin paljon skriptejä käyttävät widgetit kaikissa näissä tilanteissa.

Vierityspainikkeiden lisääminen ::scroll-button()-funktiolla

Joillakin alustoilla näet jo pieniä nuolia vierityspalkkien vieressä, mutta uusi ::scroll-button() pseudo-elementti menee askeleen pidemmälle ja antaa CSS:n määrittää omat "edellinen/seuraava"-painikkeet mille tahansa vieritettävälle alueelle – mukaan lukien karusellit.

Nämä CSS:llä määritellyt vierityspainikkeet toimivat eri tavalla kuin vanhan koulukunnan vierityspalkin nuoletSen sijaan, että ne siirtäisivät sisältöä pienin askelin, ne hyppäävät noin 85 % näkyvästä alueesta napsautusta kohden. Täysleveässä, napsautettavassa karusellissa tämä tuntuu lähes täsmälleen samalta kuin diakohtainen navigointipainike.

Jos todella tarvitset täsmälleen yhden esineen liikkeen, voit yhdistää vierityksen napsautusasetuksiaTyypillinen resepti on scroll-snap-type: x mandatory säiliön päällä ja scroll-snap-stop: always jokaisella Snap-lapsella. Tällä tavoin yksi vierityspainikkeen painallus vie sinut tehokkaasti kortista toiseen.

Syntaksin näkökulmasta vierityspainikkeiden lisääminen näyttää paljolti samalta kuin muiden pseudo-elementtien muotoilu.Valitset vieritettävän elementin (esimerkiksi .carousel) ja kohde ::scroll-button(left) or ::scroll-button(right) edustamaan taakse- ja eteenpäin suuntautuvia säätimiä. Lyhyt esimerkki:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }

.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }

Viivalla erotettu sisältöarvo mahdollistaa sekä visuaalisen että helppokäyttöisen otsikon luomisen.Selain luo sitten oikean <button> solmut vieritysalueesi sisaruksina ja sijoittaa sisältösi niiden sisään. Voit vapaasti sijoittaa ja muotoilla ne haluamallasi tavalla, aivan kuten minkä tahansa muun elementin – käyttämällä absoluuttista sijoittelua, CSS-ruudukkoa tai jopa ankkurisijoittelua.

Keskittymisen tyylillä on edelleen merkitystä tässäEsimerkiksi sellaisen säännön soveltaminen kuin .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } varmistaa, että kun käyttäjät siirtyvät näihin painikkeisiin tabulaattorilla, he näkevät selkeän tarkennusrenkaan, joka on siirtynyt elementin reunasta, mikä säilyttää näppäimistön käytettävyyden ja WCAG-yhteensopivuuden.

Konepellin alla selain seuraa painikkeen tilaa ja käytettävissä olevaa vieritysaluettaTämä tarkoittaa, että sinun ei tarvitse huolehtia "edellinen"-painikkeen tai "seuraava"-painikkeen poistamisesta käytöstä ensimmäisessä diassa; alusta pystyy käsittelemään nämä ehdot standardoidulla tavalla.

Vieritysmerkit ::scroll-marker()-funktiolla luettelomerkkien tai otsikoiden navigointiin

Visuaaliset merkit – pisteet tai pikkukuvat karusellin alla – ovat nykyään lähes odotettavissa käyttäjiltä.. Uuden ::scroll-marker() pseudo-elementin avulla voit luoda indikaattoreita yksinomaan CSS:n avulla, joista jokainen on linkitetty tiettyyn vieritettävän luettelon kohteeseen.

Toisin kuin vierityspalkin peukalokuvakkeella, vieritysmerkit edustavat semanttisia kiinnostuksen kohteitaJokainen merkitsijä ei vastaa pelkästään pikselimääräistä sijaintia, vaan todellista lapsielementtiä, mikä tekee siitä ihanteellisen skenaarioille, kuten TV-sarjan kausille, tuotekategorioille tai tarinan loogisille luvuille, pikemminkin kuin jokaiselle yksittäiselle ruudulle.

Merkit näkyvät kelvollisina <a> elementtejä, joka tarjoaa kaksi tärkeää ominaisuutta ilmaiseksi: sivun sisäisen navigoinnin ja näytönlukijoille tarkoitetun oikean semantiikan. Ne toimivat paljolti kuten ankkurilinkit, mutta niissä on joitakin karusellikäyttöön räätälöityjä parannuksia.

Näiden parannusten joukossa on mm. :target-current pseudoluokka, joka vastaa tilannetta, jossa vastaava kohde on parhaillaan näkyvissä tai sitä pidetään muuten "aktiivisena diana". Voit käyttää sitä korostaaksesi aktiivisen merkin eri taustalla tai reunuksella.

Tämän kytkemiseksi määrität ensin, missä merkkiryhmän tulisi sijaita käyttäen scroll-marker-group ominaisuutta säilössä, tyypillisesti ennen vierityspalkkia tai sen jälkeen. Esimerkiksi scroll-marker-group: after; sijoittaisi merkit DOM:iin karusellialueen jälkeen.

Sitten kohdistat kohdistuksen yksittäisiin lapsiin, joiden tulisi tuottaa merkkejäJos diasi ovat <li> elementtejä, jotain sellaista .carousel > li::scroll-marker tekee kyllä. Yleinen kaava on luoda tyhjiä pisteitä:

.carousel { scroll-marker-group: after; }

.carousel > li::scroll-marker { content: " "; }

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

Selain huolehtii tiedon luomisesta <a> merkit, ryhmittelemällä ne omaan ::scroll-marker-group-säiliöönja näyttämällä ne näppäimistöllä navigoitavina elementteinä, jotka toimivat kuin kohderyhmä. Näytönlukijat voivat esittää ne samalla tavalla kuin taulukkoluettelo: siirrät kohdistusta merkkien välillä ja aktivoit ne siirtyäksesi tiettyyn diaan.

Merkinnät eivät rajoitu pisteisiin. Voit asettaa content numeroihin ("1", "2", jne.), ihmisen luettavia otsikoita, kuten ”Kausi 1” tai ”Luku 3”, tai jopa tekstiin upotettuja kuvia pikkukuvagallerioiden luomiseksi paljon kuvia sisältäville asetteluille, kuten verkkokaupan tuotegallerioille.

Painikkeiden, merkkien ja varastrategioiden yhdistäminen

Kun sekoitat vierityspainikkeita ja -merkkejä vierityskarusellin päällä, saat komponentin, jota on vaikea erottaa JS-ratkaisusta., mutta sitä on helpompi ylläpitää ja siinä on vähemmän liikkuvia osia. Käyttäjät voivat napsauttaa nuolia, napauttaa luettelomerkkejä, pyyhkäistä kosketusnäytöillä tai käyttää näppäimistönavigointia – kaikki tämä toimii yhdenmukaisesti.

Tämä yhdistelmä ratkaisee myös yleisiä suorituskykyyn ja käyttökokemukseen liittyviä ongelmiaKoska mikään skripti ei koordinoi dian muutoksia, et saa asettelun sotkeutumista manuaalisesta asettelusta. scrollLeft säätöjä tai ajastimia, jotka aktivoituvat hankaliin aikoihin. CLS (kumulatiivista asettelun muutosta) pienenee, koska DOM-puu on valmis alusta alkaen, etkä joudu lisäämään tai mittaamaan elementtejä elinkaaren loppuvaiheessa.

Tässä on kuitenkin juju: ::scroll-button ja ::scroll-marker ovat vielä kokeellisia. ja tällä hetkellä ne tulevat vain Chrome 135+ -versiossa kokeellisten lippujen taakse. Tämä tarkoittaa, että sinun on ehdottomasti suunniteltava tyylikkäitä varajärjestelmiä, jos aiot käyttää niitä tuotantoympäristöissä.

Ominaisuuksien tunnistus @supports on paras liittolaisesi täälläVoit hahmontaa perinteisen navigointipalkin – linkit kohteeseen #slide1, #slide2 ja niin edelleen – oletusarvoisesti piilota se sitten, kun natiivit ohjausobjektit ovat käytettävissä. Karkea käsitteellinen malli näyttää tältä:

.carousel-nav { display: flex; gap: 0.5rem; }

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

HTML-koodissa yksinkertainen navigointi ankkurilinkeillä riittää: jokainen dia saa id, ja navigointi osoittaa näihin tunnisteisiin. Vieroituskohdistuskontin sisällä olevaan ankkuriin hyppääminen integroituu hyvin kohdistustoimintoihin, joten dia napsahtaa siististi hypyn jälkeen.

Tämä tarkoittaa, että voit nauttia kokeellisten pseudoelementtien eduista tukevissa selaimissa.—täydelliset natiivit painikkeet, merkinnät ja vieritystilan koukut — mutta tarjoavat silti täysin toimivan käyttökokemuksen muualla. Yksikään käyttäjä ei jää jumiin käyttökelvottoman liukusäätimen kanssa.

Tämän lisäksi kaikki tämä toimii edelleen, kun JavaScript on poistettu käytöstä., koska luotat pelkästään HTML-ankkureihin, CSS-vierityskäyttäytymiseen ja selaimen vieritysmoottoriin. Monille käyttökokemusmalleille – gallerioille, aikajanoille ja vaiheittaisille esittelyille – se on enemmän kuin tarpeeksi.

Vain CSS:ssä toimivat automaattisesti toistettavat karusellit avainruutuanimaatioilla

Yksi yleinen ominaisuus, jota ihmiset odottavat karuselleilta, on automaattinen toisto.—diat vaihtuvat automaattisesti muutaman sekunnin kuluttua. Vaikka tämä toteutetaan usein JavaScript-ajastimilla, voit myös approksimoida tämän toiminnan käyttämällä puhtaita CSS-animaatioita.

Temppu on animoida sellaisen flex-rivin muunnos, joka sisältää kaikki diatKiinteälle määrälle dioja määrität avainruutujen aikajanan, jossa raita pysyy kunkin dian kohdassa jonkin aikaa ja hyppää sitten seuraavaan. Jotain tällaista:

@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); } }

Sitten käytät tätä animaatiota kääreeseen joka pitää diaelementtejäsi, esim. .autoplay-carousel { display: flex; animation: slide 12s infinite; }Prosenttiosuudet määrittävät kunkin dian "viiveajan", jotta sisältö on luettavissa ennen siirtymistä eteenpäin.

On erittäin tärkeää lisätä tapa, jolla käyttäjät voivat keskeyttää automaattisen toistonYksinkertainen mutta tehokas tapa on pysähtyä hiiren viereen .autoplay-carousel:hover { animation-play-state: paused; }, jotta pöytätietokoneen käyttäjät voivat pysäyttää liikkeen, kun he ovat vuorovaikutuksessa sisällön kanssa.

Esteettömyysnäkökohdat menevät vielä pidemmälle liikeasetusten kanssa. Kunnioittaen prefers-reduced-motion pidetään parhaana käytäntönä, joten voit poistaa animaation kokonaan käytöstä käyttäjille, jotka haluavat vähemmän liikettä:

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

Vaikka CSS:n automaattisen toiston ratkaisut eivät pysty helposti käsittelemään kaikkia reunatapauksia, joihin JS pystyy— kuten aidosti dynaamiset diamäärät tai monimutkainen käyttäjälähtöinen tauko-/jatkamislogiikka — ne ovat yllättävän luotettavia yksinkertaisissa, staattisissa karuselleissa, kun haluat välttää skriptausta kokonaan.

Vain CSS- ja JavaScript-karusellien vertailu

CSS:n ja JavaScriptin välillä päättäminen karusellissa ei ole "kaikki tai ei mitään" -tilanne.; se riippuu vaatimuksistasi, yleisöstäsi ja ylläpitobudjetistasi. Mutta vaaka on kallistunut voimakkaasti CSS:n eduksi monissa tosielämän tilanteissa.

Suorituskyvyn näkökulmasta CSS-karusellit ovat selkeitä voittajia.Kirjastokoodia ei jäsennellä tai suoriteta, ei tapahtumakuuntelijoita jokaisella vieritystoiminnolla eikä skriptattujen säätöjen laukaisemia ajonaikaisia ​​asettelun uudelleenlaskentoja. Selaimen vieritysmoottori on kirjoitettu erittäin optimoidulla natiivikoodilla ja viritetty kaikkeen huippuluokan pöytätietokoneista vähän virtaa kuluttaviin puhelimiin.

Saavutettavuuden osalta uudet CSS-karuselliominaisuudet nostavat rimaa merkittävästi.Selaimen tarjoamat vierityspainikkeet ja -merkit on esiohjelmoitu ARIA-rooleilla, näppäimistötoiminnoilla ja ilmoituksilla, jotka muuten pitäisi luoda huolellisesti uudelleen JavaScriptillä. Vaikka näitä ei olisikaan, vierityskaruselli voidaan silti tehdä esteettömäksi roolien ja tunnisteiden avulla.

Toisaalta JavaScript on edelleen hyödyllinen erittäin edistyneille malleilleJos tarvitset monimutkaista automaattisen toiston logiikkaa, analytiikkakoukkuja, mukautettua fysiikkaa tai synkronoidaksesi useita karuselleja jaetun tilan kanssa (esim. pääkuva, pikkukuvarivi ja ulkoinen sivutus), skriptipohjaiset lähestymistavat voivat silti olla joustavampia.

Keskeinen havainto on kuitenkin se, että monet "arkipäiväiset" karusellit eivät itse asiassa tarvitse tällaista monimutkaisuutta.Yksinkertainen tuotegalleria, asiakaspalautteen liukusäädin tai ”suositeltujen julkaisujen” nauha voidaan yleensä toteuttaa vieritystoiminnolla, muutamalla CSS-säännöllä ja valinnaisilla natiiveilla säätimillä – näin säästyy 50 kt:n riippuvuuden lisääminen vain kolmen dian välillä siirtymistä varten.

Toinen huomioon otettava seikka on JavaScriptin vikasietoisuusCSS-pohjaiset karusellit toimivat edelleen täydellisesti, vaikka JS olisi estetty yrityksen välityspalvelimen toimesta, mainostenesto-ohjelma rikkoi sen tai se ei olisi yksinkertaisesti vielä latautunut käyttäjän saapuessa sivulle. Tällaista sulavaa hajoamista on vaikea saavuttaa kirjastoilla, jotka ovat riippuvaisia ​​alustusvaiheesta sivun latautumisen jälkeen.

CSS-karusellien esteettömyyskäytännöt

Vaikka selain auttaa joissakin esteettömyysominaisuuksissa, sinulla on silti ratkaiseva rooli CSS-karusellin käytön helpottamiseksi kaikille. Semantiikan, tarkennuksen hallinnan ja liikeherkkyyden tulisi olla etusijalla mielessäsi.

Anna ensin karusellille sopiva maamerkkiKäärimällä sen elementtiin, jossa on role="region" ja kuvaileva aria-label kuten ”Tuotegalleria” tai ”Esittelyssä olevat artikkelit”, helpottaa näytönlukijoiden löytämistä ja ymmärtämistä.

Jokaisella dialla voi olla myös helppokäyttöinen tarraesimerkiksi kautta aria-label sanomalla ”Dia 1/3”, ”Dia 2/3” ja niin edelleen. Tällä tavoin käyttäjä saa välittömästi kontekstin dialle päätyessään sijainnistaan ​​diasarjassa.

Älä unohda näkyviä tarkennusindikaattoreitaMikä tahansa interaktiivinen elementti – olipa se sitten ::scroll-buttontai ::scroll-marker-luodun linkin tai manuaalisen ankkurilinkin varanavigointipalkissa – tarvitsee selkeän kohdistustyylin, joka noudattaa kontrastin suuntaviivoja eikä sitä poisteta globaaleissa nollauksissa.

Jos käytät automaattista toistoa tai vieritysohjattuja animaatioita, ota huomioon liikeasetukset. käyttämällä prefers-reduced-motion Animaatioiden poistaminen käytöstä tai yksinkertaistaminen ei ole valinnaista, jos välität matkapahoinvoinnille alttiista käyttäjistä, ja intensiivisemmät tehosteet on helppo sisällyttää mediakyselyyn.

Lopuksi, ota huomioon kosketuskohteiden kootOlitpa sitten suunnittelemassa natiiveja vieritysmerkkejä tai omia navigointilinkkejäsi, pidä interaktiiviset alueet vähintään noin 44 × 44 CSS-pikselin kokoisina. Tämä tarkoittaa yleensä reilua täyttöä ja riviväliä pienten tiiviisti pakattujen ympyröiden sijaan.

Todelliset työnkulut, työkalut ja tulevaisuuden suunnat

CSS-karuselleilla kokeilemisen helpottamiseksi jotkut tiimit ovat luoneet live-konfigurointityökaluja. jossa voit napsauttaa kytkimiä – ottaa käyttöön vierityspainikkeita, vaihtaa merkkejä, säätää kohdistustiloja – ja nähdä välittömästi kyseiseen kokoonpanoon tarvittavan päivitetyn CSS:n. Nämä leikkikentät ovat loistavia näpräämällä oppimiseen.

Konfiguraattorien ohella kuratoidut CSS-pohjaisten karusellimallien demogalleriat esittelevät mahdollisuuksiaLöydät malleja, kuten välilehtiin jaettuja käyttöliittymiä, Scrollspy-navigointia, vaiheittaisia ​​dioja, pikkukuvagallerioita ja paljon muuta, jotka kaikki jakavat saman vieritysalueiden perustan sekä kiinnitys- ja valinnaiset säätimet.

Monet näistä demosivustoista toimitetaan tarkoituksella ilman JavaScriptiä todistaakseen asian: rikas ja vuorovaikutteinen käyttöliittymä on täysin saavutettavissa pelkästään HTML:llä ja CSS:llä. He usein paljastavat apuohjelmansa @layer ilmoituksia, jotta voit tarkastella ja valita omaan suunnittelujärjestelmääsi sopivia tyylejä.

Tulevaisuutta ajatellen CSS-alusta työskentelee jo kahdella tärkeällä kehityspolullaEnsimmäinen on ”tuo omat elementtisi”, jossa selaimen luomien painikkeiden ja merkkien sijaan voit lisätä omia elementtejä. <a> ja <button> merkintätapaa, mutta hyötyy silti taustalla olevasta vierityslogiikasta.

Tämä avaisi oven brändätyille, tyylikkäille ja hyödyllisillä kehyksillä rakennetuille ohjaimille. kuten Tailwind, säilyttäen samalla alustan hallitseman semantiikan ja käyttäytymisen. Pohjimmiltaan käyttöliittymä koristeltaisiin, mutta selaimen annettaisiin pysyä toiminnan aivoina.

Toinen suuri alue on syklinen eli ääretön vieritysMonet nykyiset karusellit "kiertävät" dian loppuun ja palaavat saumattomasti takaisin ensimmäiseen diaan. Tämän siisti toteuttaminen on hankalaa ja sisältää usein päällekkäistä sisältöä tai monimutkaista logiikkaa. Alustatason tuki sykliselle vieritykselle antaisi selainten käsitellä kiertävän toiminnan tyylikkäämmin ja tehokkaammin.

Näiden ominaisuuksien kypsyessä ja levitessä Chromesta muihin hakukoneisiin, kuilu "natiivin CSS-karusellin" ominaisuuksien ja raskaiden JavaScript-kirjastojen tarjoamien ominaisuuksien välillä kavenee edelleen, jolloin skriptittömät lähestymistavat ovat oletusarvoinen lähtökohta reunatapauskokeilun sijaan.

Kaiken kaikkiaan moderni CSS antaa sinulle kaikki syyt miettiä uudelleen karusellien rakentamista.Aloittamalla yksinkertaisella vierityspainikkeella, lisäämällä kokeellisia painikkeita ja merkkejä tuetuissa paikoissa ja ripottamalla esteettömyyskäytäntöjä kaikkialle, voit toimittaa responsiivisia, sujuvia ja kestäviä liukusäätimiä ilman JS-riippuvuutta. Monissa projekteissa tämä tarkoittaa nopeampia sivuja, vähemmän ylläpidettävää koodia ja joustavampaa käyttökokemusta jokaiselle käyttäjälle.