İçerik taşması

Bir konteynere 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 öğreneceksiniz.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla ç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ğinizi anlamak.

Taşma nedir?

CSS'deki her öğe bir kutudur. width ve height (veya inline-size ve 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ız.

CSS, "veri kaybını" önlemeye çalışır

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.

İ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ı.

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 edebilirsiniz. neden taşan içeriği gizlemiyorsunuz? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklenmiyorunuz?

Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmenizdir. 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ız daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin örtüştüğünü size bildirecektir.

Bir kutuya width veya height ile sınırlarsanız, CSS ne yaptığınızı bilmenize güvenir. CSS, taşma potansiyelini yönettiğinizi varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinizden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu artırmışsa)

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ız varsa, taşmanın nasıl davranacağını da kontrol edebilirsiniz.

Taşma niteliği: overflow

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ığında görebiliriz.

İçeriği taştığında kırpmak için ayarlayabilirisiniz; 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 olmasa yapmalısınız.

Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek isterseniz; 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, kaptaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi veya 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.

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 overflow-y niteliğini kullanmamız gerekiyor, tanımlama overflow-y: scroll.

overflow-x uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsiniz! Küçük bir kutuda uzun bir kelimeniz varsa, word-break veya overflow-wrap niteliklerini kullanmayı düşünebilirsiniz. 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şturmanıza yardımcı olabilir.

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 edersiniz.

Not:  overflow niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersiniz. İki anahtar kelime kullanılırsa; örneğin, overflow: scroll hidden'nin açılımı: overflow-x: scrool ve overflow-y: hidden olacak şekilde olacaktır.

Kaydırma çubuklarının sadece 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ı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örmelisiniz.

Not: Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminizin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsanız; tarayıcınız ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -> Genel -> Sarma çubuklarını göster" ayarı)

Taşma, Blok Biçimlendirme Kapsamı oluşturur

scroll veya auto gibi bir taşma değeri kullandığınızda, Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC) oluşturursunuz. overflow olarak tanımladığınız 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.

Web tasarımında istenmeyen taşma

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şabilirisiniz. Artık bunun taşma ile gerçekleştiğini anlayabilirsiniz. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemeniz gerekir.

Bir site geliştirirken her zaman taşmayı aklınızda bulundurun. Büyük ve az miktarda içeriğe sahip tasarımları test edin. Metnin yazı tipi boyutlarını artırın. Her zaman CSS'inizin sağlam bir şekilde çalıştığından emin olun. İçeriği gizlemek veya kaydırma çubukları ekelemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belili kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğunuz içeriğe sahip bir kutuda)

<

Becerilerinizi test edin!

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizi doğrulamak için bazı testler hazırladık. bkz. Becerilerinizi test edin: taşma.

Özet

Bu derste taşma kavramını tanıttık. Varsayılan CSS'in taşan içeriği görünmez hale getirmekten kaçındığını anlamalısınız. Olası taşmayı yönetebileceğinizi ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımınızı test etmeniz gerektiğini keşfettiniz.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'inizi düzenleme
  13. /ol>