CSS Academy · Pelajaran

Sifat isolation

Kawal skop campuran dan cegah kesan campuran yang tidak diingini dengan sifat isolation.

Pelajaran 4 daripada 413 langkah

Sifat isolation ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah pengasingan?

Sifat isolation mengawal sama ada sesuatu elemen mencipta konteks susunan bertindan baharu yang mengasingkan kandungannya daripada kesan campuran elemen di luar kumpulan yang diasingkan.

isolation: isolate

isolation: isolate mencipta konteks susunan bertindan baharu tanpa sebarang kesan visual. Tujuan tunggalnya adalah untuk menghalang mod campuran di dalam elemen daripada mempengaruhi elemen di luarnya.

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

Masalah yang Diselesaikannya

Tanpa pengasingan, mix-blend-mode bercampur dengan ALL elemen di bawahnya dalam konteks susunan bertindan yang sama — termasuk latar belakang halaman dan komponen lain. Hal ini menyebabkan pencampuran yang tidak diingini merentasi sempadan komponen.

Contoh Praktikal

Kad dengan mod campuran yang tidak sepatutnya mempengaruhi latar belakang global:

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

Cara Lain untuk Mencipta Konteks Susunan Bertindan

Sifat lain yang secara tersirat mencipta konteks susunan bertindan (sekali gus mengasingkan mod campuran):

opacity kurang daripada 1
transform selain daripada none
filter selain daripada none
will-change pada sifat tertentu

isolation: isolate ialah pilihan yang disengajakan dan tidak mempunyai kesan sampingan.

isolation: auto (Lalai)

isolation: auto (lalai) tidak mencipta konteks susunan bertindan baharu. Mod campuran akan merebak ke luar melainkan sifat lain secara kebetulan mencipta konteks tersebut.

isolation berbanding z-index

z-index sahaja tidak mencipta konteks susunan bertindan melainkan digandingkan dengan kedudukan bukan statik. isolation: isolate ialah cara eksplisit tanpa kesan sampingan untuk mencipta konteks susunan bertindan.

isolation untuk SVG

Dalam SVG, isolation mengawal sama ada mod campuran digunakan dalam ruang pandang SVG atau terus mempengaruhi kandungan HTML di bawahnya. Menetapkannya pada elemen SVG memastikan pencampuran SVG kekal terkandung di dalam SVG.

Corak Sempadan Komponen

Sebagai amalan terbaik, gunakan isolation: isolate pada setiap bekas komponen UI utama untuk menghalang pencampuran daripada merebak:

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

Menyahpepijat Isu Mod Campuran

Jika mod campuran mempengaruhi elemen yang tidak dijangka, puncanya biasanya ialah pengasingan yang tiada. Tambahkan isolation: isolate pada leluhur sepunya terdekat bagi komponen yang bercampur untuk mengehadkan kesannya.

Kesan Prestasi

isolation: isolate mencipta konteks susunan bertindan baharu dan seterusnya lapisan penggubah baharu. Biasanya hal ini ringan — jauh lebih murah berbanding promosi lapisan oleh will-change: transform.

Semakan Ringkas

Apakah yang berlaku apabila mix-blend-mode: multiply digunakan pada elemen di dalam bekas yang mempunyai isolation: isolate?

Jawab dalam pelajaran interaktif

Ringkasan

isolation: isolate mencipta konteks susunan bertindan baharu tanpa kesan sampingan visual — tujuan tunggalnya adalah untuk mengekalkan kesan mix-blend-mode dalam sempadan komponen. Gunakannya pada semua bekas komponen UI utama untuk menghalang mod campuran daripada menjejaskan latar belakang global atau komponen bersaudara secara tidak sengaja. Ini ialah alternatif yang disengajakan dan kemas berbanding menggunakan opacity atau transform sebagai mekanisme pengasingan secara tidak sengaja.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Sifat isolation” percuma?

Ya — teks penuh “Sifat isolation” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Sifat isolation”?

Kawal skop campuran dan cegah kesan campuran yang tidak diingini dengan sifat isolation. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Sifat isolation” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy