CSS karusely bez JavaScriptu: Kompletní průvodce

Home » PYTHON » CSS karusely bez JavaScriptu: Kompletní průvodce

Vytváření karuselů bez jediného řádku JavaScriptu už není sci-fiModerní CSS vám poskytuje vše, co potřebujete k vytvoření plynulých a dotykově orientovaných sliderů pomocí Vlastnost CSS pro dotykovou akci které se v prohlížeči jeví jako nativní. Od přichycování rolování až po experimentální pseudoelementy, které automaticky generují ovládací prvky navigace, můžete dodat plně funkční komponenty a zároveň si udržet kompaktní balíček a jednodušší život.

Pokud jste se někdy potýkali s náročnými JS carousel knihovnami, problémy s hydratací nebo zvláštnostmi přístupnosti, carousely pouze s CSS jsou pro vás jako závan čerstvého vzduchu.S nejnovějšími specifikacemi (jako je CSS Overflow Level 5) a osvědčenými funkcemi, jako je scroll-snap-type, je nyní realistické dodávat produkční karusely, které jsou rychlé, přístupné z klávesnice a odolné i při vypnutém JavaScriptu.

Proč moderní CSS umožňuje volbu karuselů v JavaScriptu

Po léta byla výchozí odpověď na otázku „jak vytvořím karusel?“ „sehnat si JS knihovnu“.Swiper, Slick, Glide, Bootstrapův carousel a mnoho dalších vyřešilo problém tím, že za vás zkombinovalo posluchače událostí, časovače, pozorovatele změn velikosti a role ARIA – ale také vám do balíčku nacpaly další kilobajty a zavedly další závislost, kterou je třeba udržovat.

Dnes CSS tiše dohnalo většinu běžných případů použití karuseluPomocí několika vlastností můžete proměnit běžný horizontální scroller na stránkovaný, připínací zážitek, který funguje s kolečkem myši, trackpadem, šipkami na klávesnici a dotykovými tahy. Žádné posluchače, žádné přeformátování způsobené logikou JS a žádné závodní podmínky s hydratací ve frameworkech.

Základní myšlenka je jednoduchá: s karuselem zacházíte jako s posouvatelnou oblastí., ne jako magickou komponentu, která se teleportuje mezi snímky. CSS pak „pomáhá“ rolování pomocí bodů přichycení, plynulých přechodů a v nejnovější specifikaci i vestavěných tlačítek a značek, které prohlížeč vkládá do DOMu jako skutečné interaktivní prvky.

Tato změna má velké důsledky pro výkon a odolnostCSS karusel funguje perfektně, i když je JS blokován, nenačítá se nebo je uživatel deaktivován. Většinu těžké práce provádí vlastní rolovací engine prohlížeče, který je vysoce optimalizován ve všech hlavních enginech a vyladěn pro zařízení s nízkou spotřebou energie a nástroje pro usnadnění přístupu.

Kromě toho funkce CSS, jako například :has(), mřížkové rozvržení a animace řízené posouváním se zapojují do stejné oblasti pro posouvání, což vám umožňuje vytvářet sofistikované indikátory slajdů, odhalování obsahu nebo paralaxu, aniž byste museli křehkým způsobem slučovat tři různé systémy (váš kód, logiku knihovny a rolování prohlížeče).

Základní stavební blok: Scroll Snap pro karusely s CSS

Srdcem karuselu založeného pouze na CSS je modul Scroll Snap., což umožňuje definovat „magnetické“ body, na kterých by se měla pozice rolování uzamknout poté, co uživatel přestane rolovat. Místo toho, aby se zobrazení ocitlo v polovině mezi dvěma snímky, přichytí se k nejbližšímu z nich, což vytváří klasický pocit posuvníku.

Struktura HTML může být minimální: kontejner, který se posouvá horizontálně, a uvnitř něj řada prvků slidu. Pokud je vaše značkování konzistentní, nemusíte ani každému obrázku nebo kartě přiřazovat vlastní třídu – i když pojmenování položek často pomáhá s úpravou stylu a přístupnosti:

