Направите напредне CSS вртешке без JavaScript-а

Почетна » Питон » Направите напредне CSS вртешке без JavaScript-а

Изградња вртешака само са модерним CSS-ом више није пусти сан— то је веома реална, продукционо спремна опција која често може да надмаши класичне JavaScript библиотеке слајдера. Захваљујући функцијама као што су прикачивање скроловања, анимације вођене скроловањем, експериментални псеудо-елементи карусела и робусни примитиви приступачности, можете испоручити лагане, отпорне вртешке које и даље делују глатко, интерактивно и углађено.

Ако сте уморни од преузимања JavaScript пакета од 50KB само да бисте приказали неколико слајдова, овај водич вас води кроз оно што данашњи CSS може да учини за вас. Разложићемо кључне концепте који стоје иза CSS-базних каруселних елемената, како их повезати са scroll-snap-ом, када се ослонити на нови... ::scroll-button() ::scroll-marker() псеудо-елементи и како се спроводи аутоматско играње или кружно понашање, а да се приступачност и перформансе и даље третирају као грађани првог реда.

Зашто су карусели само са CSS-ом коначно озбиљна опција

Годинама је „вртешка“ била готово синоним за „ЈаваСкрипт додатак“Решења попут Swiper-а, Glide-а или домаћих клизача била су главни приступ: обрађивали су навигацију, стање, подршку за тастатуру и гестове додира, али по цену додатне тежине, слушача догађаја свуда и поприличне количине DOM гимнастике.

Модерни CSS је тихо затворио већи део те празнине. Са својствима као што су scroll-snap-type scroll-snap-align, можете претворити било који хоризонтални или вертикални скролер у пагинирано искуство. Поред тога, CSS Overflow Level 5 спецификација уводи генерисано у прегледачу дугмад и маркери за померање који се понашају као потпуно функционалан кориснички интерфејс карусела, али су у потпуности декларисани у CSS-у.

Велика победа је у томе што прегледач, а не ваш ЈаваСкрипт код, постаје одговоран за основне UX проблеме: физика скроловања, навигација помоћу тастатуре, редослед фокуса, па чак и ARIA улоге за контроле вртешке. У многим случајевима је заиста тешко направити нешто приступачније и са бољим перформансама од онога што вам платформа сада даје одмах по покретању.

Још једна велика предност CSS карусела је отпорностАко се JavaScript не учита, корисници са блокираним или онемогућеним скриптама и даље добијају сасвим употребљив скуп елемената који се могу скроловати. Нема хидратације, нема промене распореда коју уноси касно учитавање кода и има много мање покретних делова који могу временом да крену наопако.

Основни градивни блок: контејнер који се може скроловати са функцијом Scroll Snap

Сваки CSS-само карусел почиње као обичан контејнер за скроловањеЗамислите једноставну листу слајдова који се могу хоризонтално скроловати. Одатле додајете прикачивање скроловања тако да се прозор природно закључава на сваки слајд.

Минимална HTML структура за хоризонтални карусел је намерно једноставна: омотачки елемент и низ елемената слајда унутра. Можете користити ul sa li елементи, или div са дететом divs—CSS обавља тешки посао, тако да вам нису потребни посебни часови за свако дете осим ако ваш дизајн то не захтева.

Основно подешавање скроловања може изгледати овако у CSS-у, под претпоставком приказа пуне ширине, једног слајда:

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

Овде контејнер користи display: flex да поравна своју децу хоризонтално, i overflow-x: auto да бисте омогућили скроловање. Магија је у scroll-snap-type: x mandatory, што говори прегледачу да хоризонтално скроловање увек треба да се постави на валидну тачку прикачивања, и у scroll-snap-align: center на сваком слајду, што дефинише те тачке причвршћивања.

Ова комбинација флексбокса и скроловања одмах делује као вртешка: корисници скролују или превлаче, а најближи слајд се поставља на место. Пошто користи изворно скроловање, унос додиром на телефонима и таблетима једноставно функционише, без икаквог обрађивачи гестова или додатне библиотеке.

Нисте ограничени на једну ставку по приказуЗа вишеколонске вртешке које приказују неколико картица одједном, можете користити флексибилну ширину за ставке, на пример:

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

