Articles
Pengenalan kepada CSS
`overflow` dan `contain` Properti

`overflow` dan `contain` Properti

Artikel ini menerangkan overflow dan contain properti.

Anda boleh belajar cara menerangkan perkara seperti memaparkan tatalan dan pemotongan dengan properti overflow.

YouTube Video

HTML untuk Pratonton

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 contain Properti

overflow

Properti overflow dalam CSS adalah properti penting yang mengawal cara memaparkan kandungan elemen apabila ia melebihi saiz kotaknya. Ia sering digunakan untuk membentuk susun atur dan antaramuka pengguna laman web, membantu mengurus paparan tatalan, pemotongan, dan lebihan elemen.

Asas-asas Properti overflow

Properti overflow mempunyai 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 lalai, di mana kandungan elemen melimpah melebihi saiz kotak tetapi masih kelihatan. Bahagian yang melimpah mungkin bertindih dengan elemen lain, tetapi tatalan tidak dipaparkan secara khusus.

Ciri-ciri:

  • Kandungan dipaparkan tanpa had.
  • Tiada tatalan ditunjukkan.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden adalah tetapan di mana jika kandungan elemen melebihi saiz kotak, bahagian yang melimpah tidak dipaparkan. Tiada tatalan yang dipaparkan, dan kandungan yang melimpah tidak akan kelihatan.

Ciri-ciri:

  • Apabila kandungan melebihi sempadan elemen, bahagian lebihan disembunyikan.
  • Tiada tatalan ditunjukkan.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

Apabila scroll digunakan, tatalan dipaparkan secara paksa jika kandungan elemen melebihi kotaknya. Walaupun kandungan tidak melimpah, tatalan sentiasa dipaparkan.

Ciri-ciri:

  • Tatalan dipaparkan walaupun kandungan sesuai di dalam sempadan elemen.
  • Penatalan boleh dilakukan dalam arah mendatar dan menegak.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto memaparkan tatalan hanya apabila kandungan melimpah; jika kandungan sesuai di dalam kotak elemen, tiada tatalan akan dipaparkan.

Ciri-ciri:

  • Tatalan muncul hanya apabila kandungan melimpah.
  • Secara automatik mencipta kawasan yang boleh digulung.
overflow-x dan overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

Harta overflow juga boleh dikawal secara individu untuk arah mendatar (paksi x) dan menegak (paksi y).

Dengan cara ini, anda boleh menggunakan overflow-x dan overflow-y untuk menetapkan paparan bar skrol menegak dan mendatar secara individu.

Pertimbangan untuk Overflow

Apabila menggunakan harta overflow, terdapat beberapa perkara yang perlu anda berhati-hati.

Kesan pada reka bentuk disebabkan oleh paparan bar skrol

Menggunakan scroll atau auto untuk memaparkan bar skrol boleh mengganggu reka bentuk keseluruhan laman. Terutamanya, jika elemen diletakkan di tepi kanan atau bawah, bar skrol boleh menjadikannya kurang kelihatan.

Perilaku pelayar lalai

Cara bar skrol dipaparkan dan berfungsi boleh berbeza antara pelayar. Terutamanya antara Windows dan macOS, terdapat perbezaan dalam gaya paparan bar skrol, yang boleh menyebabkan reka bentuk tidak muncul seperti yang dimaksudkan. Adalah penting untuk menjalankan ujian antara pelayar.

Overflow pada elemen kanak-kanak

Menetapkan overflow: hidden pada elemen induk menyembunyikan elemen kanak-kanak yang melebihi kotak induk. Ini mungkin menyebabkan pop-up dan tetingkap mod tidak dipaparkan dengan betul.

overflow: clip (CSS Level 3) 

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

Dalam spesifikasi CSS yang baru, nilai yang dinamakan overflow: clip juga telah diperkenalkan. Ini adalah serupa dengan hidden, tetapi ia tidak membenarkan penggulungan dan hanya memotong kandungan. Pada masa ini, ia hanya disokong oleh beberapa pelayar.

Ciri-ciri:

  • Jika kandungan melimpah, bahagian tersebut akan tersembunyi sepenuhnya.
  • Tiada tatalan ditunjukkan.

Kesimpulan

Harta overflow CSS adalah alat penting untuk mengawal paparan kandungan dalam reka bentuk web. Dengan menguruskan situasi di mana kandungan melebihi kotak elemen dan dengan menerapkan bar skrol atau pemotongan yang sesuai, ia menyediakan antara muka yang lebih mesra pengguna kepada pengguna. Tambahan pula, menggunakan overflow-x dan overflow-y membolehkan kawalan yang lebih terperinci. Dengan nilai ini, bar skrol dipaparkan secara paksa apabila kandungan elemen melebihi kotak. Walaupun kandungan tidak melimpah, tatalan sentiasa dipaparkan.