Příklad struktury pro základní obrázkový karusel by se dalo konceptualizovat jako obal, např. <ul class="carousel"> s více <li> položky, z nichž každá obsahuje obrázek nebo kartu. Kouzlo spočívá v CSS:

Kontejner definujete jako horizontální flexibilní rozvržení s povoleným rolováním. a určete, že se má přichytit podél osy x:

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

Každý jednotlivý snímek pak zobrazí pozici přichycení, obvykle uprostřed nebo na začátku zobrazovacího okna, a nastavuje pevný základ, takže se v každém zobrazení zobrazí jeden nebo několik:

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

Tento vzor vám již poskytuje překvapivě kompletní karuselUživatelé mohou na mobilu přejíždět prstem, posouvat pomocí myši nebo trackpadu a zobrazovaná oblast se vždy usadí na nejbližším snímku. Neexistuje žádný JS, který by sledoval události posouvání ani ručně upravoval pozice.

Pro vytvoření vícepoložkových karuselů (jako jsou produktové proužky) stačí upravit pouze flexibilitu.Například můžete zobrazit tři položky na zobrazení s trochou mezer pomocí něčeho jako flex: 0 0 calc(33.333% - 1rem) plus boční okraje. Funkce Scroll Snap nezáleží na tom, zda je každá „stránka“ jeden snímek na celou šířku nebo skupina menších karet.

Nemovitosti jako například object-fit: cover jsou užitečné při práci s RAW obrázky, čímž se zajistí, že se zobrazují na snímku bez roztahování. V kombinaci s pevným poměrem stran můžete získat obrázkové karusely, které zůstanou vizuálně konzistentní na obrazovce jakékoli velikosti.

Od obyčejných scrollovacích panelů po karusely s nativním vzhledem

Holý karusel s rolovacím mechanismem se už zdá být dobrý, ale moderní specifikace ho jdou ještě dál., zejména v Chromu 135+, kde se návrh CSS Overflow úrovně 5 začíná objevovat jako skutečné funkce. Specifikace zachází s karuselem jako s oblastí pro posouvání s volitelným, prohlížečem generovaným uživatelským rozhraním kolem něj.

V tomto modelu se „kolotoč“ rovná: jednomu scrolleru a až dvěma sadám afordancí.—tlačítka pro posouvání a značky pro posouvání. Obojí je vytvořeno pomocí pseudoelementů CSS, ale prohlížeč vedle posouvacího prvku vygeneruje skutečné sourozence DOM, takže se chovají jako nativní ovládací prvky.

Důležité je, že prohlížeč za vás nastaví sémantiku, pořadí fokusu a správu stavu.Vložené prvky mají správné role, lze je přepínat pomocí tabulátoru v rozumném pořadí a odrážejí aktuální pozici posouvání. To znamená, že replikace stejné úrovně přístupnosti s ručně generovanou JS knihovnou není triviální; potřebovali byste atributy ARIA, chování fokusní skupiny, navigaci pomocí klávesnice a živá hlášení oblastí, to vše musí fungovat společně.

I když se ještě nejste připraveni spoléhat na experimentální části, tento směr je důležitý.Signalizuje to, že karusely, karty, komponenty scrollspy a podobné UI vzory jsou v CSS povyšovány na „prvotřídní občany“, což postupně sníží potřebu vlastního JavaScriptového spojovacího kódu.

Konečným výsledkem je robustnější základní úroveň pro všechny uživatele.– včetně lidí, kteří vypínají JavaScript, spoléhají se na asistenční technologie, mají zařízení s nízkou spotřebou energie nebo prohlížejí web v nestabilních síťových podmínkách. Nativní rolování a CSS styling ve všech těchto scénářích trumfují widgety založené na skriptech.

Přidání tlačítek pro posouvání pomocí ::scroll-button()

Na některých platformách již vidíte malé šipky vedle posuvníků, ale nové ::scroll-button() pseudo-element jde ještě o krok dál a umožňuje CSS definovat vyhrazená tlačítka „předchozí/další“ pro jakoukoli posouvatelnou oblast – včetně karuselů.