Ова варијација вам омогућава да прикажете, рецимо, три картице по приказном прозору са мало размака, а да притом и даље имају користи од понашања прикачивања. Корисници се крећу кроз странице са картицама уместо кроз појединачне слајдове, што одлично функционише за листе производа или галерије.

Дугмад за скроловање са псеудо-елементом ::scroll-button()

Када имате скролер са функцијом „snapping“, следећа ствар коју већина људи жели су експлицитна дугмад за навигацију.—претходне и следеће контроле које померају вртешку лево или десно. Традиционално бисте креирали <button> елементи, повезати догађаје клика и израчунати колико далеко треба скроловати.

Спецификација CSS Overflow 5 представља ::scroll-button(), псеудо-елемент који омогућава прегледачу да обави сав тај тешки посаоИако је ово тренутно доступно почев од Chrome-а 135 (и обично је у почетку иза експерименталних заставица), ово је увид у то како ће се вртешке креирати у будућности.

Дугмад за померање декларишете на исти начин као и било који други псеудо-елементНа пример, да бисте генерисали лево и десно дугме за вашу вртешку:

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

Када се овај CSS примени, прегледач заправо креира прави <button> елементи као сродници контејнера за скроловање, повезује их са скролером, додељује одговарајуће улоге и подешава њихово понашање. Један клик обично скролује око 85% подручја за скроловање, што се у већини вртешкастих распореда осећа као „страница“.

Ако ваш дизајн очекује тачно једну ставку пуне ширине по клику, можете комбиновати ове псеудо-елементе са строжим прикачивањем на свако дете додавањем scroll-snap-stop: alwaysТо приморава приказни прозор да се заустави на границама ставки уместо да се заустави на пола пута.

Својство садржаја овде служи двострукој сврсиПрва вредност је оно што корисници визуелно виде (у овом случају, стрелице), а други стринг је приступачан резервни текст који може бити изложен помоћној технологији. Слободни сте да стилизујете и позиционирате ову дугмад помоћу CSS-а или користите функције попут anchor() да их прецизно поравнате са вашим распоредом.

Маркери за скроловање са ::scroll-marker() и ::scroll-marker-group

Тачке или ознаке испод карусела – често назване „ознаке за пагинацију“ или „маркери“ – су још један уобичајени захтевОни приказују колико ставки постоји и која је тренутно видљива, и омогућавају корисницима да директно пређу на одређени слајд.

::scroll-marker() псеудо-елемент вам даје ове индикаторе без ручног генерисања сидрених веза или распонаСваки маркер је у суштини навигациони <a> елемент који креира прегледач, који указује на одговарајућу ставку за скроловање и учествује у навигацији помоћу тастатуре и читача екрана.

Да бисте ово подесили, кажете прегледачу где да постави групу маркера sa scroll-marker-group, и на којим елементима креирати маркере. Минимална конфигурација би могла изгледати овако:

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

Прегледач гради ::scroll-marker-group контејнер као сродник скролера и попуњава га једним маркером за свако изабрано детеУ овом једноставном примеру маркери су приказани као празне тачке, али можете подједнако лако користити текст попут „Сезона 1“, иконе или чак сличице променом content имовина.

Шта чини ове маркере посебним у поређењу са обичним траком за скроловање јесте да су то прави навигациони линкови. Они омогућавају корисницима да директно пређу на значајне позиције и долазе са корисном семантиком: постоји :target-current стање које показује који маркер одговара слајду који је тренутно приказан или је снимљен. Подршка за тастатуру се понаша као фокус група, а читачи екрана могу да их прикажу као контролу сличну листи табела.

Ова стратегија је посебно моћна када ваш скролер представља логичке делове, а не појединачне ставке.На пример, уместо да креирате десет маркера за десет епизода, можете креирати два маркера која прелазе на почетак прве и друге сезоне. Слободни сте да одлучите које „тачке интересовања“ треба да буду адресиране.

Комбиновање дугмади и маркера у комплетан кориснички интерфејс са вртешком

Кад ставиш ::scroll-button() ::scroll-marker() заједно на истом скролеру, добијате кориснички интерфејс који корисници одмах препознају као вртешку: контроле за претходно/следеће, ред маркера који показују колико су далеко напредовали и глатко пребацивање између слајдова.

