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, bu yeni özellikler kullanılarak ve JavaScript olmadan 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ırmaya dayalı animasyon, kaydırma durumu sorguları, :has(), grid, anchor ve daha pek çok özellik gösterilmektedir.

Erişilebilirlik hikayesi ise daha da etkileyici.

Mühendislik ve erişilebilirlik ekiplerinin birlikte çalışması sayesinde, tarayıcıda en iyi uygulamalarla ilgili sorunlar giderilir. Bu kadar erişilebilir bir bant oluşturmak çok zor olurdu.

Meet ::scroll-button() ve ::scroll-marker()

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

CSS kaydırma bandı özelliklerinin birinci sürümünde düğmeler ve işaretçiler CSS'den oluşturulur. Tarayıcı, öğeleri kardeş öğeler olarak, uygun rollerle, uygun sekme sırasıyla yerleştirir ve durumlarını korur. Bu sayede erişilebilir bir carousel geliştirmek kolaylaşır.

• Kaydırma Düğmeleri
  Tarayıcı tarafından sağlanan, durum bilgisi olan ve etkileşimli kaydırma <button> öğeleri, içeriğe erişime yardımcı olur ve basıldığında kaydırma alanının% 85'ini kaydırır.

• Kaydırma İşaretleri
  Kaydırma alanındaki istenen öğelere erişimi kolaylaştıran, tarayıcı tarafından sağlanan, durum bilgisi içeren gezinme <a> öğeleri.

Bu yayının geri kalanında, bu yeni özellikler kullanılarak nasıl bir carousel oluşturulacağı gösterilmektedir.

Kaydırma çubuğuyla başlama

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 tutturma özelliği zorunlu değildir ancak bu örnekte kullanılmıştır. Döngüler, dikey ve çift yönlü kaydırma yapan kullanıcılar için de çalışır.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

::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 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 kaydırır.

Kaydırma tutma noktaları ile her seferinde yalnızca tam genişlikte bir öğe gösteren karusellerde bu, öğe başına bir tutar gibi görünür. Aynı anda birden fazla öğenin göründüğü uzun öğe listelerinde neredeyse tam sayfa kaydırılır.

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

1. Bunları diğer sözde öğeler gibi seçiciyle ekleyin: .carousel::scroll-button(right) düğmesi sağa kaydırır.
2. İsteğe bağlı erişilebilir yedek alternatif metin ile content öğesini belirtin.

Tarayıcı, kaydırma çubuğunun kardeşleri olarak içeriğinizin bulunduğu gerçek düğmeler oluşturur. Artık bu düğmeleri istediğiniz gibi yerleştirebilir, stilini değiştirebilir veya anchor(). Aşağıdaki CSS, biri sola kaydırma düğmesi ve 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;
  }
}

::scroll-marker() ile kaydırma işaretleri ekleme

Kaydırma çubuğu başparmak öğesine benzer şekilde, CSS kaydırma işaretçileri, karusel boyutunu belirtirken hızlıca sona veya başa gitme olanağı da sunabilir. CSS kaydırma işaretçisi, kaydırma çubuğundan farklıdır. Çünkü her işaretçi, kaydırma çubuğundaki herhangi bir öğeyi temsil edebilen bir bağlantıdır.

Bu ayrım için bir örnek olarak TV dizilerinin sezonlarını ele alalım. 10 bölümün her biri için işaretçi oluşturmak yerine, bölümün başına giden 2 işaretçi oluşturun.

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

İşaretçiler, sayfa içi <a> bağlantılara benzer ancak bazı özel özellikleri vardır:

1. İşaretçi görünümde veya sabitlendiğinde :target-current durumu da dahil edilir.
2. Klavye ile gezinme özelliği bulunur ve focusgroup gibi çalışır.
3. Ekran okuyucu deneyimi dahildir ve raporlar sekme listesi gibi okunur.

Aşağıdaki adımları uygulayarak kaydırma çubuğunuzdaki önemli ilgi alanlarına işaretçi ekleyin:

1. scroll-marker-group öğesinin yerleşimini before veya after olarak tanımlayın.
2. İlgi çekici noktaları seçiciyle .carousel .point-of-interest::scroll-marker belirleyin.
3. İsteğe bağlı erişilebilir yedek alternatif metin ile content belirtin: sayılar, metin, boş veya bir resim.

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

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

