Taşma

The CSS Podcast - 034: Overflow

İçerik, üst öğesinin dışına çıktığında bunu işlemek için birçok seçeneğiniz vardır. Kaydırarak ek alan ekleyebilir, taşan kenarları kırpabilir, kesme noktasını üç nokta ile belirtebilir ve daha birçok işlem yapabilirsiniz. Taşma, özellikle telefon uygulamaları ve birden fazla ekran boyutu için geliştirme yaparken göz önünde bulundurulması gereken önemli bir faktördür.

CSS'de iki farklı kırpma seçeneği vardır: text-overflow, metin satırlarını kırpmaya yardımcı olurken overflow özellikleri, kutu modelinde taşmayı kontrol etmeye yardımcı olur.

text-overflow ile tek satırda taşma

Metin düğümleri içeren herhangi bir öğede(ör. paragraf, <p>) text-overflow özelliğini kullanın. Metnin, öğenin kullanılabilir alanına sığmadığında nasıl görüneceğini belirtir. Bir sayfadaki tüm görüntülenebilir HTML metni metin düğümlerindedir. text-overflow özelliğini kullanmak için sarmalanmamış tek bir metin satırına ihtiyacınız vardır. Bu nedenle, overflow özelliğini hidden olarak ayarlamanız ve sarmalamayı önleyen bir white-space değerine sahip olmanız gerekir.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Taşma özelliklerini kullanma

Taşma özellikleri, alt öğeleri için mevcut alandan daha fazla yer gerektiğinde ne olacağını kontrol etmek amacıyla bir öğede ayarlanır. Bu durum, Google Haritalar gibi etkileşimli bir haritada olduğu gibi kasıtlı olabilir. Bu tür haritalarda kullanıcı, belirli bir boyuta kırpılmış büyük bir resimde kaydırma yapar. Ayrıca, kullanıcının metin balonuna sığmayan uzun bir mesaj yazdığı sohbet uygulamalarında olduğu gibi, bu durum kasıtsız da olabilir.

Taşma menüsünü iki bölüm halinde düşünebilirsiniz. Üst öğenin, değişmeyecek şekilde kesin olarak sınırlandırılmış bir alanı var. Bunu bir pencere olarak düşünebilirsiniz. Alt öğeler, üst öğeden daha fazla alan isteyen içeriklerdir. Bunu, pencereden baktığınız şey olarak düşünebilirsiniz. Taşmayı yönetmek, pencerenin bu içeriği nasıl çerçeveleyeceğini belirlemeye yardımcı olur.

Dikey ve yatay eksende kaydırma

overflow-y özelliği, cihazın görüntü alanının dikey ekseni boyunca fiziksel taşmayı kontrol eder. Bu nedenle, yukarı ve aşağı kaydırma yapılır.

overflow-x özelliği, cihazın görünüm alanının yatay ekseni boyunca taşmayı kontrol eder. Bu nedenle, sola ve sağa kaydırma işlemi yapılır.

Kaydırma yönü için mantıksal özellikler

overflow-inline ve overflow-block özellikleri, taşmayı belge yönüne ve yazma moduna göre ayarlar.

overflow kısaltması

overflow kısaltması, hem overflow-x hem de overflow-y stillerini tek bir satırda ayarlar:

overflow: hidden scroll;

İki anahtar kelime belirtilirse ilki overflow-x, ikincisi ise overflow-y için geçerli olur. Aksi takdirde hem overflow-x hem de overflow-y aynı değeri kullanır.

Değerler

Gmail mülkleri için kullanılabilen değerleri ve anahtar kelimeleri daha yakından inceleyin.overflow

overflow: visible (varsayılan)

Özellik ayarlanmadığında web için varsayılan değer overflow: visible olur. Bu sayede içerik hiçbir zaman yanlışlıkla gizlenmez ve "içeriği asla gizleme" veya "kesin düzenlerin güvenli düzenleri" gibi temel ilkeler uygulanır.

overflow: hidden

overflow: hidden ile içerik, belirtilen yönde kırpılır ve gösterilmesi için kaydırma çubukları sağlanmaz.

overflow: scroll