Tato tlačítka pro posuv definovaná pomocí CSS se chovají odlišně od starých šipek posuvníkuMísto posouvání obsahu v malých krocích poskakují zhruba o 85 % viditelné oblasti na jedno kliknutí. V karuselu s plnou šířkou a zarovnáním podle potřeby to působí téměř stejně jako navigační tlačítko pro jednotlivé snímky.

Pokud skutečně potřebujete přesný pohyb jedné položky, můžete kombinovat možnosti přichycení rolováníTypický recept je scroll-snap-type: x mandatory na nádobě a scroll-snap-stop: always na každém dítěti Snap. Tímto způsobem se jedním stisknutím tlačítka posuvu efektivně přesunete z jedné karty na druhou.

Z hlediska syntaxe vypadá přidávání tlačítek pro posuv velmi podobně jako stylování jiných pseudoelementů.Vyberete si posouvatelný prvek (například .carousel) a cíl ::scroll-button(left) or ::scroll-button(right) pro reprezentaci ovládacích prvků vpřed a vzad. Minimální příklad:

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

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

Hodnota obsahu oddělená lomítkem umožňuje poskytnout vizuální i přístupný popisek.Prohlížeč poté vytvoří skutečné <button> uzly jako sourozence vaší oblasti pro posouvání a umístí váš obsah do nich. Můžete je volně umisťovat a stylovat dle libosti, stejně jako jakýkoli jiný prvek – pomocí absolutního pozicování, CSS mřížky nebo dokonce pozicování kotev.

Styl focusu je zde stále důležitýNapříklad použití pravidla, jako je .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } zajišťuje, že když uživatelé přejdou na tato tlačítka pomocí klávesy Tab, uvidí jasný posun zaostřovacího kroužku od okraje prvku, čímž zachová použitelnost klávesnice a shodu s normami WCAG.

Prohlížeč v okně sleduje stav tlačítek a dostupný rozsah posouvání.To znamená, že se nemusíte starat o deaktivaci tlačítka „předchozí“, když jste na prvním snímku, nebo tlačítka „další“ na konci; platforma dokáže tyto podmínky zpracovat standardizovaným způsobem.

Značky posouvání s ::scroll-marker() pro navigaci odrážkami nebo popisky

Vizuální značky – tečky nebo miniatury pod karuselem – jsou dnes uživateli téměř očekávané.. Nový ::scroll-marker() pseudo-element umožňuje generovat tyto indikátory striktně pomocí CSS, přičemž každý z nich je propojen s konkrétní položkou v posouvatelném seznamu.

Na rozdíl od palce posuvníku představují značky posuvníku sémantické body zájmu.Každá značka neodpovídá pouze pozici v pixelech, ale skutečnému podřízenému prvku, což ji činí ideální pro scénáře, jako jsou sezóny v televizním seriálu, kategorie produktů nebo logické kapitoly v příběhu, spíše než pro každý jednotlivý snímek.

Značky se zobrazují jako platné <a> prvky, což vám zdarma poskytuje dvě důležité funkce: navigaci na stránce a správnou sémantiku pro čtečky obrazovky. Chovají se podobně jako kotevní odkazy, ale s některými vylepšeními přizpůsobenými pro použití v karuselu.

Mezi tato vylepšení patří :target-current pseudotřída, což odpovídá okamžiku, kdy je odpovídající položka aktuálně přichycena do zobrazení nebo jinak považována za „aktivní snímek“. Můžete ji použít ke zvýraznění aktivní značky jiným pozadím nebo ohraničením.

Abyste to propojili, nejprve definujete, kde by měla být skupina značek umístěna. s použitím scroll-marker-group vlastnost na kontejneru, obvykle před nebo za scrollerem. Například scroll-marker-group: after; by umístil značky za oblast karuselu v DOMu.

Pak se zaměříte na jednotlivé děti, které by měly generovat značky.Pokud jsou vaše snímky <li> prvky, něco jako .carousel > li::scroll-marker bude stačit. Běžným vzorem je vytváření prázdných teček:

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

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

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

