The CSS Podcast - 034: Overflow
İçerik, üst öğesinin dışına çıktığında bu durumu yönetmek için birçok seçeneğiniz vardır. Ek alan eklemek için kaydırabilir, taşkın kenarları kırpabilir, kesme noktasını üç noktayla 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 yardımcı olur ve overflow
özellikleri, kutu modelindeki 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 durum, kullanıcının belirli bir boyuta kırpılmış büyük bir görüntünün etrafında gezindiği Google Haritalar gibi etkileşimli bir haritada olduğu gibi kasıtlı 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şmayı yönetmek, pencerenin bu içeriği nasıl çerçeveleyeceğini 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
mülkü, cihaz görüntü alanının yatay ekseni boyunca taşmayı kontrol eder ve böylece sola ve sağa kaydırma işlemini gerçekleştirir.
Kaydırma yönü için mantıksal özellikler
overflow-inline
ve overflow-block
mülkleri, taşmayı doküman yönüne ve yazma moduna göre ayarlar.
overflow
kısayolu
overflow
kısaltması, hem overflow-x
hem de overflow-y
stillerini tek bir 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
aynı değeri kullanır.
Değerler
overflow
mülkleri için kullanılabilen değerleri ve anahtar kelimeleri daha yakından inceleyelim.
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çerikleri hiçbir zaman gizleme" veya "kesin düzenlerin güvenli düzenleri" temel ilkelerine uyulur. 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
ilehidden
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>
Ardından, kutunun odakta olduğunu belirtmek için CSS kullanılabilir. outline
özelliği, kutunun artık kaydırılabilir olduğuna dair görsel bir ipucu verir.
Adrian Roselli, Erişilebilirliği Zorunlu Kılmak İçin CSS Kullanma başlıklı makalede CSS'nin erişilebilirlik gerilemelerini önlemeye nasıl yardımcı olabileceğini gösterir. Ö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 inline
ise yer için rekabet edebilir. Kutu modeli modülü, bu olası düzen kaydırma kaynağı hakkında daha fazla bilgi sağlar.
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-dizini en üstte olmasını sağlayabilirsiniz. Kök kaydırma çubuğu ile iç içe yerleştirilmiş, gizli kaydırma çubuğu arasındaki farkı buradan görebilirsiniz.
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ıysanız, kaydırmaya devam ettiyseniz ve yer paylaşımının arkasındaki sayfanın hareket etmesine neden olduysanız bu, kaydırma zincirleme veya üst kaydırma kapsayıcısına bulaşma işlemidir. 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 test etme
Taşma hakkındaki bilginizi test edin
Metin taşması ve öğe taşması aynı mı?
overflow
mülkü 2 anahtar kelimeyi kabul eder. İlk anahtar kelime hangi eksen içindir?
Kaydırma çubukları gösterilirken ve satır içiyken kutu modelinde hangi alanı kaplar?
İç içe yerleştirilmiş bir örtük kaydırma çubuğunda kaydırma sırasındaki ek momentumu yakalamak için hangi özelliği kullanırsınız?
scroll-hint
overscroll-behavior
scroll-behavior
scroll-padding
overscroll-effect