CSS Scroll Snap permite site-urilor web să fixeze pagina web sau orice alt container de defilare într-o anumită poziție de defilare atunci când utilizatorul efectuează o operație de defilare. Această caracteristică a fost acceptat în toate browserele moderne de peste doi ani, dar multe site-uri web care ar putea beneficia de el încă nu îl folosesc.
Scroll snapping este probabil cel mai asociat cu carusele orizontale (vezi Abordarea doar CSS a lui Chris) și anumite pagini web împărțite în diapozitive pe ecran complet. Dar de ce să ne oprim aici? Cred că snapping poate îmbunătăți experiența de defilare pe orice pagină web care prezintă elemente într-o grilă sau flux.
De exemplu, majoritatea site-urilor de cumpărături arată produsele într-o grilă. În mod ideal, utilizatorul ar dori să sară între rândurile grilei cu efort minim. Utilizatorul poate apăsa Spaţiu pentru a derula pagina cu aproximativ un ecran (înălțimea ferestrei), dar în funcție de înălțimea rândurilor grilei, poziția de defilare va deveni în cele din urmă „desincronizată” cu grila, iar utilizatorul va trebui să o reajusteze manual.
Dacă adăugăm apariția derulării la această pagină, utilizatorul poate derula în mod constant la următorul rând cu Spaţiu tasta (apăsând Schimba + Spaţiu va derula la rândul anterior). Este destul de fără efort.
Cred că derularea ar fi o completare binevenită a acestui site. Și nici măcar nu este atât de complicat de implementat. Codul CSS pe care l-am folosit pentru acest exemplu este relativ simplu:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}Nu trebuie să așteptați dacă un site web pe care îl vizitați în mod regulat nu a adăugat încă opțiunea de defilare și credeți că vă va îmbunătăți experiența de defilare. Puteți adăuga personalitatea de defilare - cu stiluri de utilizator.
Adăugarea de stiluri de utilizator pe site-uri web
În videoclipul de mai sus, puteți vedea că am selectat un fișier user.css în preferințele avansate ale Safari. Acest fișier este o foaie de stil pentru utilizator. Conține stiluri CSS pe care le-am scris, stocate într-un local .css fișier și adăugat la Safari. Aceste „stiluri de utilizator” sunt apoi aplicate fiecărei pagini web pe care o deschid în Safari.
Chrome și Firefox nu permit utilizatorilor să selecteze o foaie de stil pentru utilizator. Firefox a acceptat o caracteristică similară numită userContent.css în trecut, dar această caracteristică a fost depreciată și dezactivat implicit în 2019. Recomand Extensia de browser Stylus pentru aceste două browsere (și alte browsere bazate pe Chromium).
Un avantaj semnificativ al Stylus este că vă permite să scrieți stiluri de utilizator pentru anumite site-uri web și URL-uri. Foaia de stil pentru utilizator Safari se aplică tuturor site-urilor web, dar acest lucru poate fi rezolvat, de exemplu, folosind noul :has() pseudo-clasa la creați selectoare care se potrivesc numai cu anumite site-uri web.
Modulul CSS Cascading definește a Originea utilizatorului pentru stilurile pe care utilizatorul le adaugă. Foaia de stil de utilizator Safari aparține acestei origini, dar extensia Stylus injectează stiluri de utilizator în Originea autorului, unde trăiesc foile de stil ale site-ului web. Mai exact, Stylus inserează stiluri de utilizator direct în pagină prin a <style> element la sfârşitul lui <html> ceea ce o face foaia de stil finală de pe pagină. Din punct de vedere tehnic, asta înseamnă că stilurile adăugate prin Stylus sunt clasificate ca stiluri de autor, deoarece nu sunt în User Origin, dar voi continua să le numesc stiluri de utilizator deoarece utilizatorul le adaugă.
Cu toate acestea, merită să țineți cont de această distincție, deoarece afectează cascada. Când specificitatea selectorului este egală, un stil de utilizator real este mai slab decât stilul propriu al paginii. Acest lucru face ca stilurile utilizatorului să fie excelente potrivit pentru valorile implicite ale utilizatorului. În aceleași condiții, un stil adăugat prin Stylus este puternic decât stilul paginii, astfel încât Stylus nu poate fi utilizat la fel de ușor pentru a defini valorile implicite ale utilizatorului.
Dacă adăugăm !important la amestec, atât stilurile de utilizator reale, cât și stilurile adăugate prin Stylus sunt mai puternice decât stilurile paginii. Deci, atunci când doriți să vă impuneți stilurile de utilizator pe un site web, nu contează dacă utilizați opțiunea „Foaie de stil” din Safari sau extensia Stylus. Ta !important stilurile vor câștiga în orice caz.
În secțiunea următoare, voi folosi un set de !important stiluri de utilizator pentru a impune defilarea pe pagina cronologică a site-ului Twitter. Scopul meu este să accelerez procesul de citire a cronologiei mele Twitter evitând pozițiile incomode de defilare în care cel mai de sus tweet este doar parțial pe ecran.
Defilați instantaneu pentru cronologia Twitter
După câteva experimente, m-am hotărât pe următorul cod CSS. Aceste stiluri funcționează bine în Firefox, dar am întâmpinat unele probleme în Chrome și Safari. Voi descrie aceste probleme mai detaliat mai târziu în articol, dar pentru moment, să ne concentrăm asupra comportamentului în Firefox.
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}Este necesar să se adauge !important la fiecare declarație, deoarece toate stilurile de utilizator trebuie să câștige asupra stilurilor proprii ale paginii web pentru ca implementarea noastră personalizată a defilării să funcționeze corect. Îmi doresc asta în loc să scriu în mod repetat !important, aș putea să pun stilurile mele de utilizator într-un „strat important”, dar o astfel de caracteristică CSS nu există (inca).
Urmărește videoclipul de mai jos pentru a vedea stilurile mele de utilizator în acțiune. Observați cum fiecare apăsare pe butonul Spaţiu tasta derulează următorul set de tweet-uri în vizualizare, iar primul tweet al fiecărui set este aliniat la marginea de sus a ferestrei de vizualizare. Acest lucru îmi permite să-mi citesc cronologia mai rapid. Când trebuie să mă întorc la setul anterior de tweet-uri, pot apăsa Schimba + Spaţiu.
Ceea ce îmi place la acest tip de defilare este că îmi permite să prezic cât de departe se va derula pagina ori de câte ori apes Spaţiu. Fiecare distanță de defilare este egală cu înălțimile combinate ale tweet-urilor vizibile care sunt în întregime pe ecran. Cu alte cuvinte, tweet-ul parțial vizibil din partea de jos a ecranului se va muta în partea de sus a ecranului, ceea ce îmi doresc.
Space va derula tweet-ul lui Dave în partea de sus a ecranului.Pentru a încerca stilurile mele de utilizator Scroll Snap pe propria cronologie Twitter, urmați acești pași:
- instalaţi Extensie stilou cu Firefox Add-ons sau Chrome Web Store.
- Navigați la cronologia dvs. Twitter la https://twitter.com/home.
- Faceți clic pe pictograma Stylus din bara de instrumente a browserului și faceți clic pe „această adresă URL” în fereastra pop-up.
- Stylus va deschide un editor de cod într-o nouă filă de browser. Copiați-lipiți stilurile de utilizator pentru derularea mea în editor și apăsați butonul Salvare din bara laterală din stânga. Stilurile vor fi aplicate imediat pe cronologia dvs. Twitter (nu este nevoie să reîncărcați pagina).
- Puteți actualiza oricând stilurile. Faceți clic pe pictograma Stylus și pe pictograma Creion pentru a deschide din nou editorul.
Incapacitatea de a trece peste snapping
Implementarea mea a defilării pentru cronologia Twitter are un defect major. Dacă un tweet este mai înalt decât fereastra de vizualizare, este imposibil să derulați pagina pentru a dezvălui partea de jos a acelui tweet (de exemplu, dacă doriți să dați like sau să retweeți acel tweet), deoarece browserul blochează pagina pentru a afișa partea de sus a tweet (sau partea de sus a următorului tweet).
Severitatea acestei probleme depinde de afișajul utilizatorului. Vizualizarea cronologiei Twitter pe un monitor mare de desktop la un factor mic de mărire a paginii, este posibil să nu întâlniți niciun tweet mai înalt decât fereastra de vizualizare.
Am întrebat Grupul de lucru CSS dacă ar fi posibil să adăugați un mecanism care să permită utilizatorului suprascrieți defilarea obligatorie a browserului. Probabil ar trebui să menționez că această problemă ar putea fi rezolvată, cel puțin în teorie, prin trecerea de la mandatory la proximity pocnind. Am testat proximity în Chrome și Firefox și l-am găsit inconsecvent și confuz. Browserul se închidea adesea când nu mă așteptam, și invers. Poate că codul Twitter interferează cu proximity algoritm, browserele sunt încă puțin greșite, sau poate că „defilez greșit”, dacă este posibil. Nu știu.
Dar principalul motiv pentru care am mers cu mandatory snapping este că am vrut să evit situațiile în care cel mai de sus tweet este doar parțial pe ecran după un defilare. Tipul de defilare rapidă între seturi de tweet-uri pe care l-am arătat în videoclipul de mai sus este posibil numai cu mandatory pocnind.
Dacă tu, ca mine, preferi mandatory rupând, pot sugera următoarele două soluții pentru problema „tweet înalt”:
- Puteți deschide tweet-ul pe propria pagină și puteți reveni la cronologia după aceea.
- Dacă doriți doar să faceți clic pe butoanele Like sau Retweet, puteți Schimba- dați clic pe tweet pentru a-l selecta și apoi apăsați L să-i placă, sau T urmată de Intrați pentru a-l retweet.
Probleme în Chrome și Safari
Stilurile mele de utilizator de instantanee de defilare produc comportamente vizibil diferite de apariție a derulării în Chrome, Safari și Firefox. Aceste diferențe sunt parțial din moment ce implementarea exactă a mecanismului de snapping este lăsat în sarcina browserului:
Modulul CSS Scroll Snap nu specifică și nici nu impune în mod intenționat nicio animație precisă sau fizică utilizată pentru a impune pozițiile de snap; aceasta este lăsată la latitudinea agentului utilizator.
Versiunea actuală de Safari are o eroare care împiedică apariția derulării să funcționeze corect pe cronologia Twitter. eu am a raportat acest bug.
În Chrome, am întâmpinat următoarele probleme:
- Operațiunile de defilare sunt animate inconsecvent. Uneori animația este lentă, alteori este instantanee și uneori începe lent, dar apoi este scurtată. Mi s-a părut iritant.
- Operațiunile de defilare se animă în general prea încet. Am efectuat un test în Chrome și Firefox (20 Spaţiu apăsări), și mi-a luat cu 70% mai mult timp să parcurg aceeași distanță pe cronologia mea Twitter în Chrome decât în Firefox (18.5 secunde în Chrome față de 11 secunde în Firefox).
- Când defilez folosind trackpad-ul laptopului, pagina pâlpâie foarte mult. Când încerc să defilez rapid ținând apăsată tasta Spaţiu tasta, pagina derulează foarte încet și oscilează. Bănuiesc că ambele probleme sunt cauzate de același algoritm. Se pare că Chrome se reface la o rată foarte mare în aceste cazuri. eu am a raportat acest bug.
Aceste erori de browser și diferențele dintre browsere pot fi o problemă pentru site-urile web care iau în considerare implementarea defilării. De exemplu, un dezvoltator web s-ar putea abține pentru că nu îi place modul în care se comportă apariția derulării într-un anumit browser. Browserele pot atenua această problemă devenind mai interoperabile. De fapt, Scroll Snap este una dintre zonele de focalizare ale browserului încrucișat Efortul Interop 2022.
Un alt mod în care situația ar putea fi îmbunătățită este prin introducerea de noi proprietăți CSS care ar face ca defilarea să fie mai configurabilă. Aceasta ar putea include durata animației de fixare, lungimea pragului de proximitate pentru fixare și un mecanism pentru a anula fixarea obligatorie.
A pocni sau nu?
Folosesc stilurile mele de utilizator Scroll Snap pe cronologia Twitter de câteva săptămâni și nu vreau să mă întorc. Capacitatea de a răsfoi rapid feedul meu doar cu Spaţiu cheia este doar la un alt nivel.
Cu toate acestea, consider că aceasta este o funcție avansată care probabil nu este pentru toată lumea. Există un motiv pentru care l-am activat numai pe cronologie (/home cale) și nicăieri altundeva pe site-ul Twitter. Snapping este o schimbare semnificativă a modului în care pagina derulează și este nevoie de ceva timp pentru a te obișnui. Poate funcționa grozav pentru un anumit caz de utilizare, dar poate, de asemenea, să stea în cale și să frustreze utilizatorul.
Prin urmare, site-urile web cu fluxuri ar trebui să ia în considerare oferirea de apariție a derulării doar ca o caracteristică opțională, după o analiză atentă și multe teste în diferite browsere și cu diferite metode de introducere (mouse, tastatură, trackpad, ecran tactil etc.).
Inainte sa pleci…
În cele din urmă, vă recomand cu căldură să instalați și să încercați Extensia de browser Stylus. Dezvoltatorii web (sau oricine cunoaște CSS) au puterea de a stila orice site web în browserul lor. Puteți aplica îmbunătățiri minore și remedieri site-urilor dvs. preferate. Îl folosesc de cele mai multe ori pentru a ascunde elementele paginii pe care le consider enervante, cum ar fi antete lipicioase, ferestre pop-up video și numărătoarea voturilor.
Dar, mai important, Stylus vă permite să testați rapid noi funcții CSS pe orice site web și să raportați erori de browser, dacă este necesar. Făcând acest lucru, puteți contribui la îmbunătățirea puțină a platformei web.