Prohlížeč se postará o generování <a> značky a jejich seskupení do vyhrazeného kontejneru ::scroll-marker-groupa jejich zobrazení jako prvků ovládaných klávesnicí, které se chovají jako fokusní skupina. Čtečky obrazovky je mohou prezentovat podobně jako seznam tabulek: přesouváte fokus mezi značkami a aktivujete je pro přechod na konkrétní snímek.

Značky nejsou omezeny pouze na tečky. Můžete nastavit content k číslům ("1", "2"atd.), čitelné popisky jako „Série 1“ nebo „Kapitola 3“, nebo dokonce vložené obrázky pro vytvoření galerií miniatur pro rozvržení s velkým množstvím fotografií, jako jsou galerie produktů elektronického obchodování.

Kombinování tlačítek, značek a záložních strategií

Když na karuselu s funkcí scroll-snap zkombinujete tlačítka pro posouvání a značky, získáte komponentu, která je k nerozeznání od JS řešení., ale je snazší na údržbu a má méně pohyblivých částí. Uživatelé mohou klikat na šipky, klepat na odrážky, přejíždět prstem po dotykových obrazovkách nebo používat navigaci pomocí klávesnice – to vše s konzistentním chováním.

Tato kombinace také řeší běžné problémy s výkonem a UX.Protože žádný skript nekoordinuje změny snímků, nedochází k ručnímu narušování rozvržení. scrollLeft úpravy nebo časovače spouštěné v nepříznivých časech. CLS (kumulativní posun rozvržení) je snížen, protože strom DOM je připraven od začátku a prvky se neinjekují ani neměří v pozdních fázích životního cyklu.

Je tu ale háček: ::scroll-button a ::scroll-marker jsou stále experimentální. a v současné době se objevují pouze v Chromu 135+ za experimentálními příznaky. To znamená, že pokud plánujete jejich použití na produkčních webech, musíte bezpodmínečně navrhnout elegantní záložní řešení.

Detekce prvků pomocí @supports je tvůj nejlepší spojenecMůžete vykreslit tradiční navigační panel – odkazy na #slide1, #slide2 a tak dále – ve výchozím nastavení jej skrýt, když jsou k dispozici nativní ovládací prvky. Hrubý koncepční vzorec vypadá takto:

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

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

V HTML stačí jednoduchá navigace s kotevními odkazykaždý snímek dostane ida navigace ukazuje na tato ID. Skok na kotvu uvnitř kontejneru pro uchopení scrollování se pěkně integruje s chováním přichycení, takže se snímek po skoku úhledně přichytí.

To znamená, že si můžete užívat výhod experimentálních pseudoelementů v podpůrných prohlížečích.—plně nativní tlačítka, značky a funkce pro správu stavu posouvání — a přitom stále nabízí plně funkční zážitek i jinde. Žádný uživatel se nestane účastníkem nepoužitelného slideru.

Navíc tohle všechno funguje i s vypnutým JavaScriptem., protože se spoléháte výhradně na kotvy HTML, chování rolování CSS a rolovací engine prohlížeče. Pro mnoho vzorů UX – galerie, časové osy, podrobné prezentace – je to více než dost.

Automaticky přehrávané karusely pouze v CSS s animacemi klíčových snímků

Jednou z běžných funkcí, které lidé od karuselů očekávají, je automatické přehrávání.—snímky se po několika sekundách automaticky posouvají. I když se to často implementuje pomocí časovačů JavaScriptu, toto chování lze také aproximovat pomocí čistě CSS animací.

Trik spočívá v animaci transformace flexibilního řádku, který obsahuje všechny snímky.Pro pevný počet snímků definujete časovou osu klíčových snímků, kde stopa chvíli zůstane na každé pozici snímku a poté přeskočí na další. Něco jako:

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

Pak tuto animaci aplikujete na obalovací modul který obsahuje prvky snímku, např. .autoplay-carousel { display: flex; animation: slide 12s infinite; }Procentní rozsahy definují doby „prodlevy“ na každém snímku, aby byl obsah čitelný před dalším krokem.

Je zásadní přidat způsob, jak mohou uživatelé pozastavit automatické přehráváníJednoduchý, ale efektivní vzorec je pozastavení při najetí myší pomocí .autoplay-carousel:hover { animation-play-state: paused; }, takže uživatelé počítačů mohou zastavit pohyb při interakci s obsahem.