İşaretçilerin kapsayan öğesine ::scroll-marker-group adı verilir ve kaydırma düğmeleri gibi kaydırma çubuğunun kardeşi olarak oluşturulur. Bu kapsayıcı, stil verilebilir ve istediğiniz yere yerleştirilebilir.

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

İkisini bir araya getirdiğinizde, bant gibi görünen ancak aşağıdaki avantajları sunan bir deneyim elde edersiniz:

• JavaScript devre dışı bırakıldığında çalışır.
• Hidrasyon veya tembel boyutlandırma yok (CLS'yi azaltın).
• Her türlü kaydırma animasyonu ve tetikleyici için hazır.
• Erişilebilirlik özellikleri dahildir.
• Dokunma, fare ve klavye dostu.

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

Kaynaklar

Bu yayında bu özellikler çoğunlukla "döner bant" olarak adlandırılsa da yetenekleri ve kullanışlılıkları, döner bant kullanım alanlarının çok ötesine uzanır. Bu yeni özelliklerin potansiyelini tam olarak görmek için Atlı Karınca Galeri'yi deneyin ve diğer bileşenlere (ör. Scrollspy, sekmeler ve slaytlar) göz atın.

• Web Standartları
  • CSS Overflow 5
  • Carousel Açıklayıcı
  • WAI Aria Carousel
• Chrome
  • Kargoya verme amacı
  • Atlı Karınca Galeri
  • Bant yapılandırıcısı

Bant yapılandırıcısı

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

Örneğin, kaydırma düğmeleri için anahtarlar sunar ve etkinleştirildiğinde gösterilen bantta hemen düğmeler görünür ve ilişkili CSS kullanılır.

Ayrıca, rulo ile ilgili daha ileri düzey kavramlara dair örnekler de içerir:

• etkileşim
• scroll-state
• kaydırmaya dayalı animasyon
• ve kaydırma sütunlarını sabitleme

Atlı Karınca Galeri

Bu özelliklerin sınırlarını merak edenler için gösterim alanı. "X işini yapabilir mi?" gibi soruları yanıtlar. Her demo, internette bulunan bir kullanım alanına dayanır. Her demoda, bu düğmelerin ve işaretçilerin kaydırmaya dayalı animasyon, scroll-state() sorguları ve daha pek çok yöntemle nasıl düzenleneceği gösterilmektedir.

Eğlenceli bir bilgi: Sitenin tamamında JavaScript kullanılmıyor.

Örnekler, keyifli bir şekilde basit olmaktan fantastik bir şekilde sağlam ve özellik açısından zengin olmaya kadar değişir. Galeride gezinmek ilham verici ve güven verici olmalı, ayrıca kodun alınabilmesi için incelenebilir olmalıdır. Döngüler oluşturmanıza yardımcı olabilecek yardımcı programlar için @layer utilities simgesini bulun ve inceleyin.

Gelecekteki çalışmalar

Bu özelliklerin HTML ve CSS ile ne kadar iyi entegre olduğundan gurur duyuyoruz. CSS rulosunun erişilebilirliği üst düzeydedir. CSS bantlarının performansı, herhangi bir JavaScript çözümünden daha iyidir. CSS banner'ının kullanıcı deneyimi doğal, sorunsuz ve zengindir. Ancak, bu durumu iyileştirmenin yolları vardır.

Kendi öğelerinizi getirme

Kaydırma düğmeleri ve işaretçiler için kendi bileşenlerinizi ekleyebilmeniz için çalışmalar devam ediyor. Bu sayede, simgeler gibi zengin içeriklere sahip kendi <a> etiketlerinizi sağlayabilirsiniz. Ayrıca, Tailwind ile oluşturulmuş kendi çok katmanlı düğmelerinizi de kullanabilirsiniz.

Döngüsel kaydırma

Birçok bant, sonuna geldiğinde kendi etrafında döner. Örneğin, fuarlardaki atlıkarıncalar bu şekilde çalışır. Bu konu gündemimizde ve bu konuda bir platform çözümü sunmayı planlıyoruz.

Bu özelliği beğeneceğinizi umuyoruz. Artık güzel bir kaydırma deneyimi yaşayacak olan tüm "JavaScript devre dışı" web kullanıcılarını ve yerleşik bir karuselinin daha iyi zamanlanmış yaşam döngüsünden elde edilecek tüm CLS azaltmalarını dört gözle bekliyoruz.

Daha az iş, harika kullanıcı deneyimleri, daha iyi performans.