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
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>
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
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ı tüketir?
İç içe yerleştirilmiş bir örtük kaydırma çubuğunda kaydırma işleminin ek momentumunu yakalamak için hangi özelliği kullanırsınız?
overscroll-behavior
overscroll-effect
scroll-hint
scroll-behavior
scroll-padding