CSS-scrollmodule stelt websites in staat om de webpagina of een andere schuifcontainer naar een specifieke schuifpositie te klikken wanneer de gebruiker een schuifbewerking uitvoert. Deze functie is ondersteund in alle moderne browsers al meer dan twee jaar, maar veel websites die er baat bij kunnen hebben, gebruiken het nog steeds niet.
Scroll snapping wordt waarschijnlijk het meest geassocieerd met horizontale carrousels (zie Chris' CSS-only benadering) en bepaalde webpagina's verdeeld in dia's op volledig scherm. Maar waarom daar stoppen? Ik geloof dat snappen de scrollervaring kan verbeteren op elke webpagina die items in een raster of feed opmaakt.
De meeste winkelwebsites tonen bijvoorbeeld producten in een raster. Idealiter zou de gebruiker met minimale inspanning tussen de rasterrijen willen springen. De gebruiker kan op drukken Tussenruimte om de pagina ongeveer één scherm te scrollen (viewport-hoogte), maar afhankelijk van de hoogte van de rasterrijen, zal de schuifpositie uiteindelijk "niet synchroon" lopen met het raster en moet de gebruiker deze handmatig opnieuw aanpassen.
Als we scroll snapping toevoegen aan deze pagina, kan de gebruiker consequent naar de volgende rij scrollen met de Tussenruimte toets (druk op Shift + Tussenruimte zal naar de vorige rij scrollen). Het is vrij moeiteloos.
Ik denk dat scroll snapping een welkome aanvulling zou zijn op deze website. En het is niet eens zo ingewikkeld om te implementeren. De CSS-code die ik voor dit voorbeeld heb gebruikt, is relatief eenvoudig:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}U hoeft niet te wachten als een website die u regelmatig bezoekt nog geen scrollsnapping heeft toegevoegd en u denkt dat dit uw scrollervaring zou verbeteren. U kunt zelf scrollen toevoegen - met gebruikersstijlen.
Gebruikersstijlen toevoegen aan websites
In de video hierboven kun je zien dat ik een user.css-bestand heb geselecteerd in de geavanceerde voorkeuren van Safari. Dit bestand is een gebruikersstijlblad. Het bevat CSS-stijlen die ik heb geschreven, opgeslagen in een lokale .css bestand en toegevoegd aan Safari. Deze "gebruikersstijlen" worden vervolgens toegepast op elke webpagina die ik in Safari open.
Chrome en Firefox staan gebruikers niet toe om een gebruikersstijlblad te selecteren. Firefox ondersteunde een vergelijkbare functie genaamd userContent.css in het verleden, maar die functie was verouderd en standaard uitgeschakeld in 2019. Ik raad de . aan Stylus-browserextensie voor deze twee browsers (en andere op Chromium gebaseerde browsers).
Een belangrijk voordeel van Stylus is dat u gebruikersstijlen voor specifieke websites en URL's kunt schrijven. Het gebruikersstijlblad van Safari is van toepassing op alle websites, maar dit kan worden omzeild, bijvoorbeeld door de nieuwe :has() pseudo-klasse to maak selectors die alleen overeenkomen met specifieke websites.
De CSS Cascading-module definieert a Oorsprong gebruiker voor stijlen die de gebruiker toevoegt. Het gebruikersstijlblad van Safari behoort tot deze oorsprong, maar de Stylus-extensie voegt gebruikersstijlen toe aan de oorsprong van de auteur, waar de stijlbladen van de website leven. In het bijzonder voegt Stylus gebruikersstijlen rechtstreeks op de pagina in via a <style> element aan het einde van <html> waardoor het de laatste stijlblad op de pagina. Technisch gezien betekent dit dat stijlen die zijn toegevoegd via Stylus worden geclassificeerd als auteursstijlen omdat ze niet in de User Origin staan, maar ik zal ze gebruikersstijlen blijven noemen omdat de gebruiker ze toevoegt.
Het is echter de moeite waard om dit onderscheid in gedachten te houden, omdat het de cascade beïnvloedt. Wanneer selectorspecificiteit gelijk is, is een echte gebruikersstijl zwakker dan de eigen stijl van de pagina. Dit maakt gebruikersstijlen een uitstekende geschikt voor gebruikersstandaarden. Onder dezelfde omstandigheden is een stijl die is toegevoegd via Stylus sterker dan de stijl van de pagina, dus Stylus kan niet zo gemakkelijk worden gebruikt om standaardinstellingen voor gebruikers te definiëren.
Als we toevoegen !important aan de mix zijn zowel echte gebruikersstijlen als stijlen die via Stylus zijn toegevoegd, sterker dan de stijlen van de pagina. Dus wanneer u uw gebruikersstijlen aan een website wilt opleggen, maakt het niet uit of u Safari's “Style sheet”-optie of de Stylus-extensie gebruikt. Uw !important stijlen zullen hoe dan ook winnen.
In de volgende sectie zal ik een set van gebruiken !important gebruikersstijlen om scrollen af te dwingen op de tijdlijnpagina van de Twitter-website. Mijn doel is om het proces van het lezen van mijn Twitter-tijdlijn te versnellen door ongemakkelijke scrollposities te vermijden waar de bovenste tweet slechts gedeeltelijk op het scherm staat.
Scroll snap voor de tijdlijn van Twitter
Na wat experimenteren ben ik uitgekomen op de volgende CSS-code. Deze stijlen werken goed in Firefox, maar ik heb enkele problemen ondervonden in Chrome en Safari. Ik zal deze problemen later in het artikel in meer detail beschrijven, maar laten we ons nu concentreren op het gedrag in 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;
}Het is noodzakelijk om toe te voegen !important aan elke declaratie, omdat alle gebruikersstijlen de eigen stijlen van de webpagina moeten overwinnen om onze aangepaste implementatie van scrollsnapping correct te laten werken. Ik wens dat in plaats van herhaaldelijk te schrijven !important, ik zou mijn gebruikersstijlen gewoon in een "belangrijke laag" kunnen plaatsen, maar zo'n CSS-functie bestaat niet (nog).
Bekijk de onderstaande video om mijn scroll-snap-gebruikersstijlen in actie te zien. Merk op hoe elke druk op de Tussenruimte -toets schuift de volgende set tweets in beeld en de eerste tweet van elke set wordt uitgelijnd met de bovenrand van de viewport. Hierdoor kan ik mijn tijdlijn sneller lezen. Als ik terug moet naar de vorige reeks tweets, kan ik op drukken Shift + Tussenruimte.
Wat ik leuk vind aan dit soort scrollen, is dat ik kan voorspellen hoe ver de pagina zal scrollen wanneer ik op druk Tussenruimte. Elke scrollafstand is gelijk aan de gecombineerde hoogte van de zichtbare tweets die volledig op het scherm staan. Met andere woorden, de gedeeltelijk zichtbare tweet onderaan het scherm zal naar de bovenkant van het scherm gaan, en dat is precies wat ik wil.
Space zal Dave's tweet naar de bovenkant van het scherm scrollen.Volg deze stappen om mijn scroll-snap-gebruikersstijlen op uw eigen Twitter-tijdlijn uit te proberen:
- Installeer de Stylus-extensie met Firefox-add-ons of de Chrome Web Store.
- Navigeer naar je Twitter-tijdlijn op https://twitter.com/home.
- Klik op het Stylus-pictogram in de werkbalk van de browser en klik op "deze URL" in de pop-up.
- Stylus opent een code-editor in een nieuw browsertabblad. Kopieer en plak mijn scroll-snap-gebruikersstijlen in de editor en druk op de knop Opslaan in de zijbalk aan de linkerkant. De stijlen worden onmiddellijk toegepast op uw Twitter-tijdlijn (u hoeft de pagina niet opnieuw te laden).
- U kunt de stijlen op elk moment bijwerken. Klik op het styluspictogram en het potloodpictogram om de editor opnieuw te openen.
Onvermogen om snappen op te heffen
Mijn implementatie van scroll snapping voor de tijdlijn van Twitter heeft één grote fout. Als een tweet groter is dan de viewport, is het onmogelijk om door de pagina te scrollen om het onderste deel van die tweet te onthullen (bijvoorbeeld als je die tweet wilt liken of retweeten), omdat de browser de pagina met geweld vastklikt om de bovenkant van de tweet weer te geven. tweet (of de bovenkant van de volgende tweet).
De ernst van dit probleem hangt af van het scherm van de gebruiker. Als je de tijdlijn van Twitter op een grote desktopmonitor bekijkt met een kleine zoomfactor, zul je mogelijk geen tweets tegenkomen die groter zijn dan de viewport.
Ik heb de CSS-werkgroep gevraagd of het mogelijk zou zijn om een mechanisme toe te voegen waarmee de gebruiker: het verplichte scrollen van de browser overschrijven. Ik moet waarschijnlijk vermelden dat dit probleem, althans in theorie, kan worden opgelost door over te schakelen van mandatory naar proximity snappen. ik heb getest proximity snappen in Chrome en Firefox, en ik vond het inconsistent en verwarrend. De browser crashte vaak wanneer ik het niet verwachtte, en vice versa. Misschien verstoort de code van Twitter de proximity algoritme, zijn de browsers nog steeds een beetje buggy, of misschien "scroll ik het gewoon verkeerd", als dat al mogelijk is. Ik weet het niet.
Maar de belangrijkste reden waarom ik meeging? mandatory snappen is dat ik situaties wilde vermijden waarin de bovenste tweet slechts gedeeltelijk op het scherm staat na een scroll. Het type snel scrollen tussen sets tweets dat ik in de video hierboven heb laten zien, is alleen mogelijk met mandatory snappen.
Als je, net als ik, de voorkeur geeft aan mandatory snappen, kan ik de volgende twee oplossingen voorstellen voor het probleem met de "hoge tweet":
- Je kunt de tweet op zijn eigen pagina openen en daarna terugkeren naar de tijdlijn.
- Als u alleen op de Like- of Retweet-knoppen wilt klikken, kunt u: Shift-klik op de tweet om deze te selecteren en druk vervolgens op L leuk vinden, of T gevolgd door Enter om het te retweeten.
Problemen in Chrome en Safari
Mijn scroll-snap-gebruikersstijlen produceren merkbaar ander scroll-snapgedrag in Chrome, Safari en Firefox. Die verschillen zijn gedeeltelijk omdat de exacte implementatie van het snapmechanisme is overgelaten aan de browser:
De CSS Scroll Snap Module specificeert of verplicht met opzet geen precieze animaties of physics die worden gebruikt om snapposities af te dwingen; dit wordt overgelaten aan de user-agent.
De huidige versie van Safari heeft een bug waardoor scrollen niet correct werkt op de Twitter-tijdlijn. ik heb deze bug gemeld.
In Chrome ben ik de volgende problemen tegengekomen:
- De scroll-bewerkingen animeren inconsistent. Soms is de animatie traag, soms is het direct, en soms begint het langzaam, maar wordt dan afgebroken. Ik vond dit irritant.
- De scroll-operaties animeren over het algemeen te langzaam. Ik heb een test uitgevoerd in Chrome en Firefox (20 Tussenruimte drukken), en het kostte me 70% meer tijd om dezelfde afstand af te leggen op mijn Twitter-tijdlijn in Chrome dan in Firefox (18.5 seconden in Chrome versus 11 seconden in Firefox).
- Als ik scrol met het trackpad van mijn laptop, flikkert de pagina veel. Wanneer ik probeer snel te scrollen door de . ingedrukt te houden Tussenruimte toets, scrollt de pagina erg langzaam en oscilleert. Ik vermoed dat beide problemen worden veroorzaakt door hetzelfde algoritme. Het lijkt erop dat Chrome in deze gevallen in een zeer hoog tempo opnieuw klikt. ik heb deze bug gemeld.
Deze browserbugs en verschillen tussen browsers kunnen een probleem zijn voor websites die scroll-snapping overwegen te implementeren. Een webontwikkelaar kan bijvoorbeeld terughoudend zijn omdat ze het niet leuk vinden hoe scroll snapping zich in een bepaalde browser gedraagt. Browsers kunnen dit probleem verminderen door meer interoperabel te worden. Scroll Snap is zelfs een van de aandachtsgebieden van de cross-browser Interop 2022 inspanning.
Een andere manier waarop de situatie kan worden verbeterd, is door nieuwe CSS-eigenschappen te introduceren die het scrollen beter configureerbaar maken. Dit kan de duur van de snap-animatie omvatten, de lengte van de nabijheidsdrempel voor snappen en een mechanisme om verplicht snappen op te heffen.
Snappen of niet snappen?
Ik gebruik mijn scroll-snap-gebruikersstijlen al een paar weken op de tijdlijn van Twitter en ik wil niet meer terug. De mogelijkheid om snel door mijn feed te bladeren met alleen de Tussenruimte sleutel is gewoon op een ander niveau.
Ik beschouw dit echter als een geavanceerde functie die waarschijnlijk niet voor iedereen geschikt is. Er is een reden waarom ik het alleen op de tijdlijn heb ingeschakeld (/home pad) en nergens anders op de website van Twitter. Snappen is een belangrijke verandering in de manier waarop de pagina scrolt, en het kost wat tijd om eraan te wennen. Het kan geweldig werken voor een specifieke use-case, maar het kan ook in de weg zitten en de gebruiker frustreren.
Websites met feeds zouden daarom moeten overwegen om scroll snapping alleen als optionele functie aan te bieden, na zorgvuldige afweging en veel testen in verschillende browsers en met verschillende invoermethoden (muis, toetsenbord, trackpad, aanraakscherm, enz.).
Voordat je gaat…
Ten slotte raad ik u ten zeerste aan om de te installeren en uit te proberen Stylus-browserextensie. Webontwikkelaars (of iedereen die CSS kent) hebben de macht om elke website in hun browser te stylen. U kunt kleine verbeteringen en fixes toepassen op uw favoriete websites. Ik gebruik het meestal om pagina-elementen te verbergen die ik vervelend vind, zoals plakkerige headers, video-pop-ups en stemmentellingen.
Maar wat nog belangrijker is, met Stylus kunt u snel nieuwe CSS-functies op elke website testen en indien nodig browserbugs melden. Door dit te doen, kunt u het webplatform een beetje beter maken.
