0Pricing
CSS Academy · Pelajaran

Properti isolation

Kendalikan scope pencampuran dan cegah efek pencampuran yang tidak diinginkan dengan properti isolation.

Properti isolation adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa itu isolasi?

Properti isolation mengontrol apakah sebuah elemen membuat konteks penumpukan baru yang mengisolasi isinya dari efek pencampuran elemen di luar grup yang diisolasi.

isolation: isolate

isolation: isolate membuat konteks penumpukan baru tanpa efek visual apa pun. Tujuannya hanya mencegah mode pencampuran di dalam elemen memengaruhi elemen di luarnya.

<div class="page-bg">
  <div class="card">Card content <span class="accent">accent</span></div>
</div>

Masalah yang Diselesaikannya

Tanpa isolasi, mix-blend-mode bercampur dengan ALL elemen di bawahnya dalam konteks penumpukan yang sama — termasuk latar belakang halaman dan komponen lain. Hal ini menyebabkan pencampuran yang tidak diinginkan melewati batas komponen.

Contoh Praktis

Sebuah kartu dengan mode pencampuran yang seharusnya tidak memengaruhi latar belakang global:

<div class="page">
  <div class="card">Card <span class="accent">Accent</span></div>
</div>

Cara Lain Membuat Konteks Penumpukan

Properti lain yang secara implisit membuat konteks penumpukan (sehingga mengisolasi mode pencampuran):

  • opacity kurang dari 1
  • transform selain none
  • filter selain none
  • will-change pada properti tertentu

isolation: isolate adalah opsi yang disengaja dan tidak menimbulkan efek samping.

isolation: auto (Bawaan)

isolation: auto (bawaan) tidak membuat konteks penumpukan baru. Mode pencampuran dapat merambat ke luar, kecuali ada properti lain yang kebetulan membuatnya.

isolation vs z-index

z-index saja tidak membuat konteks penumpukan, kecuali dipasangkan dengan posisi yang bukan statis. isolation: isolate adalah cara eksplisit tanpa efek samping untuk membuat konteks penumpukan.

isolation untuk SVG

Dalam SVG, isolation mengontrol apakah mode pencampuran diterapkan di dalam area tampilan SVG atau terus memengaruhi konten HTML di bawahnya. Mengaturnya pada elemen SVG membuat pencampuran SVG tetap terisolasi.

Pola Batas Komponen

Sebagai praktik terbaik, terapkan isolation: isolate pada setiap kontainer komponen utama antarmuka pengguna untuk mencegah pencampuran merambat ke luar:

<div class="card">Card</div>
<div class="modal">Modal</div>
<div class="sidebar">Sidebar</div>
<div class="tooltip">Tooltip</div>

Men-debug Masalah Mode Pencampuran

Jika mode pencampuran memengaruhi elemen yang tidak terduga, penyebabnya biasanya adalah isolasi yang tidak ada. Tambahkan isolation: isolate pada leluhur bersama terdekat dari komponen yang bercampur untuk membatasi efeknya.

Dampak Performa

isolation: isolate membuat konteks penumpukan baru dan dengan demikian lapisan kompositor baru. Biasanya ini ringan — jauh lebih murah daripada promosi lapisan dengan will-change: transform.

Pemeriksaan Singkat

Apa yang terjadi ketika mix-blend-mode: multiply diterapkan pada elemen di dalam kontainer yang memiliki isolation: isolate?

Rangkuman

isolation: isolate membuat konteks penumpukan baru tanpa efek visual — tujuannya hanya membatasi efek mix-blend-mode di dalam batas komponen. Terapkan pada semua kontainer komponen utama antarmuka pengguna untuk mencegah mode pencampuran secara tidak sengaja memengaruhi latar belakang global atau komponen saudara. Ini adalah alternatif yang disengaja dan bersih, alih-alih menggunakan opacity atau transform sebagai mekanisme isolasi yang tidak disengaja.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Properti isolation” gratis?

Ya — teks lengkap “Properti isolation” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Properti isolation”?

Kendalikan scope pencampuran dan cegah efek pencampuran yang tidak diinginkan dengan properti isolation. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Properti isolation” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. filter: blur brightness contrast grayscale
  2. backdrop-filter untuk Efek Kaca Buram
  3. mix-blend-mode untuk Pencampuran Lapisan
  4. Properti isolation
← Kembali ke CSS Academy