The containharta di CSS menunjukkan kepada pelayar bahawa elemen dan keturunannya adalah dianggap sebagai bebas pokok dokumen itu sebanyak mungkin. Ini berpotensi memberikan faedah prestasi dengan pengiraan dalam susun atur, gaya, cat, ukuran, atau kombinasi apa pun untuk kawasan DOM yang terhad dan bukan keseluruhan halaman.
Properti ini mempunyai lima nilai standard dan dua nilai pendek yang menggabungkan variasi nilai standard. Setiap nilai mempunyai beberapa faedah unik dan bersama bergantung pada konteks elemen yang menerapkannya.
Penggunaan khas harta tanah ini adalah elemen yang mengandungi kandungan dari beberapa jenis. Pertimbangkan widget yang membuat data masuk yang mengubah susun atur dan visual keturunan elemen. Elemen lain yang perlu dipertimbangkan adalah elemen yang mengandungi hasil data pihak ketiga, seperti iklan sepanduk, di mana faedah penahanan membolehkan kita tidak memprioritaskan melukis kandungan tertentu, bagaimana menangani ukuran kandungan yang diterima, atau menentukan sama ada kandungan malah mesti kelihatan. Sebaliknya laman web yang kebanyakannya statik, akan mendapat sedikit faedah selain daripada susun atur pertama dan cat ke skrin semasa memuatkan halaman.
Sintaks
div ( contain: none | strict | content | ( size || layout || style || paint ); )div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */
contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )Nilai harta tanah
Susun atur
Yang layoutnilai membendung memberitahu pelayar bahawa tidak ada keturunan elemen ini memberi kesan unsur-unsur lain pada halaman, tidak juga unsur-unsur lain yang mempunyai apa-apa kesan ke atas keturunan elemen yang terkandung. Ini membolehkan penyemak imbas berpotensi mengurangkan jumlah pengiraan yang diperlukan semasa membuat susun atur halaman
Manfaat lain ialah jika elemen yang terkandung di luar layar atau dikaburkan dalam beberapa cara, penyemak imbas mungkin menunda atau mengalihkan pengiraan yang berkaitan ke prioriti yang lebih rendah. Contohnya ialah elemen terkandung yang tidak dilihat pada akhir elemen blok dan permulaan elemen blok kelihatan.
Elemen dengan layoutpenahanan menjadi kotak penampung untuk keturunan yang diposisikan - seperti elemen dengan kedudukan mutlak. Elemen menerima konteks susun baru berkaitan dengan halaman dan z-indeharta x dapat digunakan. Walaupun, sifat arah, seperti topatau left, tidak berlaku.
Walaupun keturunan elemen terkandung mungkin tidak mempengaruhi elemen lain di halaman, mereka masih dapat mempengaruhi elemen nenek moyang terkandung mereka. Sebagai contoh, keturunan boleh menyebabkan ukuran yang terkandung diubah saiznya sebagai reaksi terhadap perubahan. Dalam kes itu, elemen yang terkandung masih berpotensi mempengaruhi unsur-unsur lain di halaman tetapi keturunan tidak akan terlibat dalam pengiraan tersebut.
Demo berikut memberikan penjelasan mudah untuk apa yang berlaku semasa layoutpembendungan digunakan. Apabila mengklik setiap kotak atas, penahanan digunakan dan anak panah merah akan berubah rupa. Kemunculan anak panah merah menunjukkan sama ada keturunan kotak mempengaruhi kotak lain di halaman semasa pengiraan susun atur.
Cat
Yang paintnilai membendung memberitahu pelayar bahawa tidak ada keturunan elemen akan dicat di luar sempadan-kotak unsur. Sekiranya elemen keturunan diposisikan untuk mempunyai bahagian dari kotak pengikatnya yang akan dipotong oleh elemen yang terkandung, border-boxmaka bahagian itu tidak boleh dicat. Sekiranya elemen keturunan diposisikan sepenuhnya di luar elemen yang terkandung, border-boxmaka ia sama sekali tidak dilukis. Ini serupa dengan menerapkan overflow: hidden;elemen, tetapi tanpa faedah melangkau atau mengurangkan pengiraan yang diperlukan.
Manfaat lain adalah bahawa jika elemen yang terkandung tidak dapat dilihat dengan cara tertentu di dalam ruang pandang, maka elemen tersebut mungkin melangkau keturunan elemen ketika melakukan pengiraan lukisan. Contohnya ialah elemen yang diletakkan di luar halaman di sebelah kiri paparan. Sekiranya elemen yang terkandung tidak dapat dilihat, maka ini adalah jaminan bahawa kandungannya tidak akan kelihatan. Oleh itu, mereka tidak perlu terlibat dalam pengiraan cat.
Elemen dengan paintpenahanan juga menjadi kotak penampung untuk keturunan yang diposisikan - seperti elemen dengan kedudukan mutlak. Elemen ini juga menerima konteks susun baru sehubungan dengan halaman dan z-indexharta itu dapat digunakan. Walaupun, sifat arah, seperti topatau left, tidak berlaku.
Elemen menatal mungkin mendapat faedah tambahan dengan meletakkan keturunannya di lapisan cat baru yang dapat membantu prestasi menatal. Biasanya, elemen menatal boleh menyebabkan pengecatan berterusan kerana keturunan muncul dan hilang semasa menatal. Elemen tatal dengan penahan cat berpotensi dapat melupakan pengecatan keturunan bergulir yang berterusan ini.
Demo berikut memberikan penjelasan mudah untuk apa yang berlaku semasa paintpembendungan digunakan. Klik di mana sahaja untuk menukar bekas pada kotak ungu. Apabila pembendungan digunakan beberapa kotak hijau berubah rupa. Penampilan kotak hijau menunjukkan bagaimana ia dicat atau tidak dicat.
Saiz
Yang sizenilai membendung memberitahu pelayar bahawa tidak ada keturunan perlu dipertimbangkan apabila melakukan pengiraan susun atur untuk halaman. Elemen terkandung mesti ada heightdan widthsifat diterapkan, atau akan runtuh menjadi sifar piksel persegi. Hanya elemen itu sendiri yang perlu dipertimbangkan untuk pengiraan susun atur halaman kerana keturunan tidak dapat mempengaruhi ukuran elemen. Keturunan elemen terkandung sepenuhnya dilewatkan dalam pengiraan seperti itu; seolah-olah tidak mempunyai keturunan sama sekali.
Untuk faedah pengoptimuman sepenuhnya, sizepenahanan biasanya digunakan dengan jenis penahanan yang lain.
Elemen dengan sizepenahanan menerima konteks susun baru sehubungan dengan halaman dan z-indexharta itu dapat digunakan. Walaupun, sifat arah, seperti topatau left, tidak berlaku.
Demo berikut memberikan penjelasan ringkas mengenai apa yang berlaku semasa sizepembendungan digunakan. Klik di mana sahaja untuk menukar bekas pada kotak ungu. Apabila bekas digunakan kotak ungu berubah ukuran. Secara lalai ketinggian kotak ungu ditentukan oleh anak-anaknya, tetapi dengan pengekangan, ketinggian mesti ditentukan. Setelah pembendungan digunakan, keturunan tidak lagi terlibat dalam pengiraan susun atur yang berkaitan dengan ukuran.
Gaya
Yang stylenilai membendung memberitahu pelayar yang beberapa ciri-ciri CSS, seperti pembilang dan sebut harga, akan skop kepada elemen yang terkandung.
Yang counter-incrementdan counter-setsifat mesti skop untuk sub-pokok elemen yang terkandung ini. Sekiranya dilanjutkan di luar elemen yang terkandung maka kaunter baru dibuat.
Nilai harta kandungan iaitu open-quote, close-quote, no-open-quote, dan no-close-quotemesti skop untuk sub-pokok elemen yang terkandung ini.
Nilai pembendungan ini dianggap berisiko dikeluarkan dari spesifikasi.
Kandungan
Yang contentnilai pembendungan adalah gabungan kedua-dua susun atur dan cat nilai membendung. Ini adalah setara dengan menerapkan pembendungan dengan cara ini:
div ( contain: layout paint; )Semua potensi keuntungan yang dijelaskan di atas untuk setiap nilai kemudian tersedia untuk elemen yang terkandung. Pembendungan ini dianggap agak selamat untuk diterapkan secara meluas ke banyak elemen di halaman.
Ketat
Yang strictnilai pembendungan adalah gabungan itu layout, paintdan sizenilai-nilai membendung. Ini adalah setara dengan menerapkan pembendungan dengan cara ini:
div ( contain: layout paint size; )Semua potensi keuntungan yang dijelaskan di atas untuk setiap nilai kemudian tersedia untuk elemen yang terkandung.
Sebagai "paling ketat" dari nilai pembendungan, nilai ini harus digunakan dengan pertimbangan yang teliti. Ini disebabkan oleh keperluan dimensi yang dikenakan pada elemen yang terkandung. Dengan syarat-syarat ini, nilai pengekangan ini menawarkan kelebihan prestasi pembendungan yang paling berpotensi.
Sokongan penyemak imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 52 | 69 | Tidak | 79 | Tidak |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Tidak |