Hikayeler bileşeni oluşturma

Web'de Instagram Hikayeleri'ne benzer bir deneyim oluşturmaya dair temel bir genel bakış.

Adam Argyle

Bu yayında, web için duyarlı, klavye ile gezinmeyi destekleyen ve tarayıcılar arasında çalışan bir Hikayeler bileşeni oluşturma konusundaki düşüncelerimi paylaşmak istiyorum.

Demo

Bu hikayeler bileşenini kendiniz oluşturarak uygulamalı bir gösterim tercih ediyorsanız hikayeler bileşeni codelab'e göz atın.

Video izlemeyi tercih ediyorsanız bu yayının YouTube versiyonunu izleyebilirsiniz:

Genel Bakış

Hikayeler kullanıcı deneyiminin en popüler iki örneği Snapchat Hikayeleri ve Instagram Hikayeleri'dir (Fleets'ten bahsetmiyoruz bile). Genel kullanıcı deneyimi açısından Hikayeler, genellikle birden fazla abonelik arasında gezinmek için yalnızca mobil cihazlarda kullanılabilen, dokunma odaklı bir kalıptır. Örneğin, Instagram'da kullanıcılar bir arkadaşının hikayesini açar ve içindeki resimlere göz atar. Genellikle aynı anda bu kadar arkadaşla oynarlar. Kullanıcı, cihazın sağ tarafına dokunarak arkadaşının bir sonraki hikayesine geçer. Kullanıcı sağa kaydırarak farklı bir arkadaşına geçebilir. Hikaye bileşeni, dönen öğeye oldukça benzer ancak tek boyutlu bir dizi yerine çok boyutlu bir dizide gezinmeye olanak tanır. Her bandın içinde başka bir bant varmış gibi. 🤯

Kartlar kullanılarak görselleştirilmiş çok boyutlu dizi. Soldan sağa doğru, mor kenarlıklı kartlardan oluşan bir yığın var. Her kartın içinde camgöbeği kenarlıklı birden fazla kart bulunuyor. Liste içinde liste.
1. arkadaş bandı
2. "yığın" hikaye bandı
👍 Liste içinde liste (çok boyutlu dizi)

İş için doğru araçları seçme

Sonuç olarak, birkaç kritik web platformu özelliği sayesinde bu bileşeni oluşturmanın oldukça kolay olduğunu gördüm. Şimdi bunlara değinelim.

CSS Grid

Düzenimiz, CSS Grid için zor bir iş değildi çünkü içerikleri yönetmek için bazı güçlü yöntemlerle donatılmıştır.

Friends düzeni

Birincil .stories bileşen sarmalayıcımız, mobil öncelikli yatay kaydırma görünümüdür:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
Izgara tarafından oluşturulan sütunları vurgulamak için Chrome Geliştirici Araçları'nın Cihaz Modu'nu kullanma

grid düzenini ayrıntılı şekilde inceleyelim:

  • Mobil cihazlarda görüntü alanını açıkça 100vh ve 100vw ile doldurur, masaüstünde ise boyutu kısıtlarız.
  • /, satır ve sütun şablonlarımızı ayırır
  • auto-flow, grid-auto-flow: column olarak çevrilir
  • Otomatik akış şablonu 100% şeklindedir. Bu durumda, kaydırma penceresinin genişliği neyse o değer kullanılır.

Cep telefonunda bunu, satır boyutunun görüntü alanı yüksekliği ve her sütunun görüntü alanı genişliği olması gibi düşünebilirsiniz. Snapchat Hikayeleri ve Instagram Hikayeleri örneğinden devam edersek her sütun bir arkadaşın hikayesi olur. Arkadaşların hikayelerinin, görüntü alanının dışında devam etmesini istiyoruz. Böylece kaydırabileceğimiz bir yer olacak. Grid, her arkadaş hikayesi için HTML'nizi düzenlemek üzere ihtiyaç duyduğu kadar sütun oluşturarak bizim için dinamik ve duyarlı bir kaydırma kapsayıcısı oluşturur. Izgara, tüm efekti merkezileştirmemizi sağladı.

Birleştirme

Her arkadaşın hikayelerinin sayfalara ayrılmaya hazır durumda olması gerekir. Animasyon ve diğer eğlenceli desenlere hazırlık olarak bir yığın seçtim. Yığın derken, sandviçe yandan değil de üstten baktığınızı kastediyorum.

CSS grid ile satır ve sütunların bir takma adı ([story]) paylaştığı tek hücreli bir grid (yani kare) tanımlayabiliriz. Ardından her alt öğe, takma ada sahip bu tek hücreli alana atanır:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

Bu sayede HTML'miz, yığınlama sırasını kontrol eder ve tüm öğeleri akışta tutar. absolute konumlandırma veya z-index ile ilgili bir şey yapmamız gerekmediğini ve height: 100% veya width: 100% ile kutu düzeltme yapmamız gerekmediğini fark edin. Üst ızgara, hikaye resmi görüntü alanının boyutunu zaten tanımlamıştı. Bu nedenle, bu hikaye bileşenlerinin hiçbirine bu alanı doldurması söylenmedi.

CSS Kaydırarak Tutturma Noktaları

CSS kaydırarak tutturma noktaları spesifikasyonu, kaydırma sırasında öğeleri görüntü alanına kilitlemeyi kolaylaştırır. Bu CSS özellikleri mevcut olmadan önce JavaScript kullanmanız gerekiyordu ve bu, en hafif tabirle zordu. Sarah Drasner'ın Introducing CSS Scroll Snap Points (CSS Kaydırarak Tutturma Noktalarıyla Tanışın) başlıklı makalesinde, bu noktaların nasıl kullanılacağı ayrıntılı bir şekilde açıklanmıştır.

