Hikayeler bileşeni oluşturma

Bu yazıda, web için yanıt veren, klavyeyle gezinmeyi destekleyen ve tarayıcılarda çalışan bir Stories bileşeni oluşturma konusundaki düşüncemi paylaşmak istiyorum.

Bu Stories bileşenini kendiniz oluşturmanın uygulamalı gösterimini tercih ederseniz, Stories bileşeni kod laboratuvarına göz atın.

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

genel bakış #

Stories UX’in iki popüler örneği, Snapchat Stories ve Instagram Stories’dir (filolardan bahsetmiyorum bile). Genel UX terimlerinde, Hikayeler genellikle birden çok abonelikte gezinmek için yalnızca mobil cihazlara yönelik, dokunma merkezli bir kalıptır. Örneğin, Instagram’da kullanıcılar bir arkadaşının hikayesini açar ve içindeki resimlere bakar. Genellikle bunu bir seferde birçok arkadaş yaparlar. Bir kullanıcı, cihazın sağ tarafına dokunarak o arkadaşının bir sonraki hikayesine atlar. Bir kullanıcı sağa kaydırarak farklı bir arkadaşa atlar. Bir Öykü bileşeni, bir döngüye oldukça benzer, ancak tek boyutlu bir dizinin aksine çok boyutlu bir dizide gezinmeye izin verir. Sanki her atlıkarıncanın içinde bir atlıkarınca varmış gibi. 🤯

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

Sonuç olarak, birkaç kritik web platformu özelliği sayesinde bu bileşenin oluşturulmasını oldukça basit buldum. Hadi onları koruyalım!

CSS Izgarası #

İçeriği boğuşturmak için bazı güçlü yöntemlerle donatıldığından, düzenimiz CSS Grid için zor bir düzen değildi.

Arkadaşlar düzeni #

bizim birincil .stories bileşen sarmalayıcı, mobil öncelikli bir 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 */
TheComedicComedian (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}

Bunu parçalayalım grid düzen:

• Görüntü alanını mobil cihazda açıkça şu şekilde dolduruyoruz: 100vh Ve 100vw ve boyutu masaüstünde sınırlayın
• / satır ve sütun şablonlarımızı ayırır
• auto-flow Çevirir grid-auto-flow: column
• Otomatik akış şablonu 100%bu durumda kaydırma penceresi genişliği ne olursa olsun

Bir cep telefonunda bunu, satır boyutunun görüntü alanı yüksekliği ve her sütunun görüntü alanı genişliği olduğu gibi düşünün. Snapchat Stories ve Instagram Stories örneğinden devam edersek, her sütun bir arkadaşın hikayesi olacak. Arkadaş hikayelerinin görünümün dışında devam etmesini istiyoruz, böylece kaydıracak bir yerimiz var. Grid, her bir arkadaş hikayesi için HTML’nizi düzenlemek için ihtiyaç duyduğu kadar çok sütun oluşturarak bizim için dinamik ve duyarlı bir kaydırma kabı oluşturur. Grid, tüm etkiyi merkezileştirmemizi sağladı.

istifleme #

Her arkadaşımızın hikayelerinin sayfalandırmaya hazır durumda olmasına ihtiyacımız var. Animasyon ve diğer eğlenceli kalıplara hazırlanırken bir yığın seçtim. Yığın dediğimde, bir sandviçe yukarıdan bakıyormuşsun gibi, yandan bakıyormuşsun gibi değil.

CSS ızgarası ile, satırların ve sütunların bir takma adı () paylaştığı tek hücreli bir ızgara (yani bir kare) tanımlayabiliriz.[story]) ve ardından her çocuk o takma ad verilmiş 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, HTML’mizi yığınlama sırasının kontrolüne verir ve ayrıca tüm öğeleri akışta tutar. ile hiçbir şey yapmamıza gerek olmadığına dikkat edin. absolute konumlandırma veya z-index ve doğru şekilde boks yapmamıza gerek yoktu height: 100% veya width: 100%. Ana ızgara, hikaye resmi görünümünün boyutunu zaten tanımlıyordu, dolayısıyla bu hikaye bileşenlerinden hiçbirinin onu doldurmasının söylenmesine gerek yoktu!

CSS Kaydırma Noktaları #

bu CSS Kaydırma Snap Points spesifikasyonu Kaydırma sırasında öğeleri görüntü alanına kilitlemeyi çocuk oyuncağı haline getirir. Bu CSS özellikleri var olmadan önce, JavaScript kullanmanız gerekiyordu ve bu… en hafif tabirle zordu. Çıkış yapmak CSS Kaydırma Snap Points Tanıtımı nasıl kullanılacağına dair büyük bir döküm için Sarah Drasner tarafından.

.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;
}

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

Kaydırma Snap Points’i birkaç nedenden dolayı seçtim:

