Pembatasan CSS di Chrome 52

Paul Lewis

TL;DR

Properti Containment CSS baru memungkinkan developer membatasi cakupan gaya, tata letak, dan pekerjaan paint browser.

Fungsi ini memiliki beberapa nilai, sehingga sintaksisnya adalah sebagai berikut:

    contain: none | strict | content | [ size || layout || style || paint ]

Tersedia di Chrome 52 ke atas dan Opera 40+ (dan memiliki dukungan publik dari Firefox), jadi coba sekarang dan beri tahu kami cara Anda melakukannya.

Properti penampung

Saat membuat aplikasi web, atau bahkan situs yang kompleks, tantangan kinerja utama adalah membatasi efek gaya, tata letak, dan cat. Sering kali keseluruhan DOM dianggap “dalam cakupan” untuk pekerjaan komputasi, yang dapat berarti bahwa mencoba “tampilan” mandiri di aplikasi web bisa jadi sulit: perubahan di satu bagian DOM dapat memengaruhi bagian lain, dan tidak ada cara untuk memberi tahu browser apa yang harus berada di dalam atau di luar cakupan.

Misalnya, sebagian DOM Anda terlihat seperti ini:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
    </section>

    <section class="view">
      Contact
    </section>

Dan Anda menambahkan elemen baru ke satu tampilan, yang akan memicu gaya, tata letak, dan cat:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
      <div class="newly-added-element">Check me out!</div>
    </section>

    <section class="view">
      Contact
    </section>

Namun, dalam kasus ini, seluruh DOM memiliki cakupan yang efektif, yang berarti penghitungan gaya, tata letak, dan cat harus mempertimbangkan semua elemen, terlepas dari apakah elemen tersebut diubah atau tidak. Semakin besar DOM, semakin banyak pekerjaan komputasi yang dilakukan. Artinya, Anda juga dapat membuat aplikasi tidak responsif terhadap input pengguna.

Kabar baiknya adalah bahwa {i>browser<i} modern menjadi sangat pintar dalam membatasi cakupan gaya, tata letak, dan pekerjaan {i>lukis<i} secara otomatis, yang berarti bahwa segala sesuatunya menjadi lebih cepat tanpa Anda harus melakukan apa pun.

Namun, kabar yang lebih baik adalah ada properti CSS baru yang memberikan kontrol cakupan kepada developer: Pembatasan.

Pembatasan CSS adalah properti baru, dengan kata kunci mengandung, yang mendukung empat nilai:

• layout
• paint
• size
• style

Setiap nilai ini memungkinkan Anda membatasi seberapa banyak pekerjaan rendering yang perlu dilakukan browser. Mari kita bahas satu per satu secara lebih mendetail.

Tata letak (berisi: tata letak)

Catatan: Nilai ini mengaktifkan pembatasan tata letak untuk elemen. Cara ini memastikan elemen yang memuatnya benar-benar buram untuk tujuan tata letak; tidak ada apa pun di luar yang dapat mempengaruhi tata letak internalnya, begitu pula sebaliknya. Spesifikasi pembatasan

Pembatasan tata letak mungkin merupakan manfaat terbesar dari pembatasan, bersama dengan contain: paint.

Tata letak biasanya mencakup dokumen, sehingga diskalakan secara proporsional dengan ukuran DOM Anda, sehingga jika Anda mengubah properti left elemen, setiap elemen dalam DOM mungkin perlu diperiksa.

Mengaktifkan {i>containment<i} di sini berpotensi mengurangi jumlah elemen menjadi hanya beberapa saja, bukan keseluruhan dokumen, sehingga menghemat banyak pekerjaan yang tidak perlu pada browser dan meningkatkan kinerja secara signifikan.

Cat (berisi: cat)

Catatan: Nilai ini mengaktifkan pembatasan cat untuk elemen. Ini memastikan bahwa turunan elemen penampung tidak ditampilkan di luar batasnya, jadi jika elemen berada di luar layar atau tidak terlihat, turunannya juga dijamin tidak akan terlihat. Spesifikasi pembatasan

{i>Scoping <i}cat adalah manfaat lain yang sangat berguna dari {i>containment<i}. Pembatasan cat pada dasarnya mengklip elemen yang dimaksud, tetapi juga memiliki beberapa efek samping lainnya:

