CSS “overflow” Özelliği Kullanımı

Bu yazımızda, web sayfalarında sıkça karşılaşılan sorunlardan biri olan içerik taşmalarında imdadımıza yetişen CSS “overflow” özelliği hakkında detaylı bir bilgi vereceğiz.

CSS “overflow” Özelliği

“Overflow”, bir kutunun içindeki içeriğin (metin, görsel vs.) kutunun sınırlarını aştığında nasıl bir davranış sergileyeceğini belirtir. Özellikle de, bir element için genişlik veya yükseklik değerleri belirlediğimizde yaşadığımız taşmaları aşmak adına sık başvurduğumuz bir özelliktir.

“Peki, overflow özelliği hangi değerlere sahip?” diye soracak olursanız cevap olarak aşağıdaki listeyi hazırladım:

• visible: Bu varsayılan değerdir. Eğer içerik kutunun sınırlarını aşarsa, içerik taşar ve kesilmez.
• hidden: İçerik kutunun sınırlarını aştığında, taşan içerik gizlenir.
• scroll: Taşan içerik için yatay ve/veya dikey kaydırma çubukları ekler, böylece kullanıcı içeriği kaydırarak görebilir.
• auto: Tarayıcıya, eğer içerik taşıyorsa kaydırma çubukları eklemesi için yetki verir. Eğer içerik taşmıyorsa, kaydırma çubuğu gösterilmez.

“overflow-x” ve “overflow-y” Kullanımı

Bazen sadece yatay veya sadece dikey taşmaları kontrol etmek isteyebiliriz. Bu durumda overflow-x ve overflow-y özelliklerini kullanabiliriz. Codepen üzerinden etkilerini gözlemleyebilirsiniz:

See the Pen CSS Overflow by 1kodum (@1kodum) on CodePen.

CSS’in overflow özelliği, içerik taşmalarını kontrol altında tutmamızı sağlar. Bu özellik, responsive tasarım uygularken veya belirlenmiş boyutlardaki kutuları kullanırken oldukça işimize yarar. İçeriğin nasıl gösterileceğini belirleyerek kullanıcı deneyimini artırabiliriz.