Кључна разлика од класичних JavaScript слајдера је у томе што се већина ове логике сада налази у прегледачу.Дугмад и маркери су генерисани елементи са исправним ARIA улогама, правилно интегрисани у редослед табулације и причом о приступачности коју су дизајнирали основни тимови прегледача, а не изнова измишљена за сваку веб локацију.

Овај приступ доноси неколико веома практичних предностиРади са онемогућеним JavaScript-ом, елиминише треперење хидратације и проблеме са временом, смањује кумулативно померање распореда јер су контроле познате у време CSS распореда и беспрекорно се интегрише са анимацијама вођеним скроловањем или упитима стања скроловања ако желите да додате посебан шарм.

На уређајима осетљивим на додир, искуство је природно прилагођено додиру прстима јер је контејнер за скроловање и даље само изворни скролер. На десктоп рачунарима, унос помоћу точка миша и тастатуре функционише како се очекује, а индикатори фокуса на генерисаним контролама могу се стилизовати тако да испуњавају ваше смернице за дизајн и приступачност.

Са становишта одржавања, „ради мање, достићи више“ постаје прилично тачан описУместо одржавања логике вишеструких имплементација карусела у различитим пројектима, ослањате се на заједничке, стандардизоване функције платформе које ће се временом побољшавати без додатног рада са ваше стране.

Како направити да Scroll Snap функционише у стварним пројектима

Чак и ако на тренутак игноришете нове псеудо-елементе, само scroll-snap је већ довољно добар за многе продукцијске каруселе.Подршка прегледача за скроловање и привлачење у модерним претраживачима је солидна, а понашање је предвидљиво и код покрета точкића миша и додиром.

У најједноставнијем сценарију, ваш HTML вртешка може бити div са низом слика унутраМожете дати том контејнеру класу као што је .carousel и оставите подређене слике некласификованим; CSS се бави поравнањем и скроловањем.

Укључивањем scroll-behavior: smooth на контејнеру, скроловање између тачака причвршћивања постаје пријатно анимирано уместо скачкастог. Ово је посебно приметно када корисници кликну на маркере или сидрене везе или када програмски покрећете скроловање у хибридним подешавањима.

Свако кључно својство функције scroll-snap игра веома различиту улогу. scroll-snap-type дефинише осу и да ли је прикачивање обавезно или је само наговештај; scroll-snap-align на деци одређује где се закључавају у погледу (почетак, центар, крај); и scroll-snap-stop: always спречава прегледач да прескаче тачке прихватања приликом брзог скроловања.

Користећи се заједно, ова својства вам омогућавају да подесите тачно како би се карусел требао осећати— од нежног, опраштајућег снимања погодног за велике одељке садржаја, до строгог понашања слајд по слајд, савршеног за главне банере где никада не желите да се нађете „између“ ставки.

Пошто је ово чисти CSS, можете лако прилагодити распоред респонзивноПомоћу медијских упита можете да прелазите са једног слајда по приказу на уским екранима на неколико слајдова по приказу на широким десктоп рачунарима, једноставном променом flex-basis ставки. Нису потребне JavaScript тачке прекида, слушаоци за промену величине или поновно израчунате ширине.

Експериментални псеудо-елементи и детекција карактеристика

Нови псеудо-елементи оријентисани на карусел—::scroll-button(), ::scroll-marker() ::scroll-marker-group—су моћни, али и даље релативно свежиУ време писања овог текста, доступни су у Chrome-у 135 и новијим верзијама, често са потребним експерименталним заставицама, а временом ће се појавити и на другим претраживачима.

Пошто подршка још увек није универзална, производне локације би требало да се ослањају на детекцију функција и грациозне резервне опције.CSS вам даје @supports at-правило, које вам омогућава условну примену правила на основу препознавања својстава.

Можете дефинисати једноставну резервну навигациону траку—скуп линкова или дугмади који се налазе испод карусела — а затим сакривају ту траку када прегледач подржава изворна дугмад за скроловање. На пример:

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

