Taşma, bir konteynere sığmayacak kadar çok içeriğiniz olduğunda başınıza gelen şeydir. Bu yazıda taşmanın ne olduğunu ve nasıl yönetileceğini öğreneceksiniz.
Taşma nedir?
CSS’deki her şey bir kutudur. Bunu daha önceki yazılarımızda görmüştük. width ve height(veya inline-size ve block-size) değerleri bu kutuların boyutlarını sınırlandırır. Bir kutuya sığmayacak kadar çok içerik olduğunda ise taşma olur. CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS mizanpajında ve CSS yazarken ilerledikçe daha fazla taşma durumuyla karşılaşacaksınız.
CSS “veri kaybını” önlemeye çalışır
Taşma olduğunda CSS’nin varsayılan davranışını gösteren iki örneği ele alalım.
İlk örnekte height ayarlanarak kısıtlanmış bir kutu olsun. Bu kutuya, kutu için ayrılmış alanı aşan içerik ekliyoruz. Dolayısıyla içerik kutudan taşacak ve aşağıdaki gibi görünecek;
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
}<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
İkinci örnek de, kutudaki bir kelime olsun. Kutu kelime için çok küçük olduğundan aşağıdaki gibi kelime kutunun dışına çıktı.
.word {
border: 1px solid #333333;
width: 100px;
font-size: 250%;
}<div class="word">Overflow</div>
CSS’nin neden bu kadar dağınık çalıştığını merak ediyor olabilirsiniz. İçeriği neden amaçlanan konteynerin dışında görüntülüyor? Neden taşan içeriği gizlemiyor? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklemiyor?
CSS mümkün olan her yerde içeriği gizlemez. Bu veri kaybına neden olur. Veri kaybıyla ilgili sorun, bunu fark etmeyebilmenizdir. Web sitesi ziyaretçileri de fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu dolduramıyorsa bu büyük bir sorun olabilir! Bunun yerine, CSS görünür şekillerde taşar. Böylece bir sorun olduğunu görme olasılığınız yükselir. En kötü ihtimalle, bir site ziyaretçisi içeriğin çakıştığını size bildirir.
Bir kutuyu width veya height ile kısıtlarsanız, CSS ne yaptığınızı bildiğiniz konusunda size güvenir. CSS, taşma potansiyelini yönettiğinizi varsayar. Genel olarak, kutu metin içerdiğinde kutunun boyutunu kısıtlamak sorunludur. Siteyi tasarlarken beklediğinizden daha fazla metin olabilir veya metin fontu daha büyük olabilir. (örneğin, kullanıcı yazı tipi boyutunu büyütmüşse)
Sonraki iki yazıda boyutlandırmayı kontrol etmeye yönelik farklı yaklaşımlara bakacağız. Ancak, sabit bir boyutta çalışıyorsak taşmanın nasıl davranacağını da kontrol edebilirsiniz. Hadi okumaya devam edelim!
Taşma özelliği
overflow özelliği ile bir elemanın taşma kontrolünü sağlarsınız. Tarayıcıya nasıl davranması gerektiği konusunda talimat verirsiniz. Taşmanın varsayılan değeri visible‘dır. Bu default ile içeriği taştığında da görebiliriz.
İçeriği taştığında kırpmak için de ayarlayabilirsiniz, bunun için overflow:hidden kullanırız. Bu tam olarak söylediklerini yapar: taşmayı gizler. Bunun bazı içerikleri görünmez yapabileceğine dikkat etmeniz gerekir. Bunu yalnızca içeriği gizlemek sorun yaratmayacaksa yapmalısınız.
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
Ya da bunun yerine, içerik taştığında kaydırma çubukları ekleyebiliriz. overflow: scroll kullanıldığında kaydırma çubukları görüntülenir. Görünür kaydırma çubukları olan tarayıcılar, taşacak kadar içerik olmasa bile kaydırma çubuklarını her zaman görüntüler. Bu, kaptaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi veya kaybolması yerine, düzeni tutarlı tutma avantajını sunar.
Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırma gerekmese bile kaydırma çubuklarının nasıl kaldığına dikkat edin.
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: scroll;
}<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
Yukarıdaki örnekte sadece y ekseninde kaydırma yapmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görüntülüyoruz. Sadece y ekseninde kaydırmak için overflow-y özelliğini kullanabilirsiniz; overflow-y: scroll.
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow-y: scroll;
}<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
Uzun sözcükleri yerleştirmek için önerilen bir yol olmasa da, overflow-x kullanarak x ekseninde de overflow kullanabiliriz. Küçük bir kutuda uzun bir kelimeniz varsa, word-break veya overflow-wrap özelliklerini kullanmayı düşünebilirsiniz. Ek olarak, CSS’de öğeleri boyutlandırma bölümünde tartışılan yöntemlerden bazıları, değişen miktarlarda içerikle daha iyi ölçeklenen kutular oluşturmanıza da yardımcı olabilir.
.word {
border: 5px solid #333333;
width: 100px;
font-size: 250%;
overflow-x: scroll;
}<div class="word">Overflow</div>
scroll ile olduğu gibi, kaydırma çubuğu yeterli içerik olup olmadığına bakılmaksızın görüntülenir.
Not : overflow özelliğini kullanarak x ve y kaydırmasını iki değer ileterek belirtebilirsiniz. İki anahtar kelime belirtilirse, ilki için overflow-x geçerlidir ve ikincisi için overflow-y geçerlidir. Tek değer verildiğinde ise, hem overflow-x ve hem overflow-y de aynı değere ayarlanır. Örneğin, overflow: scroll hidden kullanılırsa overflow-x‘in değeri scroll ve overflow-y‘nin değeri hidden olur.
Kaydırma çubuklarının yalnızca kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsanız overflow: auto kullanın. Bu, tarayıcının kaydırma çubuklarını gösterip göstermeyeceğini belirlemesini sağlar.
Aşağıdaki örnekte, içeriği kutuya sığana kadar kaldırın. Kaydırma çubuklarının kaybolduğunu görmelisiniz.
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: auto;
}<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
Taşma, bir Blok Biçimlendirme Bağlamı oluşturur
scroll veya auto gibi bir taşma değeri kullandığınızda, bir Blok Biçimlendirme Bağlamı (BFC) oluşturursunuz. overflow değerini değiştirdiğiniz kutunun içeriği, bağımsız bir düzen elde eder. Kapsayıcının dışındaki içerik, kapsayıcıya giremez ve bu kapsayıcıdan çevredeki yerleşime de hiçbir şey geçemez. Bu, kaydırma davranışını etkinleştirir. Tutarlı bir kaydırma düzeni oluşturmak için tüm kutu içeriği ile dış içerik üst üste gelmemelidir.
Web tasarımında istenmeyen taşma
Modern düzen yöntemleri (sonraki yazılarda bakacağız) taşmayı yönetir. Bir web sayfasında ne kadar içerik olacağına dair varsayımlar veya bağımlılıklar olmadan büyük ölçüde doğru çalışırlar.
Bir site geliştirirken, taşmayı daima aklınızda bulundurun. Büyük ve küçük miktarlarda içerik içeren tasarımları test edin. Metnin yazı tipi boyutlarını artırın. Genel olarak CSS’nizin sağlam bir şekilde çalıştığından emin olun. Kaydırma çubuklarını özellikle istemiyorsanız taşma değerini muhtemelen değiştirmek istemeyeceksiniz.
Becerilerinizi test edin!
Bu yazıdan alınacak çok şey var! En önemli bilgiyi hatırlayabiliyor musunuz?
Özet
Bu yazı taşma kavramını tanıttı. Varsayılan CSS’nin taşan içeriği görünmez yapmaktan kaçındığını anlamalısınız. Olası taşmayı yönetebileceğinizi, ve ayrıca, çalışmayı yanlışlıkla sorunlu taşmaya neden olmadığından emin olmak için test etmeniz gerektiğini unutmayın.