CSS Kaydırma Yapışması kullanıcı bir kaydırma işlemi gerçekleştirdiğinde web sitelerinin web sayfasını veya herhangi bir başka kaydırma kabını belirli bir kaydırma konumuna tutturmasına olanak tanır. Bu özellik olmuştur tüm modern tarayıcılarda desteklenir iki yılı aşkın bir süredir, ancak bundan yararlanabilecek birçok web sitesi hala onu kullanmıyor.
Kaydırma yakalama muhtemelen en çok yatay karusellerle ilişkilendirilir (bkz. Chris'in yalnızca CSS yaklaşımı) ve belirli web sayfaları tam ekran slaytlara bölünmüştür. Ama neden orada duralım? Yaslamanın, öğeleri bir ızgara veya besleme halinde düzenleyen herhangi bir web sayfasındaki kaydırma deneyimini geliştirebileceğine inanıyorum.
Örneğin çoğu alışveriş sitesi ürünleri bir tablo halinde gösterir. İdeal durumda, kullanıcı ızgara sıraları arasında minimum çabayla atlamak ister. Kullanıcı tuşuna basabilir uzay sayfayı kabaca bir ekran kaydırmak (görüntü alanı yüksekliği), ancak ızgara satırlarının yüksekliğine bağlı olarak, kaydırma konumu sonunda ızgarayla "senkronize" olacak ve kullanıcının bunu manuel olarak yeniden ayarlaması gerekecektir.
Bu sayfaya kaydırma yakalama özelliği eklersek, kullanıcı sürekli olarak bir sonraki satıra kaydırma yapabilir. uzay tuşu (basmak vardiya + uzay önceki satıra kaydırılacaktır). Oldukça zahmetsiz.
Kaydırma yakalamanın bu web sitesine hoş bir katkı olacağını düşünüyorum. Ve uygulanması o kadar da karmaşık değil. Bu örnek için kullandığım CSS kodu nispeten basittir:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}Düzenli olarak ziyaret ettiğiniz bir web sitesinde henüz kaydırma yakalama özelliği bulunmuyorsa ve bunun kaydırma deneyiminizi geliştireceğini düşünüyorsanız beklemenize gerek yoktur. Kullanıcı stilleriyle kaydırma yakalamayı kendiniz ekleyebilirsiniz.
Web sitelerine kullanıcı stilleri ekleme
Yukarıdaki videoda Safari'nin gelişmiş tercihlerinde user.css dosyasını seçtiğimi görebilirsiniz. Bu dosya bir kullanıcı stil sayfasıdır. Yazdığım ve yerelde saklanan CSS stillerini içeriyor .css dosya ve Safari'ye eklendi. Bu "kullanıcı stilleri" daha sonra Safari'de açtığım her web sayfasına uygulanıyor.
Chrome ve Firefox, kullanıcıların bir kullanıcı stil sayfası seçmesine izin vermez. Firefox, adı verilen benzer bir özelliği destekledi userContent.css geçmişte, ancak bu özellik kullanımdan kaldırıldı ve varsayılan olarak devre dışı 2019'da. Tavsiye ederim Stylus tarayıcı uzantısı bu iki tarayıcı (ve diğer Chromium tabanlı tarayıcılar) için.
Stylus'un önemli bir avantajı, belirli web siteleri ve URL'ler için kullanıcı stilleri yazmanıza olanak sağlamasıdır. Safari'nin kullanıcı stil sayfası tüm web siteleri için geçerlidir ancak bu durum, örneğin yeni Safari kullanılarak çözülebilir. :has() sözde sınıf yalnızca belirli web siteleriyle eşleşen seçiciler oluşturun.
CSS Basamaklı modülü bir tanımlar Kullanıcı Kaynağı kullanıcının eklediği stiller için. Safari'nin kullanıcı stil sayfası bu kaynağa aittir, ancak Stylus uzantısı, kullanıcı stillerini web sitesinin stil sayfalarının bulunduğu Author Origin'e enjekte eder. Özellikle Stylus, kullanıcı stillerini bir araç aracılığıyla doğrudan sayfaya ekler. <style> sonundaki eleman <html> bu onu yapar sayfadaki son stil sayfası. Teknik olarak bu, Stylus aracılığıyla eklenen stillerin Kullanıcı Kaynağında olmadıkları için yazar stilleri olarak sınıflandırıldığı anlamına gelir, ancak kullanıcı bunları eklediğinden dolayı bunlara kullanıcı stilleri adını vermeye devam edeceğim.
Ancak kademeyi etkilediği için bu ayrımı akılda tutmakta fayda var. Seçici özgüllüğü eşit olduğunda gerçek kullanıcı stili sayfanın kendi stilinden daha zayıftır. Bu, kullanıcı stillerini mükemmel bir hale getirir kullanıcı varsayılanlarına uygun. Aynı koşullar altında Stylus aracılığıyla eklenen bir stil güçlü sayfanın stilinden farklıdır, dolayısıyla Ekran Kalemi kullanıcı varsayılanlarını tanımlamak için o kadar kolay kullanılamaz.
eklersek !important Karışıma ek olarak, hem gerçek kullanıcı stilleri hem de Stylus aracılığıyla eklenen stiller sayfanın stillerinden daha güçlüdür. Dolayısıyla, kullanıcı stillerinizi bir web sitesine empoze etmek istediğinizde, Safari'nin "Stil sayfası" seçeneğini veya Stylus uzantısını kullanmanız fark etmez. Senin !important stiller her iki durumda da kazanacak.
Bir sonraki bölümde bir dizi kullanacağım !important Twitter web sitesinin zaman çizelgesi sayfasında kaydırma yakalamayı zorunlu kılan kullanıcı stilleri. Amacım, en üstteki tweet'in yalnızca kısmen ekranda olduğu garip kaydırma konumlarından kaçınarak Twitter zaman çizelgesini okuma sürecini hızlandırmaktır.
Twitter'ın zaman çizelgesi için kaydırmalı kaydırma
Biraz denemeden sonra aşağıdaki CSS kodunda karar kıldım. Bu stiller Firefox'ta iyi çalışıyor ancak Chrome ve Safari'de bazı sorunlarla karşılaştım. Bu sorunları makalenin ilerleyen kısımlarında daha ayrıntılı olarak anlatacağım ancak şimdilik Firefox'taki davranışa odaklanalım.
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;
}Eklemek gerekli !important çünkü özel kaydırma yakalama uygulamamızın doğru çalışması için tüm kullanıcı stillerinin web sayfasının kendi stillerini kazanması gerekir. Keşke tekrar tekrar yazmak yerine !important, kullanıcı stillerimi "önemli bir katmana" koyabilirim ancak böyle bir CSS özelliği mevcut değil (hala).
Kaydırmalı snap kullanıcı stillerimi çalışırken görmek için aşağıdaki videoyu izleyin. Her basışta nasıl olduğuna dikkat edin uzay tuşu sonraki tweet grubunu görünüme kaydırır ve her grubun ilk tweet'i görünümün üst kenarına hizalanır. Bu, zaman çizelgesini daha hızlı okumamı sağlıyor. Önceki tweet grubuna geri dönmem gerektiğinde tuşuna basabilirim vardiya + uzay.
Bu tür kaydırma yakalamanın hoşuma giden yanı, tuşuna bastığımda sayfanın ne kadar kaydırılacağını tahmin etmeme olanak sağlamasıdır uzay. Her kaydırma mesafesi, tamamı ekranda görünen tweet'lerin toplam yüksekliğine eşittir. Yani ekranın alt kısmında kısmen görünen tweet ekranın üst kısmına taşınacak ki bu da tam olarak istediğim şey.
Space Dave'in tweet'ini ekranın en üstüne kaydıracaktır.Kaydırmalı snap kullanıcı stillerimi kendi Twitter zaman çizelgenizde denemek için şu adımları izleyin:
- kurmak Ekran kalemi uzantısı Firefox Eklentileri veya Chrome Web Mağazası ile.
- Twitter zaman çizelgenize şu adresten gidin: https://twitter.com/home.
- Tarayıcının araç çubuğundaki Ekran Kalemi simgesini tıklayın ve açılır pencerede "bu URL"yi tıklayın.
- Stylus, yeni bir tarayıcı sekmesinde bir kod düzenleyici açacaktır. Kaydırmalı snap kullanıcı stillerimi kopyalayıp düzenleyiciye yapıştırın ve soldaki kenar çubuğundaki Kaydet düğmesine basın. Stiller Twitter zaman çizelgenize anında uygulanacaktır (sayfayı yeniden yüklemenize gerek yoktur).
- Stilleri istediğiniz zaman güncelleyebilirsiniz. Düzenleyiciyi tekrar açmak için Ekran Kalemi simgesini ve Kalem simgesini tıklayın.
Yakalamayı geçersiz kılamama
Twitter'ın zaman çizelgesi için kaydırma yakalama uygulamamın büyük bir kusuru var. Bir tweet görünüm alanından daha uzunsa, o tweetin alt kısmını ortaya çıkarmak için sayfayı kaydırmak imkansızdır (örneğin, o tweeti beğenmek veya retweetlemek istiyorsanız), çünkü tarayıcı, sayfayı üst kısmını göstermek için zorla yakalar. tweet (veya sonraki tweet'in üst kısmı).
Bu sorunun ciddiyeti kullanıcının ekranına bağlıdır. Twitter'ın zaman çizelgesini büyük bir masaüstü monitörde küçük bir sayfa yakınlaştırma faktörüyle görüntülerken, görünüm alanından daha uzun tweet'lerle karşılaşmayabilirsiniz.
Kullanıcının şunları yapmasına olanak tanıyan bir mekanizma eklemenin mümkün olup olmayacağını CSS Çalışma Grubuna sordum. tarayıcının zorunlu kaydırma yakalamasını geçersiz kıl. Muhtemelen bu sorunun, en azından teoride, şuna geçiş yapılarak çözülebileceğini belirtmeliyim: mandatory için proximity yakalama. test ettim proximity Chrome ve Firefox'ta takılmayı tutarsız ve kafa karıştırıcı buldum. Tarayıcı genellikle beklemediğim zamanlarda kapanıyordu ve bunun tersi de geçerliydi. Belki Twitter'ın kodu müdahale ediyordur proximity algoritma, tarayıcılar hala biraz hatalı veya belki de sadece "yanlış kaydırıyorum", eğer bu mümkünse. Bilmiyorum.
Ama birlikte gitmemin asıl nedeni mandatory yakalamanın nedeni, en üstteki tweet'in kaydırma sonrasında yalnızca kısmen ekranda olduğu durumlardan kaçınmak istememdir. Yukarıdaki videoda gösterdiğim tweet grupları arasında hızlı kaydırma türü yalnızca şu şekilde mümkündür: mandatory koparma.
Eğer siz de benim gibi tercih ederseniz mandatory "uzun tweet" sorunu için aşağıdaki iki geçici çözümü önerebilirim:
- Tweeti kendi sayfasında açabilir ve daha sonra zaman çizelgesine dönebilirsiniz.
- Yalnızca Beğen veya Retweet düğmelerini tıklamak istiyorsanız, vardiya-seçmek için tweet'e tıklayın ve ardından tuşuna basın L hoşlanmak ya da T ardından Keşfet retweetlemek için.
Chrome ve Safari'deki sorunlar
Kaydırarak tutturma kullanıcı stillerim, Chrome, Safari ve Firefox'ta gözle görülür derecede farklı kaydırma yakalama davranışları üretiyor. Bu farklılıklar kısmen yakalama mekanizmasının tam olarak uygulanmasından kaynaklanmaktadır. tarayıcıya bırakıldı:
CSS Kaydırmalı Yakalama Modülü, yakalama konumlarını uygulamak için kullanılan herhangi bir kesin animasyonu veya fiziği kasıtlı olarak belirtmez veya zorunlu kılmaz; bu kullanıcı aracısına bırakılmıştır.
Safari'nin mevcut sürümünde kaydırma yakalamanın Twitter zaman çizelgesinde düzgün çalışmasını engelleyen bir hata var. Sahibim bu hatayı bildirdi.
Chrome'da aşağıdaki sorunlarla karşılaştım:
- Kaydırma işlemleri tutarsız bir şekilde canlandırılıyor. Animasyon bazen yavaş, bazen anında oluyor ve bazen de yavaş başlıyor ama sonra kısa kesiliyor. Bunu sinir bozucu buldum.
- Kaydırma işlemleri genel olarak çok yavaş hareket ediyor. Chrome ve Firefox'ta bir test yaptım (20 uzay ve Twitter zaman çizelgemde aynı mesafeyi Chrome'da kat etmem Firefox'a kıyasla %70 daha fazla zaman aldı (Chrome'da 18.5 saniye, Firefox'ta 11 saniye).
- Dizüstü bilgisayarımın izleme dörtgenini kullanarak kaydırma yaptığımda sayfa çok fazla titriyor. tuşunu basılı tutarak hızlı kaydırma yapmaya çalıştığımda uzay tuşuna basıldığında sayfa çok yavaş kayar ve salınır. Her iki sorunun da aynı algoritmadan kaynaklandığından şüpheleniyorum. Bu durumlarda Chrome'un çok yüksek bir oranda yeniden yakalandığı görülüyor. Sahibim bu hatayı bildirdi.
Bu tarayıcı hataları ve tarayıcılar arasındaki farklılıklar, kaydırma yakalamayı uygulamayı düşünen web siteleri için sorun olabilir. Örneğin, bir web geliştiricisi, kaydırma yakalamanın belirli bir tarayıcıdaki davranışından hoşlanmadığı için geri durabilir. Tarayıcılar daha birlikte çalışabilir hale gelerek bu sorunu azaltabilirler. Aslında Scroll Snap, çapraz tarayıcının odaklandığı alanlardan biridir. Interop 2022 çalışması.
Durumu iyileştirmenin bir başka yolu da kaydırma yakalamayı daha yapılandırılabilir hale getirecek yeni CSS özelliklerinin tanıtılmasıdır. Bu, yakalama animasyonunun süresini, yakalama için yakınlık eşiğinin uzunluğunu ve zorunlu yakalamayı geçersiz kılacak bir mekanizmayı içerebilir.
Kopmak mı, kopmamak mı?
Birkaç haftadır Twitter'ın zaman çizelgesinde kaydırmalı snap kullanıcı stillerimi kullanıyorum ve geri dönmek istemiyorum. Yalnızca tek bir tuşla feed'imde hızlı bir şekilde gezinme yeteneği uzay anahtar sadece başka bir seviyede.
Ancak bunun muhtemelen herkese uygun olmayan gelişmiş bir özellik olduğunu düşünüyorum. Bunu yalnızca zaman çizelgesinde etkinleştirmemin bir nedeni var (/home yolu) ve Twitter'ın web sitesinde başka hiçbir yerde yok. Yakalama, sayfanın kaydırılma şeklinde önemli bir değişikliktir ve alışmak biraz zaman alır. Belirli bir kullanım durumu için harika çalışabilir, ancak aynı zamanda kullanıcıyı rahatsız edebilir ve sinirlendirebilir.
Bu nedenle, yayın içeren web siteleri, dikkatli bir inceleme ve farklı tarayıcılarda ve farklı giriş yöntemleriyle (fare, klavye, izleme dörtgeni, dokunmatik ekran vb.) yapılan birçok testten sonra, kaydırma yakalamayı yalnızca isteğe bağlı bir özellik olarak sunmayı düşünmelidir.
Gitmeden önce…
Son olarak, yüklemenizi ve denemenizi şiddetle tavsiye ederim. Stylus tarayıcı uzantısı. Web geliştiricileri (veya CSS'yi bilen herkes), tarayıcılarında herhangi bir web sitesine stil verme gücüne sahiptir. Favori web sitelerinize küçük iyileştirmeler ve düzeltmeler uygulayabilirsiniz. Bunu çoğunlukla yapışkan başlıklar, açılır video pencereleri ve oy sayıları gibi rahatsız edici bulduğum sayfa öğelerini gizlemek için kullanıyorum.
Ancak daha da önemlisi Stylus, herhangi bir web sitesindeki yeni CSS özelliklerini hızlı bir şekilde test etmenize ve gerekirse tarayıcı hatalarını bildirmenize olanak tanır. Bunu yaparak web platformunun biraz daha iyi olmasına yardımcı olabilirsiniz.