scroll-snap-points stilleri olmadan ve stilleriyle yatay kaydırma. Bu özellik etkinleştirilmezse kullanıcılar normal şekilde serbestçe kaydırabilir. Bu sayede tarayıcı, her öğenin üzerinde hafifçe durur.
ebeveyn
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 Kaydırma sonu olan üst öğe, tutturma davranışını tanımlar.
çocuk
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Çocuklar, tutturma hedefi olmayı seçer.

Kaydırarak Tutturma Noktaları'nı seçmemin birkaç nedeni var:

  • Ücretsiz erişilebilirlik. Kaydırarak Tutturma Noktaları spesifikasyonu, sol ok ve sağ ok tuşlarına basıldığında varsayılan olarak tutturma noktaları arasında gezinilmesi gerektiğini belirtir.
  • Gelişen bir spesifikasyon. Kaydırarak Tutturma Noktaları spesifikasyonu sürekli yeni özellikler ve iyileştirmeler alıyor. Bu da Hikayeler bileşenimin bundan sonra muhtemelen daha iyi hale geleceği anlamına geliyor.
  • Uygulama kolaylığı. Kaydırarak Tutturma Noktaları, dokunma odaklı yatay sayfalama kullanım alanı için özel olarak tasarlanmıştır.
  • Serbest platform tarzı atalet. Her platform, kendi tarzında kaydırılır ve durur. Normalleştirilmiş atalet ise tuhaf bir kaydırma ve durma tarzına sahip olabilir.

Tarayıcılar arası uyumluluk

Opera, Firefox, Safari ve Chrome'un yanı sıra Android ve iOS'te test ettik. Özellikler ve destek açısından farklılıklar tespit ettiğimiz web özelliklerinin kısa bir özetini aşağıda bulabilirsiniz.

Ancak bazı CSS'ler uygulanmadı. Bu nedenle bazı platformlar şu anda kullanıcı deneyimi optimizasyonlarından yararlanamıyor. Bu özellikleri yönetmek zorunda kalmamak hoşuma gitti ve zamanla diğer tarayıcılara ve platformlara da geleceğinden eminim.

scroll-snap-stop

Dönen öğeler, CSS Kaydırarak Tutturma Noktaları spesifikasyonunun oluşturulmasına yol açan başlıca kullanıcı deneyimi kullanım alanlarından biriydi. Hikayeler'den farklı olarak, dönen öğelerin kullanıcı etkileşiminden sonra her resimde durması gerekmez. Kullanıcıların bantta hızlıca gezinmesi normal veya teşvik edilen bir davranış olabilir. Hikayeler ise tek tek gezinmeye daha uygundur. scroll-snap-stop da tam olarak bunu sağlar.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Bu makalenin yazıldığı tarih itibarıyla scroll-snap-stop yalnızca Chromium tabanlı tarayıcılarda desteklenmektedir. Güncellemeler için Tarayıcı uyumluluğu sayfasını inceleyin. Ancak bu bir engel değildir. Bu, desteklenmeyen tarayıcılarda kullanıcıların yanlışlıkla bir arkadaşı atlayabileceği anlamına gelir. Bu nedenle kullanıcıların daha dikkatli olması gerekir veya atlanan bir arkadaşın görüntülendi olarak işaretlenmemesi için JavaScript yazmamız gerekir.

İlgileniyorsanız teknik özellikler sayfasından daha fazla bilgi edinebilirsiniz.

overscroll-behavior

Bir kalıcı pencerede gezinirken aniden kalıcı pencerenin arkasındaki içeriği kaydırmaya başladığınız oldu mu? overscroll-behavior, geliştiricinin kaydırma işlemini yakalamasına ve hiçbir zaman bırakmamasına olanak tanır. Her türlü etkinlik için uygundur. Hikayeler bileşenim, ek kaydırma hareketlerinin bileşenden çıkmasını önlemek için bu özelliği kullanıyor.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari ve Opera, bunu desteklemeyen iki tarayıcıydı ve bu tamamen normal. Bu kullanıcılar, alıştıkları kaydırma sonu deneyimini yaşayacak ve bu iyileştirmeyi fark etmeyebilir. Ben şahsen bu özelliğin büyük bir hayranıyım ve uyguladığım neredeyse her kaydırma sonu özelliğine dahil etmeyi seviyorum. Bu, yalnızca kullanıcı deneyimini iyileştirebilecek zararsız bir eklemedir.

scrollIntoView({behavior: 'smooth'})

Kullanıcı dokunarak veya tıklayarak bir arkadaşının hikaye grubunun sonuna ulaştığında, kaydırarak tutturma noktası grubundaki bir sonraki arkadaşa geçme zamanı gelmiştir. JavaScript ile bir sonraki arkadaşa referans verip görünümde kaydırılmasını isteyebildik. Bu özelliğin temel işlevleri her tarayıcıda destekleniyor. Ancak her tarayıcı bunu yapmadı 'smooth'. Bu, öğenin ekrana sığdırılmak yerine kaydırılarak gösterildiği anlamına gelir.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari, behavior: 'smooth' özelliğini desteklemeyen tek tarayıcıydı. Güncellemeler için Tarayıcı uyumluluğu sayfasını inceleyin.

Uygulamalı

Benim nasıl yaptığımı öğrendiniz. Peki siz nasıl yapardınız? Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Bir demo oluşturun, versiyonunuzu bana tweetleyin, ben de aşağıdaki Topluluk remiksleri bölümüne ekleyeyim.

Topluluk remiksleri