`overflow` dan properti `contain`

Articles

Artikel ini menjelaskan properti overflow dan contain.

Anda dapat mempelajari cara mengatur seperti menampilkan scrollbars dan memotong konten dengan properti overflow.

YouTube Video

HTML untuk Pratinjau

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` dan properti `contain`

`overflow`

Properti CSS overflow adalah properti penting yang mengatur bagaimana menampilkan konten elemen ketika melebihi ukuran kotaknya. Properti ini sering digunakan untuk mengatur tata letak dan antarmuka pengguna halaman web, membantu mengelola tampilan scrollbar, pemotongan, dan kelebihan konten elemen.

Dasar-dasar Properti `overflow`

Properti overflow memiliki empat nilai utama: visible, hidden, scroll, dan auto.

`visible`

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

visible adalah nilai default, di mana konten elemen meluap melebihi ukuran kotak tetapi tetap terlihat. Bagian yang meluap mungkin tumpang tindih dengan elemen lain, tetapi scrollbar tidak ditampilkan secara khusus.

Fitur:

Konten ditampilkan tanpa batasan.
Scrollbar tidak ditampilkan.

`hidden`

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

hidden adalah pengaturan di mana jika konten elemen melebihi ukuran kotak, bagian yang meluap tidak ditampilkan. Scrollbar tidak akan ditampilkan, dan konten yang meluap tidak terlihat.

Fitur:

Ketika konten melebihi batas elemen, bagian yang berlebih akan disembunyikan.
Scrollbar tidak ditampilkan.

`scroll`

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

Ketika scroll digunakan, scrollbar akan ditampilkan secara paksa jika konten elemen melebihi kotaknya. Bahkan jika konten tidak meluap, scrollbar tetap ditampilkan.

Fitur:

Scrollbar ditampilkan bahkan jika konten sesuai dengan batas elemen.
Pengguliran dimungkinkan dalam arah horizontal dan vertikal.

`auto`

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

auto menampilkan scrollbar hanya ketika konten meluap; jika konten sesuai dengan kotak elemen, scrollbar tidak akan ditampilkan.

Fitur:

Scrollbar muncul hanya ketika konten meluap.
Secara otomatis membuat area yang dapat digulir.

`overflow-x` dan `overflow-y`

1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

Properti overflow juga dapat dikontrol secara individual untuk arah horizontal (sumbu x) dan vertikal (sumbu y).

Dengan cara ini, Anda dapat menggunakan overflow-x dan overflow-y untuk mengatur tampilan bilah gulir vertikal dan horizontal secara individual.

Pertimbangan untuk Overflow

Saat menggunakan properti overflow, ada beberapa hal yang harus Anda perhatikan.

Dampak pada desain karena tampilan bilah gulir

Menggunakan scroll atau auto untuk menampilkan bilah gulir dapat mengganggu desain keseluruhan halaman. Terutama jika elemen ditempatkan di tepi kanan atau bawah, bilah gulir dapat membuatnya kurang terlihat.

Perilaku bawaan browser

Cara bilah gulir ditampilkan dan berfungsi dapat berbeda antar browser. Terutama antara Windows dan macOS, terdapat perbedaan dalam gaya tampilan bilah gulir, yang dapat menyebabkan desain tidak terlihat seperti yang diinginkan. Penting untuk melakukan pengujian lintas browser.

Overflow pada elemen anak

Mengatur overflow: hidden pada elemen induk akan menyembunyikan elemen anak yang melebihi kotak elemen induk. Ini dapat menyebabkan pop-up dan jendela modal tidak ditampilkan dengan benar.

`overflow: clip` (CSS Level 3)

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

Dalam spesifikasi CSS baru, sebuah nilai yang disebut overflow: clip juga telah diperkenalkan. Ini mirip dengan hidden, tetapi tidak memungkinkan pengguliran dan hanya memotong konten. Saat ini, hanya didukung oleh beberapa browser.

Fitur:

Jika konten meluap, bagian tersebut akan sepenuhnya tersembunyi.
Scrollbar tidak ditampilkan.

Kesimpulan

Properti CSS overflow adalah alat penting untuk mengontrol tampilan konten dalam desain web. Dengan mengelola situasi di mana konten melebihi kotak elemen dan menerapkan bilah gulir atau pemotongan yang sesuai, ini memberikan antarmuka yang lebih ramah pengguna bagi pengguna. Selain itu, menggunakan overflow-x dan overflow-y memungkinkan kontrol yang lebih terperinci. Dengan nilai ini, bilah gulir akan ditampilkan secara paksa ketika konten elemen melebihi kotak. Bahkan jika konten tidak meluap, scrollbar tetap ditampilkan.

`contain`

Ikhtisar properti `contain`

Properti CSS contain membatasi pengaruh sebuah elemen terhadap elemen lain dan seluruh halaman, serta mengoptimalkan proses rendering browser. Secara khusus, ini membatasi reflow dan repaint dengan mencegah perubahan gaya atau tata letak pada elemen memengaruhi konten di luar elemen tersebut.

Hal ini penting untuk kinerja halaman web dan sangat efektif untuk situs web dengan tata letak yang kompleks atau konten dalam jumlah besar.

Nilai-nilai untuk `contain`

Properti contain memiliki nilai-nilai berikut:.

`layout`

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

layout menerapkan pembatasan yang terkait dengan tata letak. Dengan menggunakan nilai ini, ukuran dan posisi elemen tidak memengaruhi elemen lain. Sebagai contoh, meskipun ukuran elemen berubah secara internal, perubahan tersebut tidak memengaruhi tata letak eksternal.

`paint`

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

paint membatasi dampak dari painting (penggambaran). Ketika nilai ini ditentukan, penggambaran dalam elemen tidak lagi memengaruhi elemen eksternal, sehingga membatasi jangkauan perhitungan repaint.

`size`

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

size memastikan bahwa ukuran elemen tidak bergantung pada elemen eksternal. Secara khusus, ini mencegah perubahan ukuran elemen anak memengaruhi ukuran elemen induk, sehingga meningkatkan stabilitas tata letak.

`style`

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

style memastikan bahwa gaya elemen tidak memengaruhi elemen eksternal. Sebagai contoh, menentukan contain: style; memastikan bahwa perubahan gaya dalam elemen tersebut tidak memengaruhi elemen lain, sehingga mengurangi jangkauan perhitungan ulang.

`content`

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

content adalah nilai gabungan yang menerapkan layout, paint, size, dan style. Dengan menggunakan ini, Anda dapat memastikan bahwa tata letak, penggambaran, ukuran, dan gaya elemen sama sekali tidak memengaruhi elemen eksternal.

Manfaat kinerja

Alasan utama menggunakan properti contain adalah untuk meningkatkan kinerja halaman web. Secara khusus, hal ini efektif dalam situasi berikut.

Optimisasi Reflow: Ketika ukuran atau tata letak elemen berubah, dampaknya dapat dibatasi pada cakupan sekecil mungkin. Ini mengurangi cakupan reflow yang tidak perlu (perhitungan ulang tata letak) dan mengurangi beban pada browser.
Mengurangi Repaint: Dengan membatasi area penggambaran, bagian yang perlu di-repaint ketika gaya atau konten elemen berubah dapat diminimalkan.
Pengembangan Berbasis Komponen: Karena setiap komponen atau modul beroperasi secara independen dari elemen lain, hal ini meningkatkan kinerja setiap komponen bahkan dalam aplikasi web berskala besar.

Catatan

Saat menggunakan properti contain, Anda harus mengingat poin-poin berikut.

Memahami Lingkup Aplikasi: Properti contain berguna untuk mengoptimalkan kinerja, tetapi tidak boleh diterapkan pada setiap elemen. Penting untuk menggunakannya secara tepat di tempat yang sesuai. Sebagai contoh, menggunakan properti ini pada elemen yang sering berubah atau bagian dari struktur DOM besar dapat malah menurunkan kinerja.
Kompatibilitas Peramban: Properti contain adalah fitur CSS yang relatif baru dan belum sepenuhnya didukung oleh semua peramban. Properti ini didukung oleh peramban utama (Chrome, Firefox, Edge, Safari), tetapi mungkin tidak berlaku pada versi lama.

Kesimpulan

Properti contain pada CSS adalah alat yang kuat untuk mengoptimalkan kinerja halaman web dan aplikasi. Dengan membatasi dampak elemen tertentu pada elemen lainnya, properti ini mengurangi biaya reflow dan repaint, serta menyederhanakan proses rendering secara keseluruhan. Namun, penting untuk mempertimbangkan dengan hati-hati di mana properti ini akan diterapkan dan menggunakannya secara tepat.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Perbandingan antara Flexbox, Grid, dan Kolom Tata Letak

`overflow` dan properti `contain`

YouTube Video

HTML untuk Pratinjau

overflow dan properti contain

overflow

Dasar-dasar Properti overflow

visible

hidden

scroll

auto

overflow-x dan overflow-y

Pertimbangan untuk Overflow

Dampak pada desain karena tampilan bilah gulir

Perilaku bawaan browser

Overflow pada elemen anak

overflow: clip (CSS Level 3)

Kesimpulan

contain

Ikhtisar properti contain

Nilai-nilai untuk contain

layout

paint

size

style

content

Manfaat kinerja

Catatan

Kesimpulan

YouTube Video

`overflow` dan properti `contain`

`overflow`

Dasar-dasar Properti `overflow`

`visible`

`hidden`

`scroll`

`auto`

`overflow-x` dan `overflow-y`

`overflow: clip` (CSS Level 3)

`contain`

Ikhtisar properti `contain`

Nilai-nilai untuk `contain`

`layout`

`paint`

`size`

`style`

`content`