The containproperti di CSS menunjukkan ke browser bahwa elemen dan keturunannya dianggap independen dari pohon dokumen sebanyak mungkin. Hal ini berpotensi memberikan keuntungan performa dengan penghitungan tata letak, gaya, gambar, ukuran, atau kombinasi apa pun untuk area terbatas di DOM dan bukan seluruh laman.
Properti memiliki lima nilai standar dan dua nilai singkatan yang menggabungkan variasi nilai standar. Setiap nilai memiliki beberapa manfaat unik dan bersama bergantung pada konteks elemen yang menerapkannya.
Penggunaan tipikal properti ini adalah elemen yang berisi konten dari beberapa jenis. Pertimbangkan widget yang merender data masuk yang mengubah tata letak dan visual turunan elemen. Elemen lain yang perlu dipertimbangkan adalah yang berisi hasil data pihak ketiga, seperti iklan spanduk, di mana manfaat penahanan memungkinkan kami untuk tidak memprioritaskan pengecatan konten tertentu, cara menangani ukuran konten yang diterima, atau menentukan apakah konten bahkan harus terlihat. Situs yang sebagian besar statis, di sisi lain, akan menerima sedikit manfaat selain tata letak pertama dan melukis ke layar saat pemuatan halaman.
Sintaksis
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 properti
Tata Letak
Nilai layoutpenahanan memberi tahu browser bahwa tidak ada turunan elemen yang memengaruhi elemen lain di laman, juga tidak ada elemen lain yang berpengaruh pada turunan elemen yang ditampung. Ini memungkinkan browser berpotensi mengurangi jumlah kalkulasi yang diperlukan saat membuat tata letak halaman
Manfaat lainnya adalah jika elemen yang terkandung berada di luar layar atau dikaburkan dengan cara tertentu, browser dapat menunda atau menggeser penghitungan terkait ke prioritas yang lebih rendah. Contohnya adalah elemen penampung yang tidak terlihat di akhir elemen blok dan awal elemen blok itu terlihat.
Elemen dengan layoutpenahanan menjadi kotak penampung untuk turunan yang diposisikan - seperti elemen dengan pemosisian absolut. Elemen menerima konteks susun baru dalam kaitannya dengan halaman dan z-indeproperti x dapat digunakan. Meskipun, properti terarah, seperti topatau left, tidak berlaku.
Meskipun turunan dari elemen tertampung mungkin tidak memengaruhi elemen lain di laman, mereka masih dapat memengaruhi elemen leluhur yang ditampungnya. Misalnya, turunan dapat menyebabkan elemen yang ditampung berubah ukuran sebagai reaksi terhadap perubahan. Dalam hal ini, elemen tertampung masih berpotensi memengaruhi elemen lain di halaman, tetapi turunannya tetap tidak akan terlibat dalam penghitungan tersebut.
Demo berikut memberikan penjelasan sederhana tentang apa yang terjadi ketika layoutpenahanan diterapkan. Saat mengklik setiap kotak atas, penahanan diterapkan dan panah merah akan mengubah tampilan. Munculnya panah merah menunjukkan apakah turunan kotak memengaruhi kotak lain di halaman selama penghitungan tata letak.
Cat
Nilai paintpenahanan memberi tahu browser bahwa tidak ada turunan elemen yang akan dicat di luar kotak-batas elemen. Jika elemen turunan diposisikan agar sebagian dari kotak pembatasnya dipotong oleh elemen yang ditampung, border-boxmaka bagian tersebut tidak boleh dicat. Jika elemen turunan diposisikan sepenuhnya di luar elemen yang dimuat, border-boxmaka elemen tersebut tidak dicat sama sekali. Ini serupa dengan penerapan overflow: hidden;ke elemen, tetapi tanpa manfaat melewatkan atau mengurangi perhitungan yang diperlukan.
Manfaat lainnya adalah jika elemen yang ditampung tidak terlihat dalam beberapa cara dalam viewport, maka itu mungkin melewatkan turunan elemen saat melakukan penghitungan lukisan. Contohnya adalah elemen yang ditempatkan di luar halaman di sebelah kiri viewport. Jika elemen yang terkandung tidak terlihat, maka itu adalah jaminan bahwa isinya tidak akan terlihat. Karena itu, mereka tidak perlu dilibatkan dalam perhitungan cat.
Elemen dengan paintpenampung juga menjadi kotak penampung untuk turunan yang diposisikan - seperti elemen dengan pemosisian absolut. Elemen tersebut juga menerima konteks susunan baru dalam kaitannya dengan halaman dan z-indexproperti tersebut dapat digunakan. Meskipun, properti terarah, seperti topatau left, tidak berlaku.
Elemen gulir dapat memperoleh manfaat tambahan dengan menempatkan turunannya di lapisan cat baru yang dapat membantu kinerja gulir. Biasanya, elemen pengguliran dapat menyebabkan pengecatan ulang terus-menerus saat keturunan muncul dan menghilang selama pengguliran. Elemen scroll dengan penahanan paint berpotensi melewatkan pengecatan ulang terus menerus dari turunan scrolling ini.
Demo berikut memberikan penjelasan sederhana tentang apa yang terjadi ketika paintpenahanan diterapkan. Klik di mana saja untuk mengaktifkan penahanan di kotak ungu. Ketika penahanan diterapkan, beberapa kotak hijau berubah tampilannya. Tampilan kotak hijau menunjukkan bagaimana mereka dicat atau tidak.
Ukuran
Nilai sizepenahanan memberi tahu browser bahwa tidak ada turunan yang perlu dipertimbangkan saat melakukan penghitungan tata letak untuk halaman. Elemen yang dimuat harus memiliki heightdan widthproperti diterapkan, atau akan menciut menjadi nol piksel persegi. Hanya elemen itu sendiri yang perlu dipertimbangkan untuk penghitungan tata letak halaman karena turunannya tidak dapat memengaruhi ukuran elemen. Turunan elemen yang terkandung sepenuhnya dilewati dalam perhitungan seperti itu; seolah-olah tidak memiliki keturunan sama sekali.
Untuk mendapatkan manfaat penuh dari pengoptimalan, sizepenahanan biasanya diterapkan dengan jenis penahanan lainnya.
Sebuah elemen dengan sizepenahanan menerima konteks susunan baru dalam kaitannya dengan halaman dan z-indexproperti tersebut dapat digunakan. Meskipun, properti terarah, seperti topatau left, tidak berlaku.
Demo berikut memberikan penjelasan sederhana tentang apa yang terjadi ketika sizepenahanan diterapkan. Klik di mana saja untuk mengaktifkan penahanan di kotak ungu. Ketika penahanan diterapkan, kotak ungu berubah ukurannya. Secara default, tinggi kotak ungu ditentukan oleh turunannya, tetapi dengan penahanan, tinggi harus ditentukan. Setelah penahanan diterapkan, keturunan tidak lagi terlibat dalam penghitungan tata letak terkait ukuran.
Gaya
Nilai stylepenahanan memberi tahu browser bahwa beberapa properti CSS, seperti penghitung dan tanda kutip, akan dicakup ke elemen yang dimuat.
Properti counter-incrementdan counter-setharus dicakup ke dalam sub-pohon elemen penampung. Jika diperpanjang di luar elemen yang terkandung maka penghitung baru dibuat.
Nilai isi properti dari open-quote, close-quote, no-open-quote, dan no-close-quoteharus scoped ke sub-pohon elemen yang terkandung ini.
Nilai penahanan ini dianggap berisiko dikeluarkan dari spesifikasi.
Kandungan
Nilai contentpenahanan adalah kombinasi dari tata letak dan nilai penahanan cat. Ini sama dengan menerapkan penahanan dengan cara ini:
div ( contain: layout paint; )Semua manfaat potensial yang dijelaskan di atas untuk setiap nilai kemudian akan tersedia untuk elemen yang terkandung. Penahanan ini akan dianggap relatif aman untuk diterapkan secara luas ke banyak elemen di halaman.
Ketat
The strictnilai penahanan adalah kombinasi dari layout, paint, dan sizenilai-nilai penahanan. Ini sama dengan menerapkan penahanan dengan cara ini:
div ( contain: layout paint size; )Semua manfaat potensial yang dijelaskan di atas untuk setiap nilai kemudian akan tersedia untuk elemen yang terkandung.
Sebagai nilai penahanan yang "paling ketat", nilai ini harus digunakan dengan pertimbangan yang cermat. Ini karena persyaratan dimensi yang diberlakukan pada elemen yang terkandung. Dengan persyaratan ini, nilai penahanan ini memang menawarkan manfaat kinerja penahanan yang paling potensial.
Dukungan browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 52 | 69 | Tidak | 79 | Tidak |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Tidak |