CSS taşması, bir öğenin kutusuna sığmayan içeriğin nasıl işleneceğini kontrol eder; bu, kaydırma ve fazla içeriğin görünür veya gizli olmasını sağlayan önemli bir css parametresidir.
Taşan içerik gizlenebilir, kaydırılabilir veya gösterilebilir. Yaygın değerler: visible, hidden, scroll, auto.
Tasarımın düzenli görünüşünü korumak ve içerik arasında ortaya çıkabilecek çakışmaları engellemek için özel css kodlarından birinin kullanılması zorunluluğu vardır.
Bu konuya anlam getirmek için, MMOZirve geliştiricisinin önerdiği css örnekini incelemeye çalışalım.
CSS:
Taşma: auto Bu özellik, içerik kutusunun genişliğini aştığında kaydırma çubuğunun otomatik olarak görünmesi sağlıyor, böylece kullanıcılar geniş içeriği görebilir.
Kutu, siyah kenarlıklı sabit genişlik ve yüksekliğe sahiptir.
Kutu içinde fazla metin kaydırılarak görüntülenebilir.
Sözdizimi:
Özellik Değerleri
Taşma özelliği aşağıdaki değerleri içerir:
visible: İçerik kırpılmaz ve öğe kutusunun dışında görüntülenir.
hidden: Taşma kırpılır ve fazla içerik görünmez.
scroll: Taşma kırpılır, ancak içeriği görmek için kaydırma çubuğu eklenir. Kaydırma çubuğu yatay veya dikey olabilir.
auto: Gerektiğinde otomatik olarak kaydırma çubuğu ekler.
overflow-x ve overflow-y: Taşmanın yatay (x) veya dikey (y) olarak nasıl kontrol edileceğini belirtir.
CSS Taşma Örnekleri
Örnek 1: Bu örnekte overflow: visible; değeri kullanılır.
CSS:
Örnek 2: Bu örnekte overflow: scroll; özelliğini kullanıyoruz.
CSS:
Örnek 3: Bu örnekte overflow: auto; özelliğiyiz.
CSS:
CSS overflow kullanırken dikkat edilmesi gereken başlıca noktalar şunlardır:
Taşan içerik gizlenebilir, kaydırılabilir veya gösterilebilir. Yaygın değerler: visible, hidden, scroll, auto.
Tasarımın düzenli görünüşünü korumak ve içerik arasında ortaya çıkabilecek çakışmaları engellemek için özel css kodlarından birinin kullanılması zorunluluğu vardır.
Bu konuya anlam getirmek için, MMOZirve geliştiricisinin önerdiği css örnekini incelemeye çalışalım.
CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 40px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<!--MMOZirve Web Geliştirme CSS Eğitimi-->
<div>
Bu, CSS taşmasına bir örnektir. Kutunun içindeki içerik sığmayacak kadar uzun olduğunda, geri kalanını görmenizi sağlayan bir kaydırma çubuğu görünür.
</div>
</body>
</html>Taşma: auto Bu özellik, içerik kutusunun genişliğini aştığında kaydırma çubuğunun otomatik olarak görünmesi sağlıyor, böylece kullanıcılar geniş içeriği görebilir.
Kutu, siyah kenarlıklı sabit genişlik ve yüksekliğe sahiptir.
Kutu içinde fazla metin kaydırılarak görüntülenebilir.
Sözdizimi:
overflow: visible | hidden | scroll | auto;Özellik Değerleri
Taşma özelliği aşağıdaki değerleri içerir:
visible: İçerik kırpılmaz ve öğe kutusunun dışında görüntülenir.
hidden: Taşma kırpılır ve fazla içerik görünmez.
scroll: Taşma kırpılır, ancak içeriği görmek için kaydırma çubuğu eklenir. Kaydırma çubuğu yatay veya dikey olabilir.
auto: Gerektiğinde otomatik olarak kaydırma çubuğu ekler.
overflow-x ve overflow-y: Taşmanın yatay (x) veya dikey (y) olarak nasıl kontrol edileceğini belirtir.
CSS Taşma Örnekleri
Örnek 1: Bu örnekte overflow: visible; değeri kullanılır.
CSS:
<!DOCTYPE>
<html>
<!--MMOZirve Web Geliştirme CSS Eğitimi-->
<head>
<style>
p {
width: 100px;
height: 80px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>
MMOZirve
</h2>
<p>
CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
</p>
</body>
</html>Örnek 2: Bu örnekte overflow: scroll; özelliğini kullanıyoruz.
CSS:
<!DOCTYPE>
<html>
<html>
<!--MMOZirve Web Geliştirme CSS Eğitimi-->
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: scroll;
}
</style>
</head>
<body>
<h2>
MMOZirve Web Geliştirme Css Eğitimi
</h2>
<p>
CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya
kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
</p>
</body>
</html>Örnek 3: Bu örnekte overflow: auto; özelliğiyiz.
CSS:
<!DOCTYPE>
<html>
<!--MMOZirve Web Geliştirme CSS Eğitimi-->
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: auto;
}
</style>
</head>
<body>
<h2>
MMOZirve Web Geliştirme CSS Eğitimi
</h2>
<p>
CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya
kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
</p>
</body>
</html>CSS overflow kullanırken dikkat edilmesi gereken başlıca noktalar şunlardır:
- Sabit yükseklik veya genişlik olmadan overflow etkisizdir.
Bir öğe boyutlandırıldığında taşma oluşabilir ve overflow davranışı gözlemlenebilir, çünkü boyutu belirlendiğinde sınırını aşan içeriklere karşı davranışını belirler. - scroll her zaman kaydırma çubuğu oluşturur.
İçerik sığsa bile çubuklar görünür; bu nedenle gereksiz kaydırma çubuğu oluşabilir. - auto en pratik seçenektir fakat düzen değişikliklerine yol açabilir.
İçerik arttığında kaydırma çubuğu belirdiği için tasarım kayabilir. - hidden içerik kaybına neden olabilir.
Mobilde veya küçük ekranlarda metnin kesilmesine dikkat edilmelidir. - overflow-x ve overflow-y farklı kombinasyonlar oluşturur.
Tek yönde kaydırma isteniyorsa diğer yönün doğru ayarlandığından emin olunmalıdır. - Scrollbars farklı tarayıcılarda farklı görünür.
Tasarım uyumsuzluklarını önlemek için çapraz tarayıcı test yapılmalıdır. - Pozisyonlandırma ile birlikte kullanıldığında davranış değişebilir.
Oluşturulan relative containerlar ve içerisinde absolute, fixed veya flex/container yapıları bulunan elemetler için, overflow sonuçları farklılık gösterebilir, özellikle overflow'ın containerdan büyük olduğunda. - Mobilde yatay overflow tasarımın kaymasına sebep olabilir.
Küçük bir genişleme bile tüm sayfanın yana kaymasına yol açabilir.