Ovde .carousel-nav може да садржи ручно написане сидрене линкове који воде ка слајдовима путем ИД-ова, као <a href="#slide1">1</a>У прегледачима који разумеју ново својство дугмета за скроловање, појављују се ваше изворне контроле, а резервна навигација је скривена; у старијим прегледачима, навигација сидра остаје, упарена са функцијом скроловања за савршено употребљиво искуство.

Ова хибридна стратегија омогућава безбедно експериментисање са функцијама карусела следеће генерације већ данас., без везивања за одређени мотор или конфигурацију заставица. Како подршка прегледача сазрева, можете се више ослањати на псеудо-елементе и смањити део ручног скелирања.

Вртешке са аутоматском репродукцијом само помоћу CSS-а и анимацијама кључних кадрова

Још један уобичајени захтев је аутоматска репродукција – вртешка која се креће сама од себе, опционо паузирајући када се пређе мишем преко ње.Иако аутоматско репродуковање носи нека ограничења у погледу корисничког искуства и приступачности, могуће га је постићи искључиво CSS анимацијама.

Једноставан образац је анимирање хоризонталног померања слајдова.

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

У овом примеру, кључни кадрови проводе одређено време на сваком помаку пре него што пређу на следећи слајд.Нумера се враћа уназад на крају, стварајући изглед понављајуће слајдшоу пројекције преко четири слајда. Прелазак мишем преко вртешке паузира анимацију, тако да корисници могу да прегледају садржај без сталног кретања.

Да бисмо поштовали кориснике који преферирају смањено кретање из здравствених или комфорних разлога, можете да обмотате анимацију у медијски упит:

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

Ово осигурава да на системима где је потребно смањено кретање, клизачи остају статични, ефикасно онемогућавајући аутоматску репродукцију, а и даље омогућавајући ручно скроловање или навигацију помоћу дугмади/маркера где је то предвиђено.

Један важан компромис је то што се аутоматска репродукција заснована на кључним кадровима не интегрише аутоматски са функцијом померања и прикачивања.Ручно преводите садржај уместо да се ослањате на изворно скроловање, тако да морате пажљиво дизајнирати анимацију како бисте избегли полувидљиве слајдове и како би време било синхронизовано са распоредом.

Разматрања приступачности за CSS вртешке

Приступачност је област у којој CSS-базирани вртешке платформе заиста могу да заблистају, јер се велики део тешке логике пребацује са вашег прилагођеног кода на понашања платформе која су пажљиво дизајнирана и тестирана.

Када се ослањате на изворно скроловање плус скроловање-снап, аутоматски наслеђујете подршку за тастатуру, додир и мишКорисници могу да користе Tab за скролер, користе тастере са стрелицама за кретање, превлачењем прстом по екранима осетљивим на додир и скролују помоћу точка, без икаквих слушача догађаја или прилагођених обрађивача.

Експериментална дугмад за померање и маркери иду корак даљеПрегледач их креира са одговарајућом семантиком, интегрише их у редослед табулације и одржава њихово стање, што чини веома тешким случајно заборавити ARIA атрибуте или их погрешно означити. Добијене контроле у ​​облику карусела имају тенденцију да буду доследније доступне него имплементације са враћањем на почетну табелу.

И даље можете и треба да додате семантичке назнаке својим регионима вртелесаНа пример, обележавање контејнера са role="region" и описни aria-label помаже корисницима читача екрана да разумеју шта компонента представља:

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

Обезбеђивање видљивих индикатора фокуса за све интерактивне елементе остаје кључноБез обзира да ли су контроле ваша сопствена дугмад и линкови или псеудо-елементи генерисани од стране прегледача, уверите се да обриси фокуса нису уклоњени или превише суптилни да би се видели. Прилагодите outline, outline-offset или промене позадине по потреби како би се испунили захтеви за контраст.

Величина мете додира је још једно практично разматрањеЦиљајте на контроле величине најмање 44×44 пиксела како бисте били у складу са уобичајеним смерницама за приступачност, тако да корисници не би имали проблема са додиривањем стрелица или тачака на мањим екранима.

За било коју функцију аутоматског репродуковања, дајте корисницима јасну контролу и избегавајте превише агресивне покретеОбезбедите паузирање при преласку мишем преко екрана или експлицитно дугме за паузирање и размотрите подразумевано искључивање аутоматске репродукције ако је садржај густ или препун текста. У комбинацији са prefers-reduced-motion, ово чини вашу вртешку удобнијом за ширу публику.

