CSS вртешке без ЈаваСкрипта: Комплетан водич

Почетна » Питон » CSS вртешке без ЈаваСкрипта: Комплетан водич

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

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

Зашто модерни CSS чини JavaScript каруселе опционим

Годинама је подразумевани одговор на питање „како да направим карусел?“ био „преузмите JS библиотеку“.Swiper, Slick, Glide, Bootstrap-ов carousel и многи други су решили проблем жонглирањем слушаоцима догађаја, тајмерима, посматрачима промене величине и ARIA улогама уместо вас — али су такође убацили додатне килобајте у ваш пакет и увели још једну зависност коју треба одржавати.

Данас је CSS тихо сустигао најчешће случајеве употребе вртешкеСа неколико својстава, можете претворити обичан хоризонтални скролер у пагинирано искуство превлачења које ради са точкићем миша, тракпедом, стрелицама на тастатури и превлачењем додиром. Нема слушача, нема преобликовања изазваних JS логиком и нема услова трке са хидратацијом у оквирима.

Основна идеја је једноставна: третирате свој карусел као регион који се може скроловати, а не као магична компонента која се телепортује између слајдова. CSS затим „помаже“ скроловању помоћу тачака прикачивања, глатких прелаза и, у најновијој спецификацији, уграђених дугмади и маркера које прегледач убризгава у DOM као праве интерактивне елементе.

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

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

Основни градивни блок: Скнапање померања за вртешке које користе само CSS

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

HTML структура може бити минимална: контејнер који се хоризонтално скролује, плус низ елемената слајда унутар њега. Чак ни не морате свакој слици или картици дати посебну класу ако је ваше означавање доследно — иако именовање ваших елемената често помаже у стилизацији и приступачности:

Пример структуре за основни вртешку слика може се замислити као омотач попут <ul class="carousel"> са вишеструким <li> ставке, свака садржи слику или картицу. Магија је у CSS-у:

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

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

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

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

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

Да бисте креирали вишеставне вртешке (као што су траке производа), потребно је само да подесите флексибилну основуНа пример, можете приказати три ставке по приказу са мало размака користећи нешто попут flex: 0 0 calc(33.333% - 1rem) плус бочне маргине. Функцији Scroll Snap није важно да ли је свака „страница“ један слајд пуне ширине или група мањих картица.

Својства као што су object-fit: cover корисни су при раду са сировим сликама, осигуравајући да попуњавају површину слајда без истезања. У комбинацији са фиксним односом ширине и висине, можете добити вртешке слика које остају визуелно доследне на било којој величини екрана.

Од обичних скролера до карусељака са осећајем изворног садржаја

Вртешка са голим померањем и скроловањем већ делује добро, али модерне спецификације иду даље, посебно у Chrome-у 135+ где нацрт CSS Overflow-а нивоа 5 почиње да се појављује као стварна функција. Спецификација третира вртешку као област за скроловање са опционим, корисничким интерфејсом генерисаним од стране прегледача око ње.

У том моделу, „вртешка“ је једнака: једном скролеру плус до два скупа афорданси—дугмад за скроловање и маркери за скроловање. Оба су креирана помоћу CSS псеудо-елемента, али прегледач емитује стварне DOM сроднике поред вашег скролера тако да се понашају као изворне контроле.

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

Чак и ако још нисте спремни да се ослоните на експерименталне делове, овај правац је важанТо сигнализира да се карусели, картице, scrollspy компоненте и слични UI обрасци уздижу на ниво „грађана првог реда“ у CSS-у, што ће постепено смањивати потребу за прилагођеним JavaScript лепљивим кодом.

Крајњи резултат је робуснија основа за све кориснике—укључујући људе који онемогућавају JS, ослањају се на помоћну технологију, имају уређаје са малом потрошњом енергије или прегледају садржај у условима нестабилне мреже. Нативно скроловање плус CSS стилизовање надмашују виџете са пуно скрипти у свим тим сценаријима.

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

На неким платформама већ видите мале стрелице поред трака за скроловање, али нови ::scroll-button() псеудо-елемент иде корак даље и омогућава CSS-у да дефинише посебна дугмад „претходно/следеће“ за било коју област која се може скроловати, укључујући и каруселе.

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

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