• Berfungsi sebagai blok penampung untuk elemen posisi yang benar-benar diposisikan dan tetap. Ini berarti setiap turunan diposisikan berdasarkan elemen dengan contain: paint bukan elemen induk lainnya seperti -- misalnya -- dokumen.
• Konteks tersebut menjadi konteks yang bertumpuk. Artinya, hal-hal seperti z-index akan memiliki efek pada elemen, dan turunan akan ditumpuk sesuai dengan konteks baru.
• Hal ini menjadi konteks pemformatan baru. Artinya, jika Anda memiliki, misalnya, elemen tingkat blok dengan pembatasan cat, elemen tersebut akan diperlakukan sebagai lingkungan tata letak independen baru. Artinya tata letak di luar elemen biasanya tidak akan memengaruhi turunan elemen yang memuatnya.

Ukuran (berisi: ukuran)

Catatan: Nilai ini mengaktifkan pembatasan ukuran untuk elemen. Hal ini memastikan bahwa elemen yang memuatnya dapat ditata tanpa perlu memeriksa turunannya. Spesifikasi pembatasan

Yang dimaksud dengan contain: size adalah bahwa turunan elemen tidak memengaruhi ukuran induk, dan dimensi yang disimpulkan atau dideklarasikannya akan digunakan. Akibatnya, jika Anda menetapkan contain: size tetapi tidak menentukan dimensi elemen (baik secara langsung maupun melalui properti fleksibel), elemen tersebut akan dirender dengan ukuran 0px kali 0px.

Pembatasan ukuran sebenarnya merupakan ukuran sabuk dan kurung kurawal untuk memastikan Anda tidak bergantung pada elemen turunan untuk pengukuran, tetapi dengan sendirinya, elemen ini tidak menawarkan banyak manfaat performa.

Gaya (berisi: gaya)

Catatan: Nilai ini mengaktifkan pembatasan gaya untuk elemen. Hal ini memastikan bahwa, untuk properti yang dapat memiliki efek pada lebih dari sekadar elemen dan turunannya, efek tersebut tidak meng-escape elemen yang memuatnya. Spesifikasi pembatasan

Mungkin sulit untuk memprediksi apa efek pada hierarki DOM mengubah gaya elemen akan kembali memantapkan hierarki. Salah satu contohnya adalah penghitung CSS, ketika mengubah penghitung pada turunan dapat memengaruhi nilai penghitung dengan nama yang sama yang digunakan di tempat lain dalam dokumen. Jika contain: style ditetapkan, perubahan gaya tidak akan disebarkan kembali melewati elemen penampung.

Untuk lebih jelasnya, yang tidak disediakan contain: style adalah gaya bercakupan seperti yang Anda dapatkan dari Shadow DOM; pembatasan di sini sepenuhnya terkait dengan membatasi bagian hierarki yang dipertimbangkan saat gaya dimutasi, bukan saat gaya dideklarasikan.

Ketat dan pembatasan konten

Anda juga dapat menggabungkan kata kunci, seperti contain: layout paint, yang hanya akan menerapkan perilaku tersebut ke elemen. Namun, contain juga mendukung dua nilai tambahan:

• contain: strict berarti sama dengan contain: size layout paint
• contain: content berarti sama dengan contain: layout paint

Menggunakan pembatasan ketat adalah langkah yang bagus jika Anda mengetahui ukuran elemen sebelumnya (atau ingin mempertahankan dimensinya), tetapi perlu diingat bahwa jika Anda mendeklarasikan pembatasan yang ketat tanpa dimensi, karena pembatasan ukuran tersirat, elemen dapat dirender sebagai kotak 0px kali 0px.

Di sisi lain, pembatasan konten menawarkan peningkatan cakupan yang signifikan, tetapi tidak mengharuskan Anda untuk mengetahui atau menentukan dimensi elemen terlebih dahulu.

Dari keduanya, contain: content adalah perangkat yang seharusnya Anda gunakan secara default. Anda harus memperlakukan pembatasan ketat sebagai solusi lain jika contain: content tidak cukup kuat untuk kebutuhan Anda.

Beri tahu kami cara Anda

Penahanan adalah cara yang bagus untuk mulai menunjukkan kepada browser apa yang ingin Anda tetap terisolasi dalam halaman Anda. Cobalah di Chrome 52 atau yang lebih baru dan beri tahu kami cara Anda menggunakannya.

Link penting

• Spesifikasi Pembatasan CSS
• Pembatasan pada Status Chrome