Pembatasan CSS di Chrome 52

Paul Lewis

TL;DR

Properti CSS Containment baru memungkinkan developer membatasi cakupan gaya, tata letak, dan pekerjaan gambar 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 contain

Saat membuat aplikasi web, atau bahkan situs yang kompleks, tantangan performa utama adalah membatasi efek gaya, tata letak, dan gambar. Sering kali keseluruhan DOM dianggap “dalam cakupan” untuk pekerjaan komputasi, yang dapat berarti bahwa mencoba “tampilan” mandiri di aplikasi web dapat terbukti rumit: perubahan di satu bagian DOM dapat memengaruhi bagian lain, dan tidak ada cara untuk memberi tahu browser apa yang harus berada 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 browser modern semakin pintar dalam membatasi cakupan gaya, tata letak, dan pekerjaan cat secara otomatis, yang berarti semuanya menjadi lebih cepat tanpa Anda harus melakukan apa pun.

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

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

• layout
• paint
• size
• style

Setiap nilai ini memungkinkan Anda membatasi jumlah pekerjaan rendering yang perlu dilakukan browser. Mari kita lihat masing-masing nilai 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 memengaruhi tata letak internalnya, dan sebaliknya. Spesifikasi pembatasan

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

Tata letak biasanya memiliki cakupan dokumen, sehingga diskalakan secara proporsional dengan ukuran DOM. Jadi, jika Anda mengubah properti left elemen, setiap elemen di 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. Hal ini memastikan bahwa turunan elemen penampung tidak ditampilkan di luar batasnya, sehingga jika elemen berada di luar layar atau tidak terlihat, turunannya juga dijamin tidak terlihat. Spesifikasi pembatasan

Pembatasan cakupan adalah manfaat lain dari pembatasan yang sangat berguna. Pembatasan cat pada dasarnya mengklip elemen yang dimaksud, tetapi juga memiliki beberapa efek samping lain:

• Elemen ini berfungsi sebagai blok penampung untuk elemen posisi tetap dan diposisikan secara mutlak. Artinya, setiap turunan diposisikan berdasarkan elemen dengan contain: paint, bukan elemen induk lainnya seperti -- misalnya -- dokumen.
• Ini menjadi konteks penumpukan. 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 penampung.

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

Makna contain: size adalah bahwa turunan elemen tidak memengaruhi ukuran induk, dan dimensi yang disimpulkan atau dideklarasikan akan menjadi dimensi yang digunakan. Akibatnya, jika Anda menetapkan contain: size tetapi tidak menentukan dimensi untuk elemen (baik secara langsung maupun melalui properti fleksibel), elemen tersebut akan dirender pada 0x0 piksel.

Pembatasan ukuran benar-benar merupakan tindakan pengamanan untuk memastikan Anda tidak mengandalkan elemen turunan untuk menentukan ukuran, tetapi tindakan 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 keluar dari elemen penampung. Spesifikasi pembatasan

Sulit untuk memprediksi efek pada hierarki DOM dari perubahan gaya elemen yang akan kembali ke 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. Dengan menetapkan contain: style, perubahan gaya tidak akan diterapkan kembali setelah elemen penampung.

Untuk lebih jelasnya, contain: style yang tidak menyediakan gaya visual cakupan seperti yang Anda dapatkan dari Shadow DOM; pembatasan di sini sepenuhnya tentang membatasi bagian hierarki yang dipertimbangkan saat gaya diubah, bukan saat dideklarasikan.

Pembatasan konten dan yang ketat

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 sangat bagus jika Anda mengetahui ukuran elemen sebelumnya (atau ingin mencadangkan dimensinya), tetapi perlu diingat bahwa jika Anda mendeklarasikan pembatasan ketat tanpa dimensi, karena pembatasan ukuran tersirat, elemen dapat dirender sebagai kotak 0x0 piksel.

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

Dari keduanya, contain: content adalah yang harus 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 melakukannya

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

Link penting

• Spesifikasi Pembatasan CSS
• Pembatasan di Status Chrome