Са синтаксне перспективе, додавање дугмади за померање изгледа веома слично стилизовању других псеудо-елеменатаБираш елемент који се може скроловати (рецимо, .carousel) и циљ ::scroll-button(left) or ::scroll-button(right) да представља контроле за напред и назад. Минимални пример:

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

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

Вредност садржаја одвојена косим цртама вам омогућава да обезбедите и визуелну и приступачну ознакуПрегледач затим креира прави <button> чворове као сроднике вашег подручја за скроловање и поставља ваш садржај унутар њих. Слободни сте да их позиционирате и стилизујете како желите, баш као и било који други елемент - користећи апсолутно позиционирање, CSS мрежу или чак позиционирање сидра.

Фокус стил је и даље важан овдеНа пример, примена правила као што је .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } осигурава да када корисници кликну на ова дугмад помоћу тастера Tab, виде јасан помак прстена фокуса од ивице елемента, чувајући употребљивост тастатуре и усклађеност са WCAG стандардима.

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

Маркери за померање са ::scroll-marker() за навигацију помоћу тачака или ознака

Визуелни маркери - тачке или сличице испод вртешке - данас су готово очекивани од стране корисника. Нови ::scroll-marker() псеудо-елемент вам омогућава да генеришете те индикаторе искључиво помоћу CSS-а, сваки од њих повезан са одређеном ставком у листи која се може скроловати.

За разлику од палца траке за скроловање, маркери за скроловање представљају семантичке тачке интересаСваки маркер не одговара само позицији у пикселима, већ стварном подређеном елементу, што га чини идеалним за сценарије попут сезона у ТВ серији, категорија производа или логичких поглавља у причи, а не за сваки појединачни кадар.

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

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

Да бисте ово повезали, прво дефинишете где би група маркера требало да се налази коришћењем scroll-marker-group својство на контејнеру, обично пре или после скролера. На пример, scroll-marker-group: after; би поставио маркере након региона каруселе у DOM-у.

Затим циљате појединачну децу која треба да генеришу маркереАко су ваши слајдови <li> елементи, нешто попут .carousel > li::scroll-marker ће урадити. Уобичајени образац је креирање празних тачака:

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

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

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

Претраживач се брине о генерисању <a> маркере, групишући их у посебан контејнер ::scroll-marker-group, и приказивањем истих као елемената по којима се може кретати помоћу тастатуре и који се понашају као фокус група. Читачи екрана могу их представити слично као листу табела: померате фокус између маркера и активирате их да бисте прешли на одређени слајд.

Маркери нису ограничени на тачке. Можете подесити content до бројева ("1", "2"итд.), ознаке читљиве људима попут „Сезона 1“ или „Поглавље 3“, или чак уграђене слике за креирање галерија сличица за распореде са пуно фотографија, као што су галерије производа за е-трговину.

Комбиновање дугмади, маркера и резервних стратегија

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

Ова комбинација такође решава уобичајене проблеме са перформансама и корисничким искуством.Пошто ниједан скрипт не координира промене слајдова, не долази до ручног померања распореда. scrollLeft подешавања или тајмери ​​који се активирају у незгодним временима. CLS (кумулативно померање распореда) је смањено јер је DOM стабло спремно од почетка и не убризгавате или не мерите елементе касно у животном циклусу.

Међутим, постоји једна зачкољица: ::scroll-button и ::scroll-marker су још увек експериментални и тренутно се појављује само у Chrome-у 135+ иза експерименталних заставица. То значи да апсолутно морате да дизајнирате грациозне резервне опције ако планирате да их користите на продукционим сајтовима.

Детекција карактеристика путем @supports је твој најбољи савезник овдеМожете да прикажете традиционалну навигациону траку — линкове до #slide1, #slide2 и тако даље — подразумевано, затим га сакријте када су доступне изворне контроле. Груби концептуални образац изгледа овако:

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

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

У HTML-у је довољна једноставна навигација са сидреним линковимасваки слајд добија id, а навигација указује на те ИД-ове. Скакање на сидро унутар контејнера за померање се лепо интегрише са понашањем померања, тако да се слајд уредно помера након скока.

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

Поврх тога, све ово и даље ради када је ЈаваСкрипт онемогућен, јер се ослањате искључиво на HTML сидра, CSS понашање скроловања и механизам скроловања прегледача. За многе UX обрасце - галерије, временске линије, приказе корак по корак - то је више него довољно.

