CSS Scroll Snap võimaldab veebisaitidel klõpsata veebilehe või mõne muu kerimiskonteineri kindlasse kerimisasendisse, kui kasutaja sooritab kerimistoimingu. See funktsioon on olnud toetatud kõigis kaasaegsetes brauserites üle kahe aasta, kuid paljud veebisaidid, mis võiksid sellest kasu saada, seda ikka veel ei kasuta.
Kerimist seostatakse ilmselt kõige enam horisontaalsete karussellidega (vt Chrisi ainult CSS-i lähenemisviis) ja teatud veebilehed, mis on jagatud täisekraanil kuvatavateks slaidideks. Aga miks seal peatuda? Usun, et klõpsamine võib parandada kerimise kogemust igal veebilehel, mis paigutab üksused ruudustiku või voogu.
Näiteks kuvatakse enamikul ostuveebisaitidel tooteid ruudustikus. Ideaalis sooviks kasutaja minimaalse pingutusega ruudustiku ridade vahel hüpata. Kasutaja saab vajutada Ruum lehe kerimiseks ligikaudu ühe ekraani võrra (vaateava kõrgus), kuid olenevalt ruudustiku ridade kõrgusest läheb kerimisasend lõpuks ruudustikuga "sünkroonist välja" ja kasutaja peab seda käsitsi uuesti reguleerima.
Kui lisame sellele lehele kerimise, saab kasutaja järjekindlalt järgmisele reale kerida nupuga Ruum klahvi (vajutades nihe + Ruum kerib eelmisele reale). See on üsna vaevatu.
Arvan, et kerimise klõpsamine oleks sellele veebisaidile teretulnud. Ja selle rakendamine pole isegi nii keeruline. CSS-kood, mida selle näite jaoks kasutasin, on suhteliselt lihtne:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}Te ei pea ootama, kui regulaarselt külastatav veebisait pole veel kerimise klõpsamist lisanud ja arvate, et see parandaks teie kerimiskogemust. Saate ise lisada kerimise – kasutajastiilide abil.
Kasutajastiilide lisamine veebisaitidele
Ülaltoodud videost näete, et valisin Safari täpsemates eelistustes faili user.css. See fail on kasutaja stiilileht. See sisaldab minu kirjutatud CSS-i stiile, mis on salvestatud kohalikku .css faili ja lisati Safarisse. Neid "kasutaja stiile" rakendatakse seejärel igale veebilehele, mille Safaris avan.
Chrome ja Firefox ei luba kasutajatel valida kasutaja stiililehte. Firefox toetas sarnast funktsiooni nimega userContent.css varem, kuid see funktsioon oli aegunud ja vaikimisi keelatud aastal 2019. Soovitan Pliiatsi brauseri laiendus nende kahe brauseri (ja teiste Chromiumipõhiste brauserite) jaoks.
Styluse üks oluline eelis on see, et see võimaldab teil kirjutada konkreetsete veebisaitide ja URL-ide jaoks kasutaja stiile. Safari kasutaja stiilileht kehtib kõikidele veebisaitidele, kuid seda saab ümber teha, nt kasutades uut :has() pseudoklassi juurde luua selektoreid, mis vastavad ainult konkreetsetele veebisaitidele.
CSS-i kaskaadmoodul defineerib a Kasutaja päritolu stiilide jaoks, mida kasutaja lisab. Safari kasutaja stiilileht kuulub sellesse päritolu, kuid laiendus Stylus sisestab kasutajastiilid Autori päritolu, kus veebisaidi stiililehed asuvad. Täpsemalt, Stylus lisab kasutaja stiilid otse lehele a <style> element lõpus <html> mis teeb sellest lõplik stiilileht lehel. Tehniliselt tähendab see, et Styluse kaudu lisatud stiilid klassifitseeritakse autoristiilidena, kuna need ei ole kasutaja päritolus, kuid ma nimetan neid jätkuvalt kasutajastiilideks, kuna kasutaja lisab need.
Siiski tasub seda eristamist meeles pidada, kuna see mõjutab kaskaadi. Kui valija spetsiifilisus on võrdne, on tegelik kasutaja stiil nõrgem kui lehe enda stiil. See muudab kasutaja stiilid suurepäraseks sobib kasutaja vaikeseadetele. Samadel tingimustel on Styluse kaudu lisatud stiil tugevam kui lehe stiil, nii et Stylust ei saa kasutaja vaikeseadete määratlemiseks niisama lihtsalt kasutada.
Kui lisame !important segule on nii tegelikud kasutajastiilid kui ka Styluse kaudu lisatud stiilid tugevamad kui lehe stiilid. Seega, kui soovite oma kasutajastiile veebisaidile peale suruda, pole vahet, kas kasutate Safari stiililehte või laiendust Stylus. Sinu !important stiilid võidavad mõlemal juhul.
Järgmises jaotises kasutan komplekti !important kasutajastiile Twitteri veebisaidi ajaskaala lehel kerimise jõustamiseks. Minu eesmärk on kiirendada oma Twitteri ajaskaala lugemist, vältides ebamugavaid kerimispositsioone, kus ülemine säuts on ekraanil vaid osaliselt.
Kerige Twitteri ajaskaala
Pärast mõningast katsetamist olen otsustanud järgmise CSS-koodiga. Need stiilid töötavad Firefoxis hästi, kuid Chrome'is ja Safaris on probleeme esinenud. Kirjeldan neid probleeme üksikasjalikumalt hiljem artiklis, kuid praegu keskendume Firefoxi käitumisele.
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;
}On vaja lisada !important igale deklaratsioonile, sest kõik kasutajastiilid peavad võitma veebilehe enda stiilid, et meie kohandatud kerimise rakendamine õigesti töötaks. Soovin seda korduva kirjutamise asemel !important, võiksin lihtsalt panna oma kasutajastiilid "olulisse kihti", kuid sellist CSS-i funktsiooni pole olemas (veel).
Vaadake allolevat videot, et näha minu kerimissnapi kasutajastiile toimimas. Pange tähele, kuidas iga kord nuppu vajutab Ruum klahv kerib järgmise säutsude komplekti vaatesse ja iga komplekti esimene säuts joondatakse vaateava ülemise servaga. See võimaldab mul oma ajaskaala kiiremini lugeda. Kui mul on vaja minna tagasi eelmise säutsukomplekti juurde, võin vajutada nihe + Ruum.
Mulle meeldib seda tüüpi kerimise juures see, et see võimaldab ennustada, kui kaugele leht kerib, kui vajutan Ruum. Iga kerimiskaugus võrdub täielikult ekraanil olevate nähtavate säutsude kombineeritud kõrgustega. Teisisõnu liigub ekraani allservas olev osaliselt nähtav säuts ekraani ülaossa, mis on täpselt see, mida ma tahan.
Space kerib Dave'i säutsu ekraani ülaossa.Minu kerimissnapi kasutajastiilide proovimiseks oma Twitteri ajaskaalal toimige järgmiselt.
- Paigaldage Pliiatsi pikendus Firefoxi lisandmoodulite või Chrome'i veebipoega.
- Liikuge oma Twitteri ajaskaalale aadressil https://twitter.com/home.
- Klõpsake brauseri tööriistaribal ikooni Pliiats ja klõpsake hüpikaknas "seda URL-i".
- Stylus avab uuel brauseri vahekaardil koodiredaktori. Kopeerige ja kleepige minu kerimisklõpsu kasutajastiilid redaktorisse ja vajutage vasakpoolsel külgribal nuppu Salvesta. Stiilid rakendatakse teie Twitteri ajaskaalale kohe (lehte pole vaja uuesti laadida).
- Saate stiile igal ajal värskendada. Redaktori uuesti avamiseks klõpsake pliiatsiikoonil ja pliiatsiikoonil.
Suutmatus klõpsamist alistada
Minu Twitteri ajaskaala kerimise rakendamisel on üks suur viga. Kui säuts on vaateavast kõrgem, on võimatu lehte kerida, et näha selle säutsu alumist osa (nt kui soovite säutsu meeldivaks märkida või uuesti säutsuda), kuna brauser klõpsab lehte jõuliselt, et näidata säutsu ülaosa. säuts (või järgmise säutsu ülaosa).
Selle probleemi tõsidus sõltub kasutaja kuvast. Kui vaatate Twitteri ajaskaala suurel töölauamonitoril väikese lehe suumiteguriga, ei pruugi te kohata ühtegi vaateavast kõrgemat säutsu.
Olen küsinud CSS-i töörühmalt, kas oleks võimalik lisada mehhanismi, mis võimaldaks kasutajal seda teha alistab brauseri kohustusliku kerimise. Peaksin ilmselt mainima, et selle probleemi saaks vähemalt teoreetiliselt lahendada ümberlülitamisega mandatory et proximity napsutades. olen testinud proximity Chrome'is ja Firefoxis ning ma leidsin, et see on vastuoluline ja segane. Brauser katkes sageli siis, kui ma seda ei oodanud, ja vastupidi. Võib-olla segab Twitteri kood proximity Algoritmi järgi on brauserid endiselt pisut lollakad või võib-olla ma lihtsalt "kerin seda valesti", kui see on isegi võimalik. ma ei tea.
Aga peamine põhjus, miks ma kaasa läksin mandatory snapping on see, et tahtsin vältida olukordi, kus kõige ülemine säuts on pärast kerimist ekraanil vaid osaliselt. Ülaltoodud videos näidatud säutsukomplektide vahel kiire kerimine on võimalik ainult siis, kui mandatory napsutades.
Kui sina, nagu mina, eelistad mandatory Ma võin soovitada "kõrge säutsu" probleemi lahendamiseks kahte järgmist lahendust:
- Saate säutsu selle enda lehel avada ja seejärel ajaskaalale naasta.
- Kui soovite klõpsata ainult nuppu Meeldib või Retweet, saate seda teha nihe-klõpsake säutsu selle valimiseks ja seejärel vajutage nuppu L et see meeldiks või T järgnevad sisene et seda uuesti sättida.
Probleemid Chrome'is ja Safaris
Minu kerimise kasutajastiilid tekitavad Chrome'is, Safaris ja Firefoxis märgatavalt erinevat kerimise käitumist. Need erinevused on osaliselt tingitud sellest, et klõpsamismehhanism on täpselt rakendatud jääb brauseri hooleks:
CSS Scroll Snap Module ei määra ega nõua tahtlikult täpseid animatsioone või füüsikat, mida kasutatakse klõpsamispositsioonide jõustamiseks; see jääb kasutajaagendi otsustada.
Safari praegusel versioonil on viga, mis takistab kerimise klõpsamist Twitteri ajaskaalal õigesti töötamast. mul on teatas sellest veast.
Chrome'is on mul tekkinud järgmised probleemid.
- Kerimistoimingud animeerivad ebajärjekindlalt. Mõnikord on animatsioon aeglane, mõnikord kohe ja mõnikord algab see aeglaselt, kuid katkestatakse. Mulle tundus see ärritav.
- Kerimistoimingud animeerivad üldiselt liiga aeglaselt. Tegin testi Chrome'is ja Firefoxis (20 Ruum vajutab) ja mul kulus oma Twitteri ajajoonel sama vahemaa läbimiseks Chrome'is 70% rohkem aega kui Firefoxis (18.5 sekundit Chrome'is vs. 11 sekundit Firefoxis).
- Kui ma oma sülearvuti puuteplaati kasutades kerin, vilgub leht palju. Kui proovin kiiresti kerida, hoides all nuppu Ruum klahvi, leht kerib väga aeglaselt ja võngub. Ma kahtlustan, et mõlemad probleemid on põhjustatud samast algoritmist. Näib, et nendel juhtudel klõpsab Chrome uuesti väga kiiresti. mul on teatas sellest veast.
Need brauseri vead ja brauseritevahelised erinevused võivad olla probleemiks veebisaitidele, mis kaaluvad kerimise klõpsamist. Näiteks võib veebiarendaja end tagasi hoida, sest talle ei meeldi, kuidas kerimise klõpsamine ühes konkreetses brauseris käitub. Brauserid saavad seda probleemi leevendada, muutudes paremini koostalitlusvõimeliseks. Tegelikult on Scroll Snap üks ristbrauseri fookusvaldkondi Interop 2022 pingutus.
Teine võimalus olukorda parandada on uute CSS-i atribuutide juurutamine, mis muudaksid kerimise konfigureeritavamaks. See võib hõlmata klõpsamise animatsiooni kestust, klõpsamise lähedusläve pikkust ja mehhanismi kohustusliku klõpsamise tühistamiseks.
Napsata või mitte napsata?
Olen paar nädalat Twitteri ajaskaalal kasutanud oma kerimisklõpsu kasutajastiile ja ma ei taha tagasi minna. Võimalus oma voogu kiiresti lehitseda, kasutades ainult Ruum võti on lihtsalt teisel tasemel.
Arvan siiski, et see on täiustatud funktsioon, mis ilmselt ei sobi kõigile. Sellel on põhjus, miks ma olen selle lubanud ainult ajajoonel (/home tee) ja mitte kusagil mujal Twitteri veebisaidil. Snapping on oluline muutus lehe kerimises ja sellega harjumine võtab veidi aega. See võib konkreetsel kasutusjuhul suurepäraselt töötada, kuid võib ka segada ja kasutajat häirida.
Voogudega veebisaidid peaksid seetõttu kaaluma kerimise pakkumist ainult valikulise funktsioonina, pärast hoolikat kaalumist ja rohket testimist erinevates brauserites ja erinevate sisestusmeetoditega (hiir, klaviatuur, puuteplaat, puuteekraan jne).
Enne kui lähed…
Lõpuks soovitan tungivalt installida ja proovida Pliiatsi brauseri laiendus. Veebiarendajatel (või kõigil, kes tunnevad CSS-i) on õigus oma brauseris mis tahes veebisaiti kujundada. Saate oma lemmikveebisaitidele rakendada väiksemaid täiustusi ja parandusi. Kasutan seda enamasti minu arvates häirivate leheelementide (nt kleepuvad päised, video hüpikaknad ja häälte loendamine) peitmiseks.
Kuid mis veelgi olulisem, Stylus võimaldab teil kiiresti testida uusi CSS-i funktsioone mis tahes veebisaidil ja vajadusel teatada brauseri vigadest. Seda tehes saate aidata veebiplatvormi pisut paremaks muuta.