Úvahy o přístupnosti jdou ještě dále s preferencemi pohybu. Respektující prefers-reduced-motion je považováno za osvědčený postup, takže můžete animaci zcela vypnout pro uživatele, kteří preferují méně pohybu:

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

I když řešení automatického přehrávání v CSS nedokážou snadno zpracovat všechny okrajové případy, které dokáže JS– jako skutečně dynamické počty snímků nebo složitá logika pozastavení/obnovení řízená uživatelem – jsou překvapivě solidní pro jednoduché, statické karusely, když se chcete skriptování zcela vyhnout.

Porovnání karuselů pouze s CSS a JavaScriptem

Rozhodování mezi CSS a JavaScriptem pro carousel není řešení typu „všechno, nebo nic“.; záleží na vašich požadavcích, publiku a rozpočtu na údržbu. V mnoha reálných scénářích se však rovnováha výrazně posunula ve prospěch CSS.

Z hlediska výkonu jsou CSS carousely jasnými vítězi.Nedochází k žádnému parsování ani spouštění kódu knihovny, žádné posluchače událostí při každé interakci s rolováním a žádné přepočítávání rozvržení za běhu spouštěné úpravami skriptů. Scrollovací engine prohlížeče je napsán ve vysoce optimalizovaném nativním kódu a vyladěn pro vše od špičkových stolních počítačů až po telefony s nízkou spotřebou energie.

Co se týče přístupnosti, nové funkce CSS carousel výrazně zvyšují laťku.Tlačítka a značky pro posouvání poskytované prohlížečem jsou předprogramovány s rolemi ARIA, chováním klávesnice a oznámeními, které by jinak musely být pečlivě znovu vytvořeny v JavaScriptu. I bez nich lze karusel s funkcí posouvání přitahování stále zpřístupnit pomocí rolí a popisků.

Na druhou stranu, JavaScript zůstává užitečný pro velmi pokročilé vzoryPokud potřebujete propracovanou logiku automatického přehrávání, analytické hooky, vlastní fyziku nebo synchronizaci více karuselů se sdíleným stavem (např. hlavní obrázek plus řádek miniatur plus externí stránkování), mohou být přístupy řízené skripty stále flexibilnější.

Klíčovým poznatkem však je, že mnoho „každodenních“ karuselů ve skutečnosti tuto úroveň složitosti nepotřebuje.Jednoduchá galerie produktů, slider s referencemi nebo proužek „doporučených příspěvků“ se obvykle dají implementovat pomocí funkce „Scroll Snap“, několika pravidel CSS a volitelných nativních ovládacích prvků – ušetříte tak nutnost stahovat 50KB závislost jen pro pohyb mezi třemi slajdy.

Dalším faktorem je odolnost v případě selhání JavaScriptu.Karusely pouze pro CSS fungují perfektně, i když je JS blokován firemní proxy, poškozen blokovačem reklam nebo se prostě ještě nenačítá, když se uživatel na stránku dostane. Takovéhoto elegantního degradování je obtížné dosáhnout u knihoven, které po načtení stránky závisí na fázi inicializace.

Nejlepší postupy přístupnosti pro CSS carousels

I když prohlížeč pomáhá s některými aspekty přístupnosti, stále hrajete klíčovou roli. ...aby byl váš CSS karusel použitelný pro každého. Sémantika, správa fokusu a citlivost pohybu by měly být na prvním místě.

Nejprve udělejte karuselu vhodný orientační bodZabalení do elementu pomocí role="region" a popisný aria-label jako „Galerie produktů“ nebo „Doporučené články“ usnadňují uživatelům čteček obrazovky vyhledávání a pochopení.

Každý snímek může nést také přístupný štítek, například prostřednictvím aria-label s uvedením „Snímek 1 ze 3“, „Snímek 2 ze 3“ atd. Tímto způsobem, když uživatel přistane na snímku, získá okamžitý kontext o své pozici v sekvenci.

