Pembatasan CSS di Chrome 52

TL;DR (Ringkasan)

Properti Penahanan CSS yang baru memungkinkan developer membatasi cakupan gaya, tata letak, dan pekerjaan menggambar pada browser.

Pembatasan CSS. Sebelum: tata letak membutuhkan waktu 59,6 md. Setelah: tata letak memerlukan waktu 0,05 md

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

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

Aplikasi ini tersedia di Chrome 52+ dan Opera 40+ (dan memiliki dukungan publik dari Firefox), jadi cobalah 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 warna. Sering kali keseluruhan DOM dianggap "dalam cakupan" untuk tugas komputasi, yang 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 di dalam atau di luar cakupan.

Misalnya, bagian dari 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, layout, dan paint:

    <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 secara efektif berada dalam cakupan, yang berarti bahwa gaya, tata letak, dan penghitungan paint harus mempertimbangkan semua elemen, terlepas dari apakah elemen tersebut diubah atau tidak. Semakin besar DOM, semakin banyak pekerjaan komputasi yang terlibat, artinya Anda dapat membuat aplikasi tidak responsif terhadap input pengguna.

Kabar baiknya adalah browser modern semakin pintar dalam membatasi cakupan gaya, tata letak, dan pekerjaan menggambar secara otomatis, yang berarti segala sesuatunya menjadi lebih cepat tanpa Anda harus melakukan apa pun.

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

Penahanan CSS adalah properti baru, dengan kata kunci berisi, yang mendukung empat nilai:

  • layout
  • paint
  • size
  • style

Masing-masing nilai ini memungkinkan Anda membatasi jumlah pekerjaan rendering yang perlu dilakukan browser. Mari kita lihat masing-masing secara lebih mendetail.

Tata letak (berisi: tata letak)

Pembatasan tata letak mungkin merupakan manfaat terbesar dari {i>containment<i}, bersama dengan contain: paint.

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

Dengan mengaktifkan penahanan di sini berpotensi mengurangi jumlah elemen menjadi hanya beberapa, bukan keseluruhan dokumen, menghemat banyak pekerjaan browser yang tidak perlu dan meningkatkan kinerja secara signifikan.

Paint (berisi: paint)

Cat {i>scoping<i} 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:

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

Ukuran (berisi: ukuran)

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

Pembatasan ukuran benar-benar ukuran sabuk dan gelang untuk memastikan Anda tidak mengandalkan elemen turunan untuk ukuran, tetapi dengan sendirinya itu tidak menawarkan banyak manfaat kinerja.

Gaya (berisi: gaya)

Mungkin sulit untuk memprediksi apa efek pada hierarki DOM dari perubahan gaya elemen yang akan mencadangkan hierarki. Salah satu contoh hal ini adalah dalam hal seperti penghitung CSS, saat mengubah penghitung dalam turunan dapat memengaruhi nilai penghitung dari nama yang sama yang digunakan di tempat lain dalam dokumen. Dengan menetapkan contain: style, perubahan gaya tidak akan disebarkan kembali setelah elemen penampung.

Untuk lebih jelasnya, yang tidak disediakan oleh contain: style adalah gaya cakupan seperti yang Anda dapatkan dari Shadow DOM. Pembatasan di sini hanya terkait dengan membatasi bagian hierarki yang sedang dipertimbangkan saat gaya diubah, bukan saat dideklarasikan.

Ketat dan pembatasan konten

Anda juga dapat menggabungkan kata kunci, seperti contain: layout paint, yang hanya akan menerapkan perilaku tersebut ke sebuah 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 bermanfaat bila Anda mengetahui ukuran elemen sebelumnya (atau ingin menyimpan dimensinya), namun ingatlah bahwa jika Anda mendeklarasikan pembatasan ketat tanpa dimensi, karena pembatasan ukuran tersirat, elemen dapat dirender sebagai kotak 0 px kali 0 px.

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

Dari keduanya, contain: content adalah yang harus Anda lihat untuk digunakan secara default. Anda harus memperlakukan pembatasan yang ketat sebagai jalan keluar jika contain: content tidak cukup kuat untuk kebutuhan Anda.

Beri tahu kami cara Anda melanjutkan

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