Руковање кружним или „бесконачним“ скроловањем помоћу CSS-а

Једно понашање које људи често траже је кружно скроловањеКада дођете до последњег слајда и скролујете даље, глатко се враћате на први, попут физичке вртешке која се бескрајно окреће.

Данас не постоји директно, чисто CSS својство које чини контејнер за скроловање инхерентно кружним.Без дуплирања садржаја, изворни скролер ће имати почетак и крај: када дођете до последње ставке, даље скроловање вас једноставно не помера напред.

Аутори спецификација су свесни да многи UI карусели очекују ово понашање у петљи, и постоји активно интересовање за истраживање решења на нивоу платформе за циклично скроловање, слично као што су стандардизована нова дугмад и маркери за скроловање. Уз то речено, тренутно не можете тражити од прегледача да нативно омота позиције скроловања једном CSS декларацијом.

У чисто CSS подешавањима, симулација петљи обично значи анимирање трансформација (као у примерима кључних кадрова аутоматске репродукције) или прихватање линеарног краја секвенцеАко је беспрекорна бесконачност апсолутно неопходна и не можете да дуплирате садржај, Јаваскрипт је за сада и даље флексибилнији алат.

Добра вест је да вас ништа не спречава да комбинујете углавном CSS-ом вођену вртешку са мало JavaScript-а тамо где то заиста додаје вредностМожда се ослањате на дугме за скроловање и CSS за свакодневну навигацију, а затим додате неколико редова скрипте да бисте пратили позицију скроловања и скакали са краја на почетак када је то потребно.

HTML/CSS наспрам JavaScript-а за богате, каруселке засноване на картицама

Честа дилема за новије програмере је да ли сложенији карусел са картицама „мора“ бити написан у ЈаваскриптуЉуди често замишљају да чим пређу из једноставних слика у прилагодљиве картице са разним компонентама, сам CSS престаје да буде одржив.

У пракси, CSS scroll-snap функционише подједнако добро за богате картице као и за обичне сликеДокле год је свака картица блок унутар контејнера за скроловање, можете се прикачити на њу, анимирати око ње и наносити додатне стилове преко ње. Наслови, дугмад, фрагменти текста, па чак и уграђени медији, не мењају суштински механику.

Јаваскрипт блиста у условном понашању и сложеном стањуАко ваш вртешкаш мора динамички филтрирати картице, мењати редослед слајдова, синхронизовати се са другим компонентама, преузимати нови садржај у ходу или подржавати високо прилагођену логику („ако се кликне на ову тачку, прикажи ту потпуно неповезану картицу“), онда Јаваскрипт може лакше изразити ту пословну логику него сам CSS.

Међутим, изненађујући број свакодневних клизача су у суштини статичне листе ставки које се линеарно померајуЗа те случајеве, коришћење неколико линија CSS-а уместо увоза велике JS библиотеке је и једноставније за размишљање и боље за перформансе. Разумевање scroll-snap-а и новијих псеудо-елемената вам омогућава да резервишете JavaScript за ретке случајеве када се заиста исплати.

Ако још увек учите развој фронт-енда, третирање CSS карусела као подразумеване основне опције је одлична навикаПочните са HTML-ом и CSS-ом, а скрипту користите само када наиђете на јасно ограничење. Ово вас учи више о томе шта платформа већ може да уради и често доводи до виткијих и чистијих база кода.

Коракнувши уназад, нови скуп CSS функција везаних за скроловање, прикачивање, дугмад, маркере и упите за стање скроловања трансформисао је каруселе из виџета са пуно скрипти у углавном декларативне компоненте. Ослањајући се на scroll-snap за основно понашање страничења, коришћење ::scroll-button() ::scroll-marker() тамо где је то подржано, и применом најбољих пракси за детекцију функција и приступачност, можете испоручити вртешке које су брзе, робусне и лакше за одржавање од традиционалних слајдера вођених JS-ом — а да притом задржите довољно флексибилности за комбиновање са JavaScript-ом тамо где то циклична логика или напредне интеракције заиста захтевају.