Nezapomeňte na viditelné indikátory zaostřeníJakýkoli interaktivní prvek – ať už je to ::scroll-button, je ::scroll-markerodkaz vygenerovaný `-` nebo manuální kotva v záložní navigaci – potřebuje jasný styl zaměření, který splňuje pokyny pro kontrast a není odstraněn globálními resety.

Pokud používáte automatické přehrávání nebo animace řízené posouváním, respektujte preference pohybu., Použitím prefers-reduced-motion Zakázání nebo zjednodušení animací není volitelné, pokud vám záleží na uživatelích náchylných k kinetóze, a je docela snadné zabalit intenzivnější efekty do mediálního dotazu.

A konečně, zvažte velikosti dotykových cílůAť už stylujete nativní značky posuvníku nebo vlastní navigační odkazy, udržujte interaktivní oblasti o velikosti alespoň 44×44 CSS pixelů. To obvykle znamená velkorysé odsazení a mezery, spíše než malé kruhy těsně u sebe.

Pracovní postupy, nástroje a budoucí směry v reálném světě

Aby se experimentování s CSS carousels zjednodušilo, některé týmy vytvořily nástroje pro živé konfigurace. kde můžete přepínat přepínače – povolit tlačítka pro posouvání, přepínat značky, upravovat režimy přichycení – a okamžitě vidět aktualizovaný CSS potřebný pro danou konfiguraci. Tato hřiště jsou fantastická pro učení experimentováním.

Spolu s konfigurátory ukazují galerie karuselových ukázek pouze v CSS, které obsahují vše potřebné.Najdete zde vzory jako rozhraní s kartami, navigaci Scrollspy, krok za krokem procházející snímky, galerie miniatur a další, které všechny sdílejí stejný základ v podobě oblastí pro posouvání a navíc přichytávání a volitelné ovládací prvky.

Mnoho z těchto demo stránek je záměrně dodáváno s nulovým JavaScriptem. aby to dokázal: bohaté a interaktivní uživatelské rozhraní je zcela dosažitelné pouze s HTML a CSS. Často zveřejňují své nástroje prostřednictvím @layer deklarace, abyste si mohli prohlédnout a vybrat styly, které odpovídají vašemu vlastnímu designovému systému.

Platforma CSS již pracuje na dvou důležitých vývojových cestách, a to i do budoucna.První je „přineste si vlastní prvky“, kde místo spoléhání se na tlačítka a značky generované prohlížečem budete moci vložit své vlastní <a> a <button> značky a zároveň využívat výhod základní logiky rolování.

To by otevřelo dveře značkovým, bohatě stylizovaným ovládacím prvkům postaveným na utility frameworkech. jako Tailwind, přičemž sémantika a chování by se měly řídit platformou. V podstatě byste sice ozdobili uživatelské rozhraní, ale prohlížeč by zůstal mozkem operace.

Druhou velkou oblastí je cyklické neboli nekonečné rolováníMnoho dnešních karuselů se po dosažení konce „zalamuje“ a plynule se vrací na první snímek. Čistá implementace tohoto postupu je složitá a často zahrnuje duplicitní obsah nebo složitou logiku. Podpora cyklického rolování na úrovni platformy by prohlížečům umožnila elegantněji a efektivněji zvládat chování obtékání.

Jak tyto funkce dozrávají a šíří se z Chromu do dalších vyhledávačů, rozdíl mezi tím, co dokáže „nativní CSS karusel“, a tím, co nabízejí náročné JavaScriptové knihovny, se bude i nadále zmenšovat, takže přístupy bez skriptů se stanou výchozím bodem spíše než experimentem na okraji.

Celkově vzato, moderní CSS vám dává všechny důvody k přehodnocení způsobu vytváření karuselů.Počínaje jednoduchým rozvržením s funkcí scroll-snap, vrstvením experimentálních tlačítek a značek tam, kde je to podporováno, a zavedením osvědčených postupů pro přístupnost můžete vytvořit responzivní, plynulé a robustní slidery, aniž byste museli sahat po závislosti na JS. Pro mnoho projektů to znamená rychlejší načítání stránek, méně kódu k údržbě a odolnější prostředí pro každého uživatele.