• ücretsiz erişilebilirlik. Kaydırma Snap Points özelliği, Sol ok Ve Sağ ok tuşları varsayılan olarak yakalama noktalarında hareket etmelidir.
• Büyüyen bir özellik. Kaydırma Snap Points özelliği sürekli olarak yeni özellikler ve iyileştirmeler alıyor, bu da Hikayeler bileşenimin muhtemelen bundan sonra daha iyi olacağı anlamına geliyor.
• Uygulama kolaylığı. Kaydırma Yakalama Noktaları, dokunmatik merkezli yatay sayfalandırma kullanım durumu için pratik olarak oluşturulmuştur.
• Ücretsiz platform tarzı atalet. Esrarengiz bir kaydırma ve dinlenme stiline sahip olabilen normalleştirilmiş ataletin aksine, her platform kendi stilinde kayar ve durur.

Tarayıcılar arası uyumluluk #

Opera, Firefox, Safari ve Chrome’un yanı sıra Android ve iOS’ta test ettik. Yetenekler ve destek açısından farklılıklar bulduğumuz web özelliklerinin kısa bir özetini burada bulabilirsiniz.

Bazı CSS’lerin uygulanmamasına rağmen, bazı platformlar şu anda UX optimizasyonlarında eksik. Bu özellikleri yönetmeye gerek duymamaktan keyif aldım ve sonunda diğer tarayıcılara ve platformlara ulaşacaklarından emin oldum.

scroll-snap-stop #

Döngüler, CSS Kaydırma Snap Points spesifikasyonunun oluşturulmasını sağlayan başlıca UX kullanım durumlarından biriydi. Hikayelerden farklı olarak, bir döngü, bir kullanıcı onunla etkileşim kurduktan sonra her görüntüde durmaya her zaman ihtiyaç duymaz. Atlıkarıncada hızlı bir şekilde dolaşmak iyi olabilir veya teşvik edilebilir. Öte yandan, hikayelerde en iyi şekilde tek tek gezinilir ve bu tam olarak scroll-snap-stop sağlar.

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

Bu yazıyı yazarken, scroll-snap-stop yalnızca Chromium tabanlı tarayıcılarda desteklenir. Çıkış yapmak Tarayıcı Uyumluluğu güncellemeler için. Yine de bir engelleyici değil. Bu sadece, desteklenmeyen tarayıcılarda kullanıcıların yanlışlıkla bir arkadaşı atlayabileceği anlamına gelir. Dolayısıyla kullanıcıların daha dikkatli olması gerekecek veya atlanan bir arkadaşın görüntülendi olarak işaretlenmemesini sağlamak için JavaScript yazmamız gerekecek.

Daha fazla oku spesifikasyon Eğer ilgileniyorsanız.

overscroll-behavior #

Birdenbire modalın arkasındaki içeriği kaydırmaya başladığınızda, hiç bir modelde gezindiğiniz oldu mu? overscroll-behavior geliştiricinin kaydırmayı yakalamasına ve asla gitmesine izin vermemesine izin verir. Her türlü durum için güzel. Hikayelerim bileşeni, ek kaydırma ve kaydırma hareketlerinin bileşenden çıkmasını önlemek için bunu kullanır.

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

Safari ve Opera, olmayan 2 tarayıcıydı Destek bu ve bu tamamen sorun değil. Bu kullanıcılar, alıştıkları gibi bir aşırı kaydırma deneyimi yaşayacaklar ve bu geliştirmeyi asla fark etmeyebilirler. Şahsen ben büyük bir hayranıyım ve uyguladığım neredeyse her aşırı kaydırma özelliğinin bir parçası olarak bunu dahil etmeyi seviyorum. Yalnızca geliştirilmiş UX’e yol açabilecek zararsız bir eklentidir.

scrollIntoView({behavior: 'smooth'}) #

Bir kullanıcı dokunduğunda veya tıkladığında ve bir arkadaşının hikaye dizisinin sonuna ulaştığında, kaydırma yakalama noktası grubundaki bir sonraki arkadaşa geçme zamanı gelmiştir. JavaScript ile, bir sonraki arkadaşa referans verebildik ve onun görünüme kaydırılmasını talep edebildik. Bunun temelleri için destek harika; her tarayıcı onu görünüme kaydırdı. Ancak, her tarayıcı bunu yapmadı 'smooth'. Bu sadece, yakalanmak yerine görünüme kaydırıldığı anlamına gelir.

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

Safari, desteklemeyen tek tarayıcıydı behavior: 'smooth' Burada. Çıkış yapmak Tarayıcı Uyumluluğu güncellemeler için.

uygulamalı #

Artık nasıl yaptığımı bildiğine göre, nasıl yapardın?! Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim. Oluşturmak Kusur, beni tweetle senin versiyonun ve onu ekleyeceğim Topluluk remiksleri aşağıdaki bölüm.

Topluluk remiksleri #