Taşma

CSS Podcast - 034: Taşma

İçerik, üst öğesini aştığında birçok farklı şekilde ele alabilirsiniz. Daha fazla alan eklemek, taşan kenarları kırpmak, kesme noktasını üç nokta ile belirtmek ve daha pek çok şey için sayfayı kaydırabilirsiniz. Telefon uygulamaları ve birden fazla ekran boyutu için geliştirme yaparken taşmanın göz önünde bulundurulması özellikle önemlidir.

CSS'de iki farklı kırpma seçeneği vardır: text-overflow bağımsız metin satırlarına yardımcı olurken overflow özellikleri de kutu modelindeki taşmayı kontrol etmeye yardımcı olur.

text-overflow ile tek satır taşma

text-overflow özelliğini, <p> paragrafı gibi metin düğümleri içeren herhangi bir öğede kullanın. Öğenin mevcut alanına sığmadığında metnin nasıl görüneceğini belirtir. Bir sayfadaki tüm görüntülenebilir HTML metinleri metin düğümleri içindedir. text-overflow işlevini kullanmak için sarmalanmamış tek bir metin satırına ihtiyacınız vardır. Dolayısıyla overflow değerini hidden olarak ayarlamanız ve sarmalamayı engelleyen bir white-space değerine sahip olmanız gerekir.

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

Taşma özelliklerini kullanma

Bir öğede taşma özellikleri, alt öğelerinin mevcut olandan daha fazla alana ihtiyacı olduğunda ne olacağını kontrol etmek için ayarlanır. Bu, kullanıcının belirli bir boyuta göre kırpılmış büyük bir resmin etrafında kaydırıldığı Google Haritalar gibi etkileşimli bir haritada kasıtlı bir şekilde yapılabilir. Kullanıcının metin balonuna sığmayan uzun bir mesaj yazdığı bir sohbet uygulamasında olduğu gibi, bu durum istemeden de yapılabilir.

Bu taşmayı iki bölüm halinde düşünebilirsiniz. Üst öğe, değişmeyecek oldukça sınırlı bir alana sahip. 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çevelemesine yardımcı olur.

Dikey ve yatay eksende kaydırma

overflow-y özelliği, cihaz görüntü alanının dikey eksenindeki fiziksel taşmayı kontrol eder ve dolayısıyla yukarı ve aşağı kaydırılır.

overflow-x özelliği, cihaz görüntü alanının yatay ekseninde taştığından 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 stenosu

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

overflow: hidden scroll;

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

Değerler

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

overflow: visible (varsayılan)

Mülk ayarlanmadan bırakılırsa web için varsayılan değer overflow: visible olur. Bu, içeriğin hiçbir zaman yanlışlıkla gizlenmemesini ve "hiçbir zaman içeriği gizleme" veya "hassas düzenlerin güvenli düzenleri" gibi temel ilkeleri izlemesini sağlar.

overflow: hidden

overflow: hidden kullanıldığında içerik, belirtilen yönde kırpılır ve içeriğin gösterilmesi için kaydırma çubukları sunulmaz.

overflow: scroll

overflow: scroll, kullanıcıların içerikte gezinmesine olanak tanımak için kaydırma çubuklarını etkinleştirir. İçerik o anda taşmıyor olsa bile kaydırma çubukları mevcut olur. Bu sayede, bir kapsayıcı gelecekte yeniden boyutlandırma gibi nedenlerle kaydırılabiliyorsa gelecekteki düzen kaymasını azaltabilir ve kullanıcıyı kaydırılabilir alanlara görsel olarak hazırlayabilirsiniz.

overflow: clip

overflow: hidden işlevine benzer şekilde, overflow: clip bulunan içerik, öğenin dolgu kutusuna kırpılır. clip ile hidden arasındaki fark, clip anahtar kelimesinin programlı kaydırma dahil olmak üzere hiçbir kaydırmayı da yasaklamasıdır.

overflow: auto

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

Kaydırma ve taşma

Bu overflow davranışlarının çoğunda bir kaydırma çubuğu kullanılır. Ancak taşma kapsayıcınızdaki kaydırmayı kontrol etmenize yardımcı olabilecek birkaç kaydırma davranışı ve özelliği vardır.

Kaydırma ve erişilebilirlik

Klavye kullanıcılarının sekmeyle kutuya ilerleyebilmesi için kaydırılabilir alanın, odağı kabul edebildiğinden emin olmak ve ardından kaydırmak için ok tuşlarını kullanmak önemlidir.

Kaydırma kutusunun odak eklemeyi 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>

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

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

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

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

Kutu modeli içinde kaydırma çubuğu konumlandırması

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

root-scroller - implicit-scroller karşılaştırması

Bazı kaydırıcıların, özellikle mobil ve karma uygulamalar için geliştirme yaparken yenilemek için çekme davranışına ve başka özel davranışlara sahip olduğunu fark edebilirsiniz. Bu kaydırma davranışı kök kaydırıcıda gerçekleşir. Bir sayfada her zaman yalnızca bir kök kaydırıcı vardır. Varsayılan olarak documentElement, sayfanın kök kaydırıcısıdır ancak hangi öğenin kök kaydırıcı olduğu değiştirildiğinde, documentElement dışındaki kaydırıcılara özel davranışlar uygulanabilir. Bu yeni kaydırma aracı, implicit root kaydırıcı olarak adlandırılır.

Bir 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ı kaplamasını ve bir kaydırma çubuğuyla en üstte Z-endeksine yer almasını sağlayarak kaydırıcı tanıtımı adlı bir yöntemi kullanabilirsiniz. Kök kaydırıcıyı ve iç içe yerleştirilmiş örtülü kaydırma aracını burada görebilirsiniz.

kaydırma davranışı

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

Bu, özellikle kullanıcı tercihine dayalı kaydırma davranışını belirtmek için tercih edilen-azaltılmış-hareketli ile kullanıldığında yararlı olur.

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

kaydırma davranışı

Kalıcı yer paylaşımının sonuna ulaştıysanız, ardından kaydırmaya devam ettiyseniz ve yer paylaşımının arkasındaki sayfanın hareket etmesi halinde bu, kaydırma zinciridir veya üst kaydırma kapsayıcısına kadar çıkan bir süreçtir. overscroll-behavior özelliği, taşma kaydırma işleminin bir üst kapsayıcıya (kaydırma zinciri olarak adlandırılır) sızmasını önlemenizi sağlar.

Öğrendiklerinizi sınayın

Taşma bilginizi test edin

Kaynaklar

Smashing Magazine'den CSS'deki taşma ve veri kaybı