contain

Gambaran keseluruhan sifat contain

Sifat contain dalam CSS mengehadkan pengaruh yang dimiliki oleh satu elemen ke atas elemen lain dan keseluruhan halaman, mengoptimumkan proses rendering pelayar. Secara khusus, ia menghadkan aliran semula (reflows) dan pengecatan semula (repaints) dengan menghalang perubahan gaya atau susun atur dalam suatu elemen daripada mempengaruhi kandungan di luar elemen tersebut.

Ini penting untuk prestasi laman web dan sangat berkesan untuk laman web dengan susun atur yang kompleks atau jumlah kandungan yang besar.

Nilai untuk contain

Sifat contain mempunyai nilai-nilai berikut:.

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

layout mengenakan sekatan yang berkaitan dengan susun atur. Dengan menggunakan nilai ini, saiz dan kedudukan suatu elemen tidak akan mempengaruhi elemen lain. Sebagai contoh, walaupun suatu elemen diubah saiznya secara dalaman, perubahan itu tidak akan mempengaruhi susun atur luaran.

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

paint mengehadkan kesan pengecatan (melukis). Apabila nilai ini ditentukan, lukisan dalam elemen tidak lagi mempengaruhi elemen luaran, dengan itu mengehadkan skop pengiraan pengecatan semula.

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

size memastikan bahawa saiz elemen tidak bergantung kepada elemen luaran. Secara khusus, ia menghalang perubahan saiz elemen anak daripada mempengaruhi saiz elemen induk, dengan itu meningkatkan kestabilan susun atur.

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

style memastikan bahawa gaya suatu elemen tidak mempengaruhi elemen luaran. Sebagai contoh, menyatakan contain: style; memastikan bahawa perubahan gaya dalam elemen tersebut tidak akan mempengaruhi elemen lain, seterusnya mengurangkan skop pengiraan semula.

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

content ialah nilai komposit yang menerapkan layout, paint, size, dan style. Dengan menggunakan ini, anda boleh memastikan bahawa susun atur, lukisan, saiz, dan gaya elemen tidak mempunyai kesan ke atas elemen luaran sama sekali.

Manfaat prestasi

Sebab utama menggunakan sifat contain adalah untuk meningkatkan prestasi halaman web. Secara khusus, ia berkesan dalam situasi berikut:.

  1. Pengoptimuman Aliran Semula: Apabila saiz atau susun atur elemen berubah, kesannya boleh dihadkan kepada skop sekecil mungkin. Ini mengurangkan skop aliran semula yang tidak perlu (pengiraan semula susun atur) dan mengurangkan beban pada pelayar.

  2. Mengurangkan Pengecatan Semula: Dengan mengehadkan kawasan lukisan, bahagian yang perlu diwarnakan semula apabila gaya atau kandungan elemen berubah dapat diminimumkan.

  3. Pembangunan Berdasarkan Komponen: Memandangkan setiap komponen atau modul beroperasi secara bebas daripada elemen lain, ia meningkatkan prestasi setiap komponen walaupun dalam aplikasi web berskala besar.

Nota

Apabila menggunakan sifat contain, anda harus mengambil kira perkara-perkara berikut.

  1. Memahami Skop Penggunaan: Sifat contain berguna untuk mengoptimumkan prestasi, tetapi ia tidak patut digunakan pada setiap elemen. Adalah penting untuk menggunakannya dengan sewajarnya di tempat yang sesuai. Sebagai contoh, menggunakannya pada elemen yang sering berubah atau bahagian struktur DOM yang besar mungkin merendahkan prestasi sebaliknya.

  2. Keserasian Penyemak Imbas: Sifat contain ialah ciri CSS yang agak baru dan tidak disokong sepenuhnya oleh semua penyemak imbas. Ia disokong dalam penyemak imbas utama (Chrome, Firefox, Edge, Safari), tetapi mungkin tidak boleh digunakan dalam versi lama.

Kesimpulan

Sifat CSS contain adalah alat yang berkuasa untuk mengoptimumkan prestasi laman web dan aplikasi. Dengan mengehadkan kesan elemen tertentu terhadap elemen lain, ia mengurangkan kos reflow dan repaint, memperkemaskan proses rendering keseluruhan. Walau bagaimanapun, penting untuk mempertimbangkan secara teliti di mana untuk menggunakannya dan menggunakannya dengan betul.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Perbandingan antara Flexbox, Grid, dan Susunan Kolum