Cara Menggunakan Property CSS isolation

Properti isolation digunakan untuk mengisolasi sekelompok elemen sehingga kelompok elemen tersebut tidak menyatu dengan latar belakang mereka.

Ketika sebuah elemen diisolasi menggunakan properti isolation, konteks stacking baru akan dibuat. Elemen di dalam konteks tidak akan lagi menyatu dengan latar belakang.

Properti isolation dapat digunakan bersama dengan properti mix-blend-mode.

Jika Anda menggunakan properti background-blend-mode, properti isolation tidak diperlukan karena lapisan latar belakang tidak boleh menyatu dengan konten yang terdapat di belakang elemen, sebaliknya mereka harus bertindak seolah-olah mereka dibuat menjadi grup terisolasi (elemen itu sendiri).

Anda dapat mengisolasi elemen untuk mencegah mereka menyatu dengan latar belakang menggunakan properti isolation. Namun, segala sesuatu di CSS yang menciptakan konteks stacking harus dianggap sebagai kelompok yang terisolasi. Elemen HTML sendiri seharusnya tidak membuat grup. Ini menunjukkan bahwa, bahkan jika Anda tidak mengisolasi elemen secara ekplisit menggunakan isolation, mereka mungkin masih terisolasi jika properti stacking-context-creating digunakan.

 

Catatan:

Dalam CSS, gambar latar belakang atau konten img harus selalu dirender ke dalam grup yang terisolasi. Misalnya, jika Anda menautkan ke file SVG melalui tag img, karya seni SVG tersebut tidak akan menyatu dengan latar belakang konten.

Selain itu, dalam SVG, elemen <mask> selalu membuat grup yang terisolasi.

 

Official Syntax

Syntax: isolation: auto | isolate

Values

auto

Secara default, elemen-elemen akan mendapatkan value auto yang menunjukkan bahwa mereka tidak terisolasi.

Namun, bahkan jika properti isolation diatur ke otomatis, sekelompok elemen masih dapat diisolasi jika operasi yang menyebabkan pembuatan konteks stacked dilakukan.

isolate

Isolate menciptakan konteks stacking baru pada elemen dan mengisolasi grup. Tetapi, elemen-elemen di dalam konteks stacking yang sama akan menyatu dengan latar belakang mereka yang terletak di dalam konteks tersebut.

Contoh:

<div class="container">
    <img src="isolation-destination.jpg" alt="Yellow tree.">
    <div class="text-wrapper">
        <h1>SUNSHINE</h1>
    </div>
</div>

Teks dicampur dengan latar belakangnya menggunakan properti mix-blend-mode dengan value blend mode overlay.

h1 {
    mix-blend-mode: overlay;
}

Kita dapat mengisolasi teks dari latar belakangnya dengan menggunakan properti isolasi pada text wrapper — ini akan mengisolasi konten dari wrapper (contohnya teks kita), dan mencegahnya menyatu dengan gambar.

.text-wrapper {

    isolation: isolate; }

.text-wrapper {
    isolation: isolate;
}

Leave a Reply

Your email address will not be published. Required fields are marked *