Вртешке са аутоматском репродукцијом само помоћу 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; }, тако да корисници рачунара могу да зауставе кретање када интерагују са садржајем.

Разматрања приступачности иду још даље са подешавањима кретањаПоштујући prefers-reduced-motion сматра се најбољом праксом, тако да можете потпуно онемогућити анимацију за кориснике који преферирају мање кретања:

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

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

Поређење CSS-only и JavaScript карусела

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

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

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

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

Међутим, кључни увид је да многим „свакодневним“ вртешкама заправо није потребан овај ниво сложености.Једноставна галерија производа, слајдер са препорукама или трака са „истакнутим објавама“ обично се могу имплементирати помоћу функције „scroll snap“, неколико CSS правила и опционих нативних контрола — што вам штеди потребу да повучете зависност од 50KB само да бисте се кретали између три слајда.

Још једно разматрање је отпорност када ЈаваСкрипт откажеВртешке које подржавају само CSS настављају да раде савршено ако је JS блокиран корпоративним проксијем, покварен блокатором огласа или једноставно још није учитан када корисник дође на страницу. Ту врсту грациозне деградације је тешко постићи са библиотекама које зависе од фазе иницијализације након учитавања странице.

Најбоље праксе приступачности за CSS вртешке

Чак и ако прегледач помаже са неким аспектима приступачности, ви и даље играте кључну улогу у томе да ваш CSS вртешка буде употребљива за све. Семантика, управљање фокусом и осетљивост на кретање треба да вам буду на првом месту.

Прво, дајте вртешци одговарајућу оријентирну тачкуУмотавање у елемент са role="region" и описни aria-label као што су „Галерија производа“ или „Истакнути чланци“ олакшавају корисницима читача екрана да пронађу и разумеју.

Сваки слајд може да носи и приступачну ознаку, на пример преко aria-label наводећи „Слајд 1 од 3“, „Слајд 2 од 3“ и тако даље. На тај начин, када корисник дође на слајд, добија одмах контекст о својој позицији у низу.

Не заборавите видљиве индикаторе фокусаБило који интерактивни елемент — било да је у питању ::scroll-buttonје ::scroll-marker-генерисана веза или ручно сидро у вашој резервној навигацији — потребан је јасан стил фокуса који пролази смернице за контраст и не уклања се глобалним ресетовањем.

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

На крају, размотрите величине мете додираБез обзира да ли стилизујете изворне маркере за скроловање или сопствене навигационе линкове, интерактивне области треба да буду величине најмање 44×44 CSS пиксела. То обично значи великодушно попуњавање и размак, а не ситне кругове збијене један уз други.

Токови рада, алати и будући правци у стварном свету

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

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

Многи од ових демо сајтова намерно се испоручују без JavaScript-а да би доказали поенту: богат, интерактиван кориснички интерфејс је у потпуности достижан само помоћу HTML-а и CSS-а. Они често откривају своје корисничке могућности кроз @layer декларације, тако да можете прегледати и одабрати стилове који одговарају вашем систему дизајна.

Гледајући унапред, CSS платформа већ ради на два важна еволуциона пута.Први је „донесите своје елементе“, где уместо да се ослањате на дугмад и маркере које генерише прегледач, моћи ћете да укључите своје <a> <button> означавање, а да притом и даље има користи од основне логике скроловања.

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

Друго велико подручје је циклично или бесконачно скроловањеМноги карусели се данас „преврћу“ када дођете до краја, беспрекорно се враћајући на први слајд. Чиста имплементација овога је компликована, често укључује дуплирани садржај или сложену логику. Подршка за циклично скроловање на нивоу платформе омогућила би прегледачима да елегантније и ефикасније обрађују понашање преклапања.

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

Све у свему, модерни CSS вам даје све разлоге да преиспитате како правите вртешкеПочевши од једноставног распореда са скроловањем, додавањем експерименталних дугмади и маркера где је то подржано и применом најбољих пракси приступачности, можете пружити респонзивне, глатке и робусне слајдере без посезања за JS зависношћу. За многе пројекте, то значи брже странице, мање кода за одржавање и отпорније искуство за сваког корисника.