Bir kutuya sığmayacak kadar fazla içerik olduğunda taşma olur. Bu derste taşmanın ne olduğunu ve nasıl yönetilceğini öğreneceksin.
| Ön koşullar: | Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım) |
|---|---|
| Amaç: | Taşmayı ve onu nasıl yöneteceğini anlamak. |
CSS'deki her öğe bir kutudur. {{cssxref("width")}} ve {{cssxref("height")}} (veya {{cssxref("inline-size")}} ve {{cssxref("block-size")}}) değerleri atayarak bu kutuların boyutlarını ayarlayabiliriz. Eğer boyutlarını ayarladığımız kutunun içeriği, kutunun boyutları içerisine sığmaz ise içerik kutu dışına çıkar ve biz bunu taşma olarak adlanırırız. CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS düzeninde ilerledikçe ve CSS yazdıkça, daha fazla taşma durumuyla karşılaşacaksın.
Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.
İlk örnek, height niteliği kullanılarak kutunun uzunluğu kısaltılmıştır. Ardından ayrılan alanı aşan içerik ekliyoruz. İçerik kutunun dışına taşar ve aşağıdaki paragrafın üzerinde görüntülenir.
{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}
İkinci örnek, kutu içeriğinde bir kelime vardır ve kutu kelime için çok küçük olacak şekilde boyutlandırıldı. Bu yüzden metin kutunun dışına çıktı.
{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}
CSS'in neden bu kadar dağınık bir şekilde çalıştığını ve içeriği amaçlanan kapsayıcısının dışında görüntülediğini merak edebilirsin. neden taşan içeriği gizlemiyorsun? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklendirmiyorun?
Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmendir. Web sitesi ziyaretçileri fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu tamamlayamazsa, bu büyük bir sorun olabilir! Bunun yerine, CSS içeriğin sığmadığı durumlarda görünür bir şekilde taşar. Bir sorun olduğunu görme olasılığın daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin düzensizliğini size bildirecektir.
Bir kutuya width veya height ile sınırlarsan, CSS ne yaptığını bilmene güvenir. CSS, taşma potansiyelini yönettiğini varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu arttırabilir)
Sonraki iki konu, boyutlandırmayı taşmaya daha az eğilimli şekillerde kontrol etmeye yönelik farklı yaklaşımları açıklar. Bununla birlikte, sabit bir boyuta ihtiyacın varsa, taşmanın nasıl davranacağını da kontrol edebilirsin.
overflow{{cssxref("overflow")}} niteliği bir öğenin taşma kontrolünün nasıl ele alınacağını belirler. Tarayıcıya nasıl davranması gerektiği konusunda talimat verme şeklimiz budur. Taşmanın varsayılan değeri visible'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.
Taşan içeriği gizlemek için de ayarlayabilirsin; overflow: hidden. Bu tam olarak söylediği şeyi yapar: taşmayı gizler. Bunun bazı içerikleri görünmez hale getirebileceğine dikkat edin. Bunu yalnızca içeriği gizlemek soruna neden olmaz ise yapmalısın.
{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}
Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; overflow: scroll. Taşma için yeterli içerik olmasa bile, görünür kaydırma çubuklarına sahip tarayıcılar kullanıldığında, bunları her zaman görüntülenir. Bu, kutudaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi/kaybolması yerine düzeni tatarlı tutma avantajını sunar.
Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırmaya gerek olmasa bile kaydırma çubuklarının nasıl kaldığına dikkat edin.
{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}
Yukarıdaki örnekte, sadece y ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece y ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama overflow-y: scroll.
{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}
{{cssxref("overflow-x")}} uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsin! Küçük bir kutuda uzun bir kelimen varsa, {{cssxref("word-break")}} veya {{cssxref("overflow-wrap")}} niteliklerini kullanmayı düşünebilirsin. Ek olarak, CSS'de öğeleri boyutlandırma bölümünde tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.
{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}
scroll'da olduğu gibi, kaydırma çubuğuna neden olacak kadar içerik olup olmadığına bakılmaksızın kaydırma boyutunda bir kaydırma çubuğu elde edersin.
Not: overflow niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersin. İki anahtar kelime kullanılırsa; örneğin, overflow: scroll hidden'nin açılımı: overflow-x: scrool ve overflow-y: hidden olacak şekilde yorumlanacaktır.
Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, overflow:auto kullanın. Bu, tarayıcının kaydırma çubuklarının görüntülenip görüntülenmemesinin gerekip gerekmediğini belirlemesini sağlar.
Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.
{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}
Not: Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsan; tarayıcın ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -> Genel -> Sarma çubuklarını göster" ayarı)
scroll veya auto gibi bir taşma değeri kullandığında, Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC) oluşturursun. overflow olarak tanımladığın kutunun içeriği bağımsız bir düzen oluşturur. Kutunun dışındaki hiç bir içerik bu kutuyu çevreleyen düzenin içerisine giremez. Tutarlı bir kaydırma deneyimi oluşturmak için tüm kutu içeriğinin gösterilebilmesi ve başka öğelerle örtüşmemesi gerektiğinden bu kaydırma davranışını mümkün kılar.
Modern yerleşim yöntemleri (CSS düzeninde açıklanmıştır) taşmayı yönetir ve web sayfasında ne kadar içeriğin olacağı konusunda varsayımları veya bağımlılıkları olmadan çalışırlar.
Bu her zaman bir ölçüt olmamıştır. Geçmişte bazı siteler, kutuların tabanlarını hizalamak için sabit yükseklikte kutular inşa ediyordu. Bu kutuların birbirleriyle hiçbir ilişkisi olmayabiliyordu ve bu kırılgandı. Eski bir uygulamada, içeriğin sayfadaki diğer içeriği kapladığı bir durumla karşılaşabilirisin. Artık bunun taşma ile gerçekleştiğini anlayabilirsin. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemen gerekir.
Bir site geliştirirken her zaman taşmayı aklında bulundurmalısın. Büyük ve az miktarda içeriğe sahip tasarımları test et. Metnin yazı tipi boyutlarını artır. Her zaman CSS'inin sağlam bir şekilde çalıştığından emin olmalısın. İçeriği gizlemek veya kaydırma çubukları eklemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belli kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğun içeriğe sahip bir kutuda)
Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. bkz. Becerilerini test edin: taşma.
Bu derste taşma kavramını tanıttım. CSS'in Varsayılan davranışının, taşan içeriği görünmez hale getirmekten kaçındığını anlamalısın. Olası taşmayı yönetebileceğini ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımını test etmen gerektiğini benimsemelisin.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}