CSS ile bantlar

Adam Argyle

Yayınlanma tarihi: 20 Mart 2025

Chrome 135'ten itibaren, kaydırma ve bant deneyimleri oluşturmak için tasarlanmış CSS Overflow 5 spesifikasyonundaki özellikleri kullanabilirsiniz.

Bu yayında, JavaScript kullanılmadan bu yeni özelliklerle oluşturulan birçok farklı kaydırma ve bant deneyimine genel bir bakış sunulmaktadır. Aşağıdaki videoyu izleyin ve artık neler yapabileceğinizi öğrenin.

Videoda kaydırma düğmeleri, kaydırma işaretçileri, kaydırma odaklı animasyon, scroll-state() sorguları, :has(), ızgara, ankraj ve daha fazlasının uyumlu bir şekilde kullanıldığı gösterilmektedir.

Erişilebilirlik hikayesi ise daha da etkileyici.

Mühendislik ve erişilebilirlik ekiplerinin birlikte çalışması sayesinde bantla ilgili en iyi uygulamalar tarayıcı tarafından ele alınır. Bundan daha erişilebilir bir bant oluşturmak çok zor olur.

Banttaki öğeler, ekran okuyucunun bantta göreceği önizlemeyi sunmak için düğmelerin ve sekme öğelerinin açıkça belirtildiği bir erişilebilirlik ağaç görünümü olarak gösterilir.
Chrome Geliştirici Araçları bant erişim ağacı ekran görüntüsü: Demo

::scroll-button() ve ::scroll-marker() ile toplantı

Bant, en fazla iki kullanıcı arayüzü olanağı (düğmeler ve işaretçiler) içeren bir kaydırma alanıdır.

CSS bant özelliklerinin birinci sürümünde düğmeler ve işaretçiler CSS'den oluşturulur. Tarayıcı, öğeleri doğru sekme sırasına göre uygun rollerle kardeş olarak yerleştirir ve durumlarını korur. Bu, erişilebilir bir bant oluşturmayı kolaylaştırır.

  • Kaydırma düğmeleri
    İçeriğe erişmeye yardımcı olan ve basıldığında bir kaydırma alanının% 85'ini kaydıran tarayıcı tarafından sağlanan, durum bilgisine sahip ve etkileşimli kaydırma imkanı <button> öğeleri.

  • Kaydırma İşaretçileri
    Kaydırma alanındaki istenen öğelere içerik erişimi sağlamaya yardımcı olan, tarayıcı tarafından sağlanan durum bilgisine sahip gezinme <a> öğeleri.

Bu gönderinin geri kalanında, bu yeni özellikleri kullanarak bir bant oluşturma işlemi gösterilmektedir.

Kaydırma çubuğuyla başlayın

Sitenizdeki herhangi bir kaydırma alanına düğme ve işaretçi ekleyebilirsiniz.

Aşağıdaki CSS, daha sonraki adımlarda düğme ve işaretçi eklemek için kullanılacak temel bir kaydırma alanı oluşturur. Bant için kaydırma sabitleme gerekli değildir ancak bu örnekte kullanılmıştır. Bantlar, dikey kaydırma çubukları ve iki yönlü kaydırma çubukları için de kullanılabilir.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}
İçeriğin kesilmesi dışında herhangi bir imkân veya ipucu olmadan gösterilen bir kaydırma alanı.

::scroll-button() ile kaydırma düğmeleri ekleme

İşletim sisteminize bağlı olarak, kaydırma çubuklarınızın etrafında kaydırma düğmeleri zaten mevcut olabilir. Yerleşik kaydırma çubuğu düğmeleri, kaydırma alanını itme eğilimindeyken CSS kaydırma düğmeleri, kaydırma alanının% 85'ini sayfalar.

Kaydırma sabitleme noktaları ile aynı anda yalnızca tam genişlikte bir öğe gösteren bantlar için bu, öğe bazında bir tutar gibi görünür. Bir seferde birden fazla öğenin görüntülendiği uzun öğe listelerinde neredeyse bir sayfanın tamamı kaydırılır.

