Medya kaydırma çubuğu bileşeni oluşturma

TV, telefon, masaüstü vb. için duyarlı yatay kaydırma görünümü oluşturmayla ilgili temel bir genel bakış.

Adam Argyle

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.

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 */
}

Not: Buradaki örnek CSS'yi yalnızca mantıksal özellikleri içerecek şekilde basitleştirdim. Bu gönderide bağlantısı verilen barındırılan demo, bu mantıksal kısaltmaları desteklemeyen tarayıcılar için yedekler içermektedir.

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.

Not: Bu odak durumu, mikro etkileşim içeren benzersiz ve marka tanımlayıcı bir kullanıcı deneyimi için bir fırsattı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

• GitHub'daki GUI Yarışmaları kaynağı

• Medya kaydırma çubuğu Codepen başlatıcısı

Topluluk remiksleri

Henüz burada görülecek bir şey yok.