TV, telefon, masaüstü vb. için duyarlı yatay kaydırma görünümü oluşturmayla ilgili temel bir genel bakış.
Bu gönderide, yatay kaydırma oluşturmanın yollarıyla ilgili düşüncelerimi paylaşmak istiyorum. minimum, duyarlı, erişilebilir ve farklı özellikleriyle çalışan web deneyimleri tarayıcılar ve platformlardan (ör. TV'ler) yararlanın. Şunu deneyin: demo.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Genel Bakış
Slaytın küçük resimlerini barındırmak için bir yatay kaydırma düzeni oluşturacağız.
ürünler de dahildir. Bileşen, mütevazı bir <ul>
listesi olarak başlar, ancak
keyifli ve akıcı bir kaydırma deneyimine dönüştü.
bir ızgaraya yerleştiriyoruz. JavaScript, kullanıcıyı
klavye kullanıcılarının 100'den fazla öğede gezinmeyi atlamasına yardımcı olan "roving-index" etkileşimleri.
Ayrıca deneysel bir medya sorgusu (prefers-reduced-data
) kullanılarak
basit bir başlık kaydırıcısı deneyimine dönüşür.
Erişilebilir işaretleme ile başlayın
Medya kaydırma çubuğu birkaç temel bileşenden, yani öğe içeren bir listeden oluşur. CEVAP listesi dünyanın her yerine seyahat edebildiğini ve tükettiğini düşünelim. Bu sayfayı açan kullanıcı bir listeye göz atabilir ve bir bağlantıyı tıklayabilir tıklayın. Bu, erişilebilir tabanımızdır.
<ul>
öğesi içeren bir liste iletin:
<ul class="horizontal-media-scroller">
<li></li>
<li></li>
<li></li>
...
<ul>
Liste öğelerini bir <a>
öğesiyle etkileşimli hâle getirin:
<li>
<a href="#">
...
</a>
</li>
Bir resmi ve başlığını anlamsal olarak temsil etmek için bir <figure>
öğesi kullanın:
<figure>
<picture>
<img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
</picture>
<figcaption>Legends</figcaption>
</figure>
<img>
web sitesindeki alt
ve loading
özelliklerine dikkat edin. Medya için alternatif metin
Scroller, küçük resme ekstra bağlam getirilmesine yardımcı olan bir kullanıcı deneyimi fırsatıdır veya
Resim yüklenmediyse veya kullanıcılar için sesli bir kullanıcı arayüzü sağlıyorsa yedek metin
Örneğin, ekran okuyucu gibi yardımcı teknolojilerden yararlanmaya çalışın. Five golden ile daha fazla bilgi edinin
uyumlu alternatif için kurallar
metin.
loading
özelliği, bu resmi belirtmek için lazy
anahtar kelimesini kabul eder
kaynağı, yalnızca resim görüntü alanı içinde olduğunda getirilmelidir. Bu özellik,
kullanıcılar sadece satın almak istedikleri öğeler için resim indirdiklerinden,
görünümün içine kaydırıldı.
Kullanıcının renk şeması tercihini destekleme
Tarayıcıya, sayfanızın hazır olduğunu bildirmek için <meta>
etiketi olarak color-scheme
kullanın
hem açık hem de koyu sağlanan kullanıcı aracısı stillerini istiyor. Bu, ücretsiz koyu moddur.
veya açık mod arasında seçim yapmanız gerekir:
<meta name="color-scheme" content="dark light">
Meta etiket mümkün olan en erken sinyali sağladığı için tarayıcı kullanıcının koyu temayı tercih etmesi durumunda varsayılan bir koyu renk tuval rengi seçebilir. Yani, sitenin sayfaları arasında gezinirken beyaz bir tuval yanıp sönmez arka plana alabilirsiniz. Yükleme arasında kesintisiz koyu tema. gözler.
Thomas Steiner'dan çok daha fazla bilgiyi şu adreste bulabilirsiniz: https://web.dev/color-scheme/.
İçerik ekle
Yukarıdaki ul > li > a > figure > picture > img
içerik yapısı göz önüne alındığında,
sıradaki görev, kaydırılacak resim ve başlıklar eklemektir. Demoyu hazırladığım
statik yer tutucu resimleri ve metinleri kullanabilirsiniz, ancak bunu kendi
favori veri kaynağınızı seçin.
CSS ile stil ekleyin
Şimdi CSS'nin bu genel içerik listesini alıp bunu bir sahip olacaksınız. Netflix, Uygulama mağazaları ve daha pek çok site ve uygulama yatay görüntü alanını kategoriler ve seçeneklerle paketlemek için kaydırma alanları da kullanabilirsiniz.
Kaydırma çubuğu düzenini oluşturma
Düzenlerdeki içerikleri kesmemek veya metinlere ağırlık vermekten kaçınmalısınız. üç nokta kullanın. Televizyon setlerinde olduğu gibi ama çoğu zaman elips içerikli içeriklere de başvurulur. Bu düzende şunlara izin verilmez! Ayrıca, medya içeriğinin sütun boyutunu geçersiz kılmasına olanak tanıyarak 1 düzen oluşturur. birçok ilginç kombinasyonu yönetecek kadar esnektir.
Kapsayıcı, varsayılan boyutun şu şekilde sağlanmasıyla sütun boyutunun geçersiz kılınmasına olanak tanır: bir özel mülk olabilir. Bu ızgara düzeni, sütun boyutuyla ilgilidir. Yalnızca boşluk ve yönü yönetmek için:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
margin: 0;
}
Özel özellik, daha sonra <picture>
öğesi tarafından temel en boy oranımızı oluşturmak için kullanılır: bir kutu:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
Sadece birkaç küçük stil kullanarak medya kaydırma çubuğunun temel özelliklerini tamamlayın:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
& > li {
display: inline-block; /* removes the list-item bullet */
}
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
overflow
politikasının ayarlanması <ul>
, kaydırmaya ve klavyeyle gezinmeye izin verecek şekilde ayarlanır
her doğrudan alt <li>
öğesinin ::marker
değeri kaldırılır
yeni bir görüntülü reklam türü (inline-block
) alarak.
Yine de resimler henüz duyarlı değil ve kutulardan fırlayıp patlayan resimler en iyi hale getirmektir. Birkaç beden, kesim ve kenarlık stiliyle tarzınızı yansıtın ve geç yükledikleri durumlar için bir arka plan gradyanı:
img {
/* smash into whatever box it's in */
inline-size: 100%;
block-size: 100%;
/* don't squish but do cover the space */
object-fit: cover;
/* soften the edges */
border-radius: 1ex;
overflow: hidden;
/* if empty, show a gradient placeholder */
background-image:
linear-gradient(
to bottom,
hsl(0 0% 40%),
hsl(0 0% 20%)
);
}
Kaydırma dolgusu
Sayfa içeriğine hizalama ve kenardan kenara kaydırma yüzey alanı, kritik önem taşır.
Tipografimize uygun olan uçtan uca kaydırma düzenini sağlamak için
ve düzen satırlarını kullanıyorsanız scroll-padding
ile eşleşen padding
kullanın:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
Yatay kaydırma dolgusu hata düzeltmesi Yukarıda, ne kadar kolay olması gerektiğini görebilirsiniz. bir kaydırma kapsayıcısını destekler, ancak bununla ilgili önemli uyumluluk sorunları vardır (ancak Chromium 91 ve sonraki sürümlerde düzeltilmiştir!). Görüntüleyin Kısa bir süre için burayı tıklayın Ancak kısa versiyon, dolgunun her zaman dikkate alınmadığı görebilirsiniz.
Tarayıcıları kandırarak kaydırma çubuğunun sonuna dolgu koymalarını sağlamak için her listedeki son figürü hedefleyin ve istediğiniz dolgu miktarı vardır.
.horizontal-media-scroller > li:last-of-type figure {
position: relative;
&::after {
content: "";
position: absolute;
inline-size: var(--gap);
block-size: 100%;
inset-block-start: 0;
inset-inline-end: calc(var(--gap) * -1);
}
}
Mantıksal özelliklerin kullanılması, medya kaydırma çubuğunun tüm yazma modunda çalışmasını sağlar. ve belge yönünü gösterir.
Kaydırma tutturma
Taşma özelliğine sahip bir kaydırma kapsayıcısı, tek satırlık bir CSS ile tutturulan bir görüntü alanı haline gelebilir. Böylece, bu görüntü alanıyla nasıl hizalanmak istediklerini belirtmek çocuklara bağlıdır.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block-end: calc(var(--gap) / 2);
scroll-snap-type: inline mandatory;
& figure {
scroll-snap-align: start;
}
}
Odak
Bu bileşen, TV'lerdeki muazzam popülerliğinden ilham alıyor. ve daha fazla yerde bulabilirsiniz. Birçok video oyunu platformunda medya kaydırma çubuğu kullanılır. birincil ana ekran düzeni olarak ayarlayabilirsiniz. Odaklanma, çok büyük bir kullanıcı deneyimi buraya küçük bir ekleme yapamıyoruz. Bu medya kaydırma çubuğunu uzaktan kumandayla yürürken, bu etkileşime bazı küçük iyileştirmeler katın:
.horizontal-media-scroller a {
outline-offset: 12px;
&:focus {
outline-offset: 7px;
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: outline-offset .25s ease;
}
}
}
Bu şekilde, odak dış çizgisi stili kutudan 7px
uzaklaşarak daha güzel bir hale gelir
boşluk oluşturur. Kullanıcının hareketi azaltma gibi bir hareket tercihi yoksa ofset
odaklanılan etkinliğe biraz hareket katarak geçiş yapılır.
Dönme indeksi
Oyun kumandası ve klavye kullanıcılarının dikkat etmesi gereken, kaydırma içeriği ve seçenekleri. Bunu çözmek için uygulanan ortak kalıp gezinme endeksi. Bir kullanıcının öğe kapsayıcısı klavyeye odaklanıyor, ancak yalnızca 1 alt öğenin odaklanılmasına izin veriliyor oluşturabilirsiniz. Tek bir zaman deneyimindeki bu tek odaklanılabilir öğe, 50+ sekme tuşuna basmak yerine, potansiyel olarak uzun öğe listesini atlama toplam süreyi ifade eder.
Demonun ilk kaydırıcısında 300 öğe var. Size yardımcı olabileceğimiz tümünün katetebileceğini söylüyor.
Bu deneyimi oluşturmak için JavaScript'in klavye etkinliklerini gözlemlemesi ve etkinlikler. Google Chrome'da küçük bir açık kaynak npm şunları sağlar: kolay bir yoludur. 3 kaydırma çubuğu için bunu nasıl yapacağınız aşağıda açıklanmıştır:
import {rovingIndex} from 'roving-ux';
rovingIndex({
element: someElement
});
Bu demoda, kaydırıcılar için belge sorgulanır ve bunların her biri için
rovingIndex()
işlevi. Topu kapmak için rovingIndex()
kriterini verin
yeni bir deneyim sunduğunuzu fark ederseniz
doğrudan alt öğe olmadıklarından emin olun.
document.querySelectorAll('.horizontal-media-scroller')
.forEach(scroller =>
rovingIndex({
element: scroller,
target: 'a',
}))
Bu efekt hakkında daha fazla bilgi edinmek için açık kaynak kitaplığına göz atın roving-ux ile giriş yapın.
En boy oranı
Bu yazıyı yazarken,
aspect-ratio
şurada:
işaretini Firefox'ta açın, ancak Chromium tarayıcılarda veya set üstü kutularda kullanılabilir.
medya kaydırma çubuğu ızgara düzeni yalnızca yönü ve boşluğu belirtir,
özelliği, en boy oranı desteğini kontrol eden bir ortam sorgusu içinde
değiştirebilir.
Daha dinamik medya kaydırma araçlarında progresif geliştirme.
@supports (aspect-ratio: 1) {
.horizontal-media-scroller figure > picture {
inline-size: auto; /* for a block-size driven ratio */
aspect-ratio: 1; /* boxes by default */
@nest section:nth-child(2) & {
aspect-ratio: 16/9;
}
@nest section:nth-child(3) & {
/* double the size of the others */
block-size: calc(var(--size) * 2);
aspect-ratio: 4/3;
/* adjust size to fit more items into the viewport */
@media (width <= 480px) {
block-size: calc(var(--size) * 1.5);
}
}
}
}
Tarayıcı aspect-ratio
söz dizimini destekliyorsa medya kaydırıcısı resimleri
aspect-ratio
boyutlandırmaya yükseltildi. Taslak iç içe yerleştirme söz dizimini kullanarak her resim
ilk, ikinci veya üçüncü satır olmasına bağlı olarak en boy oranını değiştirir. İlgili içeriği oluşturmak için kullanılan
nest söz dizimi, bazı küçük dosyaların ayarlanmasına
düzenleme mantığının hemen yanında
nasıl çalıştığını gösterir.
Bu CSS ile, bu özellik daha fazla tarayıcı motorunda kullanılabildiğinden, ancak görsel açıdan daha çekici bir düzen oluşturulur.
Azaltılmış verileri tercih eder
Sıradaki teknik yalnızca
bir bayrağın arkasında
Canary,
Sayfa yükleme süresinden nasıl önemli ölçüde tasarruf edeceğimi ve
birkaç satır CSS ile veri kullanımını ölçebilir. Şuradan prefers-reduced-data
medya sorgusu:
5. düzey, cihazın şurada olup olmadığını sormaya izin verir:
veri tasarrufu modu gibi azaltılmış veri durumlarına değineceğim. Böyle bir durumda,
Bu durumda, resimleri gizleyin.
figure {
@media (prefers-reduced-data: reduce) {
& {
min-inline-size: var(--size);
& > picture {
display: none;
}
}
}
}
İçerikte gezinmeye devam edilebilir ancak ağır görüntüler maliyeti yoktur.
indirildi. prefers-reduced-data
CSS'sini eklemeden önce site:
(7 istek, 131 ms'de 100 KB kaynak)
prefers-reduced-data
CSS'sini ekledikten sonra site performansı şöyledir:
(71 istek, 1,07 sn.de 1,2 MB kaynak)
64 daha az istek. Bu, görüntü alanındaki ~60 resim anlamına gelir (yapılan testler büyük ekranda görüntülenebilir) korunduğunda, sayfa yüklemesinde yaklaşık %80'lik bir artış ve %10'u kablodan geliyor. Oldukça güçlü bir CSS.
Sonuç
Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir Codepen oluşturun ya da kendi demonuzu yayınlayın, tweet'le bize gönderin, ben de bunu Topluluk remiksleri bölümünü aşağıda bulabilirsiniz.
Kaynak
Topluluk remiksleri
Henüz burada görülecek bir şey yok.