Articles
CSS'e Giriş
`overflow` ve `contain` Özellikleri

`overflow` ve `contain` Özellikleri

Bu makale, overflow ve contain özelliklerini açıklar.

overflow özelliği ile kaydırma çubuklarını görüntüleme veya içeriği kırpma gibi özellikleri nasıl açıklayacağınızı öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow ve contain Özellikleri

overflow

CSS overflow özelliği, bir elemanın içeriklerinin kutusunun boyutunu aştığında nasıl görüntüleneceğini kontrol eden önemli bir özelliktir. Bu özellik, kaydırma çubuklarını yönetmek, kırpma işlemlerini kontrol etmek ve eleman taşmalarını düzenlemek için sıklıkla web sayfalarının düzeni ve kullanıcı arayüzünü şekillendirmek için kullanılır.

overflow Özelliğinin Temelleri

overflow özelliği dört ana değere sahiptir: visible, hidden, scroll ve auto.

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible varsayılan değerdir; bir elemanın içeriği kutusunun boyutunu aşar ancak yine de görünmeye devam eder. Taşan kısımlar diğer elemanların üzerine gelebilir, ancak kaydırma çubukları özellikle gösterilmez.

Özellikler:

  • İçerik sınırlama olmaksızın görüntülenir.
  • Kaydırma çubukları gösterilmez.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden, bir elemanın içeriği kutusunun boyutunu aşarsa taşan kısımların görüntülenmediği ayardır. Kaydırma çubukları görüntülenmez ve taşan içerik görünmez olur.

Özellikler:

  • İçerik elemanın sınırını aştığında, fazla kısım gizlenir.
  • Kaydırma çubukları gösterilmez.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

scroll kullanıldığında, eleman içeriği kutuyu aşıyorsa kaydırma çubukları zorunlu olarak görüntülenir. İçerik taşmasa bile kaydırma çubukları her zaman görüntülenir.

Özellikler:

  • İçerik elemanın sınırına sığsa bile kaydırma çubukları gösterilir.
  • Kaydırma yatay ve dikey yönlerde mümkün olur.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto yalnızca içerik taştığında kaydırma çubuklarını görüntüler; içerik elemanın kutusuna sığarsa hiçbir kaydırma çubuğu gösterilmez.

Özellikler:

  • Kaydırma çubukları yalnızca içerik taştığında görünür.
  • Otomatik olarak kaydırılabilir bir alan oluşturur.
overflow-x ve overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

overflow özelliği, yatay (x ekseni) ve dikey (y ekseni) yönler için ayrı ayrı kontrol edilebilir.

Bu şekilde, overflow-x ve overflow-y kullanarak dikey ve yatay kaydırma çubuklarının görüntüsünü ayrı ayrı ayarlayabilirsiniz.

Taşma İçin Dikkat Edilmesi Gerekenler

overflow özelliğini kullanırken dikkat etmeniz gereken bazı noktalar vardır.

Kaydırma çubuklarının görüntülenmesinin tasarıma etkileri

Kaydırma çubuklarını görüntülemek için scroll veya auto kullanmak, sayfanın genel tasarımını bozabilir. Özellikle öğeler sağ veya alt kenarda yerleştirilmişse, kaydırma çubukları bunları daha az görünür hale getirebilir.

Varsayılan tarayıcı davranışı

Kaydırma çubuklarının görüntülenme şekli ve işlevi tarayıcılar arasında farklılık gösterebilir. Özellikle Windows ve macOS arasında, kaydırma çubuğu görüntüleme stillerinde farklar vardır ve bu, tasarımların istenildiği gibi görünmemesine neden olabilir. Tarayıcılar arası test yapmak önemlidir.

Alt öğelerin taşması

Bir üst öğeye overflow: hidden ayarlandığında, üst öğenin kutusunu aşan alt öğeler gizlenir. Bu, açılır pencerelerin ve modal pencerelerin doğru görüntülenmemesine neden olabilir.

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

Yeni CSS spesifikasyonunda, overflow: clip adlı bir değer de tanıtılmıştır. Bu, hidden özelliğine benzerdir ancak kaydırmaya izin vermez ve yalnızca içeriği keser. Şu anda yalnızca bazı tarayıcılar tarafından desteklenmektedir.

Özellikler:

  • İçerik taşarsa, taşan kısım tamamen gizlenir.
  • Kaydırma çubukları gösterilmez.

Sonuç