overflow: scroll, kullanıcıların içerikte kaydırma yapmasına olanak tanımak için kaydırma çubuklarını etkinleştirir. İçerik taşmıyor olsa bile kaydırma çubukları gösterilir. Bu, gelecekte yeniden boyutlandırma gibi nedenlerle kaydırılabilir olabilecek bir kapsayıcı varsa gelecekteki düzen kaymalarını azaltmak ve kullanıcıyı kaydırılabilir alanlara görsel olarak hazırlamak için harika bir yöntemdir.

overflow: clip

overflow: hidden gibi, overflow: clip içeren içerik de öğenin dolgu kutusuna kırpılır. clip ile hidden arasındaki fark, clip anahtar kelimesinin programatik kaydırma dahil tüm kaydırmaları da yasaklamasıdır.

overflow: auto

Son olarak, en sık kullanılan değer overflow: auto. Bu, kullanıcının tercihlerine saygı duyar ve gerekirse kaydırma çubuklarını gösterir ancak varsayılan olarak bunları gizler ve kaydırma sorumluluğunu kullanıcıya ve tarayıcıya verir.

Kaydırma ve taşma

Bu overflow davranışların çoğu kaydırma çubuğu oluşturur ancak taşma kapsayıcınızda kaydırmayı kontrol etmenize yardımcı olabilecek birkaç belirli kaydırma davranışı ve özelliği vardır.

Kaydırma ve erişilebilirlik

Kaydırılabilir alanın odaklanmayı kabul ettiğinden emin olmanız önemlidir. Böylece klavye kullanıcısı kutuya sekme tuşuyla gidebilir ve kaydırmak için ok tuşlarını kullanabilir.

Kaydırma kutusunun odağı kabul etmesine izin vermek için tabindex="0", aria-labelledby özelliğine sahip bir ad ve uygun bir role özelliği ekleyin. Örneğin:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

CSS daha sonra, kutunun odaklandığını belirtmek için kullanılabilir. outline özelliği, kutunun artık kaydırılabileceğine dair görsel bir ipucu verir.

Adrian Roselli, Using CSS to Enforce Accessibility (Erişilebilirliği Zorunlu Kılmak İçin CSS Kullanma) başlıklı makalesinde CSS'nin erişilebilirlik gerilemelerini önlemeye nasıl yardımcı olabileceğini gösteriyor. Örneğin, yalnızca doğru özellikler kullanılıyorsa kaydırmayı etkinleştirmek ve odak göstergesini eklemek için. Aşağıdaki kurallar, yalnızca tabindex, aria-labelledby ve role özelliği olan kutuları kaydırılabilir hale getirir.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Kutu modelinde kaydırma çubuğunun konumu

Kaydırma çubukları dolgu kutusunda yer kaplar ve inline ise overlaid değilse alan için rekabet edebilir. Kutu modeli modülü, bu olası düzen kayması kaynağı hakkında daha fazla bilgi verir.

root-scroller ve implicit-scroller

Bazı kaydırma çubuklarının yenilemek için çekme davranışı ve diğer özel davranışları olduğunu fark edebilirsiniz. Bu durum özellikle mobil ve karma uygulamalar geliştirirken geçerlidir. Bu kaydırma davranışı, kök kaydırıcıda gerçekleşir. Bir sayfada her zaman yalnızca bir kök kaydırma çubuğu bulunur. Varsayılan olarak documentElement, sayfanın kök kaydırıcısıdır. Ancak kök kaydırıcının hangi öğe olduğunu değiştirerek özel davranışlar, documentElement dışındaki kaydırıcılara uygulanabilir. Bu yeni kaydırıcıya örtülü kök kaydırıcı adını veriyoruz.

Kök kaydırıcı oluşturmak için bir kapsayıcıyı sabit olarak konumlandırıp tüm görüntü alanını kapladığından ve kaydırıcıyla birlikte en üstte z-index olduğundan emin olarak kaydırıcı tanıtımı adı verilen bir özellikten yararlanabilirsiniz. Kök kaydırma ile iç içe yerleştirilmiş örtülü kaydırma arasındaki farkı burada deneyimleyin.

Kaydırma çubuğunuzu biçimlendirme

Kaydırma çubuğunuzu sitenizin tasarımına dahil edecek şekilde biçimlendirebilirsiniz. scrollbar-color, kaydırma çubuğunun başparmağı ve oluğu için rengi ayarlar.

Kaydırma çubuğunun genişliğini değiştirmek için scrollbar-width simgesini kullanın. Bunu rastgele bir uzunluğa ayarlayamazsınız ancak thin kaydırma çubuğu veya none istediğinizi belirtebilirsiniz.

scroll-behavior

scroll-behavior, öğelere tarayıcı kontrollü kaydırmayı etkinleştirmenize olanak tanır. Bu ayar, .scrollTo() gibi sayfa içi gezinme işlemlerinin veya bağlantıların nasıl işleneceğini belirtmenize olanak tanır.

Bu özellik, özellikle kullanıcı tercihine göre kaydırma davranışını belirtmek için prefers-reduced-motion ile birlikte kullanıldığında yararlıdır.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Bir modal yer paylaşımının sonuna ulaştıktan sonra kaydırmaya devam ettiyseniz ve yer paylaşımının arkasındaki sayfanın hareket ettiğini gördüyseniz bu, kaydırma zincirleme veya üst kaydırma kapsayıcısına yükseltme işlemidir. overscroll-behavior özelliği, taşma kaydırmanın üst kapsayıcıya sızmasını (kaydırma zincirleme olarak adlandırılır) önlemenizi sağlar.

Kaydırarak tutturma

Genellikle sorunsuz bir şekilde kaydırarak içeriği kaydırma alanında istediğiniz yere yerleştirebilirsiniz. Resim galerileri veya sayfaları ya da slaytları taklit eden içerikler gibi bazı tasarımlarda, içeriğin kaydırma alanına tutturulmasını isteyebilirsiniz.

Kaydırma kapsayıcısını ayarlama

Kaydırma tutturmayı etkinleştirmek için kaydırma kapsayıcısına scroll-snap-type ekleyin. Öncelikle kaydırma tutturmanın hangi eksende gerçekleşeceğini tanımlarsınız. Bu, mantıksal bir özellik (block veya inline), fiziksel bir özellik (x veya y) ya da both olabilir.

Kaydırma yapıştırmanın ne kadar katı olması gerektiğini de tanımlayabilirsiniz. Varsayılan katılık proximity'dır. Bu, kaydırma kapsayıcısının mümkünse yerine oturmaya çalışacağı anlamına gelir. Kaydırma kapsayıcısının her zaman yerine oturmasını sağlamak için katılığı mandatory olarak da ayarlayabilirsiniz.

.scroll-container {
    scroll-snap-type: block mandatory;
}

Kaydırma sabitleme, bir öğeyi kaydırma kapsayıcısının tam sınırları içinde hizalar. Ancak kaydırma kapsayıcısının bir kısmı görünmüyorsa ne olur? Örneğin, kaydırma kapsayıcısının bir kısmını kaplayan sabit bir üstbilginiz olabilir. Yakalanan öğelerin kaydırma kapsayıcısının görünür kısmıyla hizalanmasına yardımcı olmak için scroll-padding değerini ayarlayabilirsiniz.

Tutulabilir öğeleri kontrol etme

Bir öğeyi yapışabilir hâle getirmek için scroll-snap-align özelliğini start, end veya center olarak ayarlayın. Kaydırma tutturma yönü both ise iki değer ayarlayabilirsiniz. Bu, öğenin bir kenarının kaydırma alanının kenarıyla hizalanıp hizalanmayacağını veya ortalanıp ortalanmayacağını belirler.

Yakalama yapılan öğenin kenarlarındaki boşluğu scroll-margin ile ayarlayabilirsiniz:

scroll-margin, bir öğeye kaydırırken dolguyu ayarlamak için de kullanılır:

Kaydırmayı daha yapışkan hale getirmek için kaydırma kapsayıcısındaki bir öğeye scroll-snap-stop: always ekleyebilirsiniz. Tek bir kaydırmada birden fazla öğeyi kaydırmanızı engellemez. Kaydırma hareketini, kaydırmanın ataletle devam edeceği şekilde sonlandırırsanız kaydırma, devam etmek yerine bir sonraki tutturma konumunda sona erer.

Anlayıp anlamadığınızı kontrol etme

Kaynaklar

Smashing Magazine'den CSS'de Taşma ve Veri Kaybı