Taşma

CSS Podcast'i - 034: Taşma

İçerik, üst öğesinin dışına çıktığında bu durumu yönetmek için birçok seçeneğiniz vardır. Kaydırarak fazladan alan ekleyebilir, taşan kenarları kırpabilir, kesimi üç nokta ile belirtebilir ve daha pek çok işlem yapabilirsiniz. Taşma, özellikle telefon uygulamaları ve birden fazla ekran boyutu için geliştirme yaparken dikkate alınması gereken önemli bir konudur.

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

text-overflow ile tek satırda taşma

Metin düğümü içeren tüm öğelerde (ör. paragraf, <p>) text-overflow özelliğini kullanın. Metin, öğenin mevcut alanına sığmadığında nasıl görüneceğini belirtir. Bir sayfadaki tüm görüntülenebilir HTML metni metin düğümlerinde bulunur. text-overflow'ü kullanmak için tek bir sarmalanmış metin satırına ihtiyacınız vardır. Bu nedenle, overflow'ü hidden olarak ayarlamanız ve sarmalmayı engelleyen bir white-space değerine sahip olmanız gerekir.

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

Taşma mülklerini kullanma

Taşma özellikleri, alt öğelerinin mevcut alandan daha fazla alana ihtiyaç duyduğunda ne olacağını kontrol etmek için bir öğede ayarlanır. Bu, kullanıcının belirli bir boyuta kırpılmış büyük bir resmin etrafında kaydırdığı Google Haritalar gibi etkileşimli haritada kasıtlı olarak yapılmış olabilir. Bu durum, kullanıcının metin balonuna sığmayan uzun bir mesaj yazdığı sohbet uygulamalarında olduğu gibi istenmeden de gerçekleşebilir.

Taşmayı iki bölüme ayırabilirsiniz. Üst öğenin, değişmeyen, sıkıca sınırlanmış bir alanı vardır. 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şmanın yönetilmesi, pencerenin bu içeriği çerçeveleme şeklini belirlemenize yardımcı olur.

Dikey ve yatay eksende kaydırma

overflow-y mülkü, cihaz görüntü alanının dikey ekseni boyunca fiziksel taşmayı kontrol eder ve bu nedenle yukarı ve aşağı kaydırma işlemini gerçekleştirir.

overflow-x özelliği kontrolleri, cihaz görüntü alanının yatay ekseni boyunca taşar ve bu nedenle sola ve sağa kaydırılır.

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

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

overflow kısayolu

overflow kısaltması overflow-x ve overflow-y stillerini tek satırda ayarlar:

overflow: hidden scroll;

İki anahtar kelime belirtilirse ilk anahtar kelime overflow-x için, ikinci anahtar kelime ise overflow-y için geçerli olur. Aksi takdirde hem overflow-x hem de overflow-y için aynı değer kullanılır.

Değerler

overflow mülkleri için kullanılabilen değerlere ve anahtar kelimelere daha yakından bakalım.

overflow: visible (varsayılan)

Özellik ayarlanmadığında web için varsayılan değer overflow: visible olur. Bu sayede, içeriklerin hiçbir zaman yanlışlıkla gizlenmemesi sağlanır ve "içerikleri hiçbir zaman 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ırmasına olanak tanımak için kaydırma çubuklarını etkinleştirir. İçerik şu anda taşmasa bile kaydırma çubukları gösterilir. Bu, bir kapsayıcı gelecekte örneğin yeniden boyutlandırmaya bağlı olarak kaydırılabilir hale gelebilecekse gelecekteki düzen kaydırmamasını azaltmanın ve kullanıcıyı kaydırılabilir alanlara görsel olarak hazırlamanın mükemmel bir yoludur.

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ırma işlemlerini de yasaklamasıdır.

overflow: auto

Son olarak, en yaygın olarak kullanılan değer overflow: auto. Bu yöntem, kullanıcı tercihlerine saygı gösterir ve gerekirse kaydırma çubuklarını gösterir ancak varsayılan olarak gizler. Kaydırma sorumluluğunu kullanıcıya ve tarayıcıya bırakır.

Kaydırma ve taşma

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

Kaydırma ve erişilebilirlik

Klavye kullanıcısının sekme tuşuyla kutuya gelip ok tuşlarını kullanarak kaydırabilmesi için kaydırılabilir alanın odaklanmayı kabul edebildiğinden emin olmanız önemlidir.

Kaydırma kutusuna odaklanılmasına 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>

Daha sonra CSS, kutunun odaklandığını belirtmek için kullanılabilir ve kutunun artık kaydırılabilir olacağına dair görsel bir ipucu vermek için outline özelliği kullanılabilir.

Adrian Roselli, Erişilebilirliği Zorunlu Kılmak için CSS'yi Kullanma bölümünde CSS'nin erişilebilirlik regresyonlarını önlemeye nasıl yardımcı olabileceğini gösteriyor. Örneğin, yalnızca doğru özellikler kullanılıyorsa kaydırma özelliğini etkinleştirmek ve odak göstergesini eklemek için. Aşağıdaki kurallar, yalnızca tabindex, aria-labelledby ve role özelliğine sahip 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ğu konumlandırma

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

root-scroller ve implicit-scroller

Özellikle mobil ve karma uygulamalar için geliştirme yaparken bazı kaydırma çubuklarının yenilemek için çekme davranışına ve diğer özel davranışlara sahip olduğunu fark edebilirsiniz. Bu kaydırma davranışı, kök kaydırma çubuğunda 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ırma çubuğudur. Ancak kök kaydırma çubuğu olarak hangi öğenin kullanılacağını değiştirerek özel davranışları documentElement dışındaki kaydırma çubuklarına uygulayabilirsiniz. Bu yeni kaydırma çubuğunu, gizli kök kaydırma çubuğu olarak adlandırırız.

Kök kaydırma çubuğu oluşturmak için bir kapsayıcıyı sabit olarak konumlandırarak kaydırma çubuğunu öne çıkarma özelliğini kullanabilirsiniz. Bu sayede, kapsayıcının tüm görüntü alanını kaplamasını ve kaydırma çubuğunun z-dizin olarak en üstte olmasını sağlayabilirsiniz. Kök kaydırma aracını ve iç içe yerleştirilmiş örtülü kaydırma aracını burada deneyin.

scroll-behavior

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

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ığınızda, kaydırmaya devam ettiğinizde ve yer paylaşımının arkasındaki sayfanın hareket ettiğini fark ettiyseniz bu, kaydırma zincirleme veya üst kaydırma kapsayıcısına bulaşma olarak adlandırılır. overscroll-behavior özelliği, taşma kaydırma özelliğinin bir üst kapsayıcıya sızmasını (kaydırma zincirleme olarak adlandırılır) önlemenize olanak tanır.

Öğrendiklerinizi sınayın

Taşma bilginizi test edin

Kaynaklar

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