CSS overflow özelliği, web tasarımında içeriğin görüntülenmesini kontrol etmek için temel bir araçtır. İçeriğin elemanın kutusunu aştığı durumları yöneterek ve uygun kaydırma çubukları veya kesme uygulayarak, kullanıcılara daha kullanıcı dostu bir arayüz sunar. Ayrıca, overflow-x ve overflow-y kullanımı daha ince ayar yapılmış bir kontrol sağlar. Bu değer ile, eleman içeriği kutuyu aştığında kaydırma çubukları zorunlu olarak görüntülenir. İçerik taşmasa bile kaydırma çubukları her zaman görüntülenir.

contain

contain özelliğine genel bakış

CSS contain özelliği, bir öğenin diğer öğeler ve tüm sayfa üzerindeki etkisini sınırlar ve tarayıcının işleme sürecini optimize eder. Özellikle, bir öğedeki stil veya düzen değişikliklerinin o öğenin dışındaki içeriği etkilemesini önleyerek yeniden akış (reflow) ve yeniden çizimi (repaint) sınırlar.

Bu, web sayfası performansı için önemlidir ve özellikle karmaşık düzenlere veya büyük miktarda içeriğe sahip web siteleri için etkili bir yöntemdir.

contain için değerler

contain özelliği aşağıdaki değerlere sahiptir:.

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout, düzenle ilgili kısıtlamalar uygular. Bu değeri kullanarak, bir öğenin boyutu ve konumu diğer öğeleri etkilemez. Örneğin, bir öğe içsel olarak yeniden boyutlandırılsa bile, bu değişiklik dış düzeni etkilemez.

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint, çizimin (painting) etkilerini sınırlar. Bu değer belirtildiğinde, öğe içinde yapılan çizim artık dış öğeleri etkilemez ve böylece yeniden çizim hesaplamalarının kapsamını sınırlar.

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size, bir öğenin boyutunun dış öğelere bağlı olmamasını sağlar. Özellikle, alt öğelerin yeniden boyutlandırılmasının, üst öğenin boyutunu etkilemesini önler ve bu sayede düzenin (layout) stabilitesini artırır.

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style, bir öğenin stilinin dış öğeleri etkilememesini sağlar. Örneğin, contain: style; belirtmek, o öğedeki stil değişikliklerinin diğer öğeleri etkilemediğini ve yeniden hesaplama kapsamını azalttığını garanti eder.

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content, layout, paint, size ve style değerlerini bir araya getiren birleşik bir değerdir. Bu değeri kullanarak, bir öğenin düzeninin, çiziminin, boyutunun ve stilinin dış öğeler üzerinde hiçbir etkisinin olmadığını garanti edebilirsiniz.

Performans avantajları

contain özelliğini kullanmanın ana nedeni, web sayfası performansını artırmaktır. Özellikle, aşağıdaki durumlarda etkilidir:.

  1. Yeniden Akış Optimizasyonu: Bir öğenin boyutu veya düzeni değiştiğinde, etkisi mümkün olan en küçük kapsamla sınırlandırılabilir. Bu, gereksiz yeniden akışların (düzen yeniden hesaplamaları) kapsamını azaltır ve tarayıcı üzerindeki yükü hafifletir.

  2. Yeniden Çizimlerin Azaltılması: Çizim alanını sınırlayarak, bir öğenin stili veya içeriği değiştiğinde yeniden çizilmesi gereken alan en aza indirilebilir.

  3. Bileşen Tabanlı Geliştirme: Her bir bileşen veya modül diğer öğelerden bağımsız olarak çalıştığı için, büyük ölçekli web uygulamalarında bile her bileşenin performansını artırır.

Notlar

contain özelliğini kullanırken aşağıdaki noktalara dikkat etmelisiniz.

  1. Uygulama Kapsamını Anlamak: contain özelliği performans optimizasyonu için faydalıdır, ancak her elemana uygulanmamalıdır. Uygun yerlerde doğru bir şekilde kullanmak önemlidir. Örneğin, sık sık değişen elementler veya büyük bir DOM yapısının parçalarında kullanmak performansı olumsuz etkileyebilir.

  2. Tarayıcı Uyumluluğu: contain özelliği nispeten yeni bir CSS özelliğidir ve tüm tarayıcılar tarafından tam olarak desteklenmemektedir. Ana tarayıcılarda (Chrome, Firefox, Edge, Safari) desteklenmektedir, ancak eski sürümlerde uygulanamayabilir.

Sonuç

CSS contain özelliği, web sayfalarının ve uygulamaların performansını optimize etmek için güçlü bir araçtır. Belirli bir elementin diğerleri üzerindeki etkisini sınırlayarak reflow ve repaint maliyetlerini azaltır, genel işleme sürecini hızlandırır. Ancak, nerede uygulanacağını dikkatlice değerlendirmek ve uygun şekilde kullanmak önemlidir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Flexbox, Grid ve Kolon Düzenlerinin Karşılaştırması