CSS ile kaydırma düğmeleri eklemek için:

  1. Bunları diğer sözde öğeler gibi, bir seçiciyle ekleyin: Sağa kaydıran bir düğme için .carousel::scroll-button(right).
  2. İsteğe bağlı erişilebilir yedek alternatif metin ile content değerini belirtin.

Tarayıcı, kaydırma çubuğunun kardeş öğeleri olarak içeriğinizin bulunduğu gerçek düğmeler oluşturur. Artık bu düğmeleri istediğiniz gibi düzenleyebilir, biçimlendirebilir veya anchor() yapabilirsiniz. Aşağıdaki CSS, biri sola kaydırma düğmesi, diğeri sağa kaydırma düğmesi olmak üzere iki düğme oluşturur.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }
}
Demo

::scroll-marker() ile kaydırma işaretçileri ekleme

Kaydırma çubuğu imleci öğesine benzer şekilde CSS kaydırma işaretçileri, bantın boyutunu belirtebilir ve sona veya başa hızlıca gitme olanağı sunabilir. CSS kaydırma işaretçisi, her işaretçi kaydırma çubuğundaki herhangi bir öğeyi temsil edebilecek bir bağlantı olduğundan kaydırma çubuğundan farklıdır.

Bu ayrımın bir örneği olarak bir TV dizisinin sezonlarını düşünebilirsiniz. 10 bölümün her biri için birer işaretçi oluşturmak yerine, bölümün başına giden 2 işaretçi oluşturun.

2. Sezon 1. Bölüm&#39;den itibaren TV bölümlerinin yatay listesi gösterilir. Yukarıda, 1. Sezon ve 2. Sezon olmak üzere iki liste başlığı vardır. Her birinin yanında, oluşturulan kaydırma işaretçileri olduğunu belirten oklar bulunur.

Bu işaretçilerin nokta olmadığını, sözde öğelerinin content: "Season 1" özelliğini kullandığını unutmayın. İşaretçi, genellikle e-ticaret sitelerindeki veya fotoğraf odaklı web sitelerindeki galeri bantlarında kullanılan küçük resimler de olabilir.

İşaretçi, sayfa içi <a> bağlantılarına benzer ancak bazı özel özelliklere sahiptir:

  1. İşaretçinin görünümde veya sabitlendiğinde :target-current durumu bulunur.
  2. Klavye gezinme dahildir ve odak grubu gibi çalışır.
  3. Ekran okuyucu deneyimi ve sekme listesi gibi raporlar dahildir.

Aşağıdaki adımları uygulayarak kaydırma çubuğunuzda önemli ilgi çekici yerlere işaretçi ekleyin:

  1. scroll-marker-group öğesinin yerleşimini before veya after olarak tanımlayın.
  2. Bir seçici .carousel .point-of-interest::scroll-marker ile önemli yerleri seçin.
  3. content değerini, isteğe bağlı erişilebilir yedek alternatif metin (sayı, metin, boş veya resim) ile belirtin.

Tarayıcı, tüm işaretçileri oluşturur ve işaretçi grubu kapsayıcısına yerleştirir. Bu örnekte, her öğe için bir işaretçi noktası oluşturmak üzere her <li> için boş bir işaretçi oluşturulur.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}
Demo

İşaretçileri içeren öğeye ::scroll-marker-group denir ve kaydırma düğmeleri gibi kaydırma çubuğunun kardeşi olarak oluşturulur. Bu kapsayıcıya stil verebilir ve istediğiniz yere yerleştirebilirsiniz.

İşaretçi ve düğmeler aynı anda

Bu ikisini bir araya getirdiğinizde bant gibi görünen ancak aşağıdaki avantajlara sahip bir deneyim elde edersiniz:

  • JavaScript devre dışıyken çalışır.
  • Besleme veya yavaş boyutlandırma yok (CLS'yi azaltın).
  • Her türlü kaydırma animasyonuna ve tetikleyiciye hazırdır.
  • Erişilebilirlik dahildir.
  • Dokunmatik ekran, fare ve klavye kullanımına uygun olmalıdır.

Daha az çaba, daha fazla erişim, daha hızlı sonuç

Demo

Kaynaklar

Bu gönderide bu özellikler çoğunlukla "bant" olarak adlandırılsa da bu özelliklerin kapasitesi ve yararlılığı, bant kullanım alanlarından çok daha geniştir. Bu yeni özelliklerin potansiyelini tam olarak anlamak için atlı karınca galerisini deneyin ve kaydırma izi, sekmeler ve slaytlar gibi diğer bileşenleri inceleyin.

Görsel ve etkileşimli öğrenmeyi tercih edenler için Bant Yapılandırıcı'yı deneyin.

Kaydırma düğmeleri gibi anahtarlar sunar ve etkinleştirildiğinde gösterilen bantta hemen düğmeler ve ilişkili CSS kullanılır.

Basit bir listenin HTML kod snippet&#39;ini gösteren, yapılandırıcı web sitesinin ekran görüntüsü. HTML&#39;nin altında 4 anahtar bulunur: kaydırma düğmeleri, nokta gezinme, otomatik sayfalar ve hareketsiz. Anahtarların altında, anahtar tekliflerinden herhangi birinin eklenmeye hazır olduğu kartların listesi bulunur.
https://chrome.dev/carousel-configurator/

Ayrıca, ruloya benzer daha gelişmiş kavramlara dair örnekler de içerir:

Bu özellikleri ne kadar kullanabileceğinizi merak edenler için "X özelliğini yapabilir mi?" gibi soruları yanıtlayan bir gösterim alanı. Her demo, internette bulunan bir kullanım alanına dayanır. Her bir demoda, bu düğmelerin ve işaretçilerin kaydırma odaklı animasyon, scroll-state() sorguları ve daha birçok yöntemle nasıl düzenleneceği gösterilmektedir.

Sitenin tamamı JavaScript içermez.

Atlı karınca galerisinin açılış sayfasının ekran görüntüsü. Hoş geldiniz başlığı, siteyle ilgili bazı bilgiler ve bağlantı olarak bant örnekleri listesi içerir.
https://chrome.dev/carousel/

Örnekler, son derece basitten inanılmaz derecede güçlü ve zengin özelliklere kadar çeşitlilik gösterir. Galeride gezinme deneyimi ilham verici, güven verici ve tabii ki kod alınabilecek şekilde incelenebilir olmalıdır. Bant oluşturmanıza yardımcı olabilecek yardımcı programlar için @layer utilities'yi bulup inceleyin.

Daha fazla çalışma

Bu özelliklerin tüm HTML ve CSS ile ne kadar iyi entegre edildiğinden gurur duyuyoruz. CSS bantlarının erişilebilirliği üst düzeydir. CSS bantlarının performansı, JavaScript çözümlerinden daha iyidir. CSS bantının kullanıcı deneyimi doğal, akıcı ve zengindir. Ancak bu durumu iyileştirmenin yolları vardır.

Kendi öğelerinizi ekleme

Kaydırma düğmeleri ve işaretçiler için kendi bileşenlerinizi ekleyebilmeniz amacıyla çalışmalar devam ediyor. Bu sayede, simge gibi zengin içeriklere sahip kendi <a> etiketlerinizi sağlayabilirsiniz. Tailwind ile oluşturduğunuz çok katmanlı düğmeleri de ekleyebilirsiniz.

Döngüsel kaydırma

Birçok bant, fuardaki bant gibi sonuna ulaştığında kendi etrafında döner. Bu konuyu gündemimizde tutuyoruz ve buna yönelik bir platform çözümü sunmayı planlıyoruz.

Bu özelliği beğeneceğinizi umuyoruz. Artık "JavaScript devre dışı" olan tüm web kullanıcılarının güzel bir kaydırılabilir deneyim elde etmesini ve yerleşik bantın daha iyi zamanlanmış yaşam döngüsünden elde edilecek tüm CLS düşüşlerini görmeyi bekliyoruz.

Daha az işlem, mükemmel kullanıcı deneyimleri, daha iyi performans.