The isolationproperti di CSS digunakan untuk mencegah unsur-unsur dari pencampuran dengan latar belakang mereka.
.module ( isolation: isolate; )Ini paling sering digunakan ketika mix-blend-modetelah dideklarasikan pada elemen lain. Menerapkan isolationke elemen menjaga elemen itu sehingga tidak mewarisi yang mix-blend-modediterapkan ke elemen lain yang mungkin berada di belakangnya.
Dengan kata lain, jika mix-blend-modememberi tahu elemen yang tumpang tindih untuk berbaur satu sama lain, maka isolationmembuat pengecualian pada elemen tempat elemen diterapkan. Ini seperti cara untuk mematikan mode campuran, tetapi dari elemen induk daripada harus memilih elemen dengan pencampuran secara langsung.
Nilai
isolate: Melakukan persis seperti yang dikatakannya. Ini melindungi elemen agar tidak bercampur dengan elemen lain yang ada di latar belakang.auto: Menyetel ulang isolasi dan memungkinkan elemen menyatu dengan latar belakangnya.
Lihat Pen Isolation Cha-Cha-Cha oleh CSS-Tricks (@ css-trick) di CodePen.
Kasus Penggunaan
Maria Antonietta Perna, menulis untuk SitePoint, membuat demo yang menunjukkan maksudnya dengan sangat baik. Kami membuat grafik ini untuk membantu menjelaskan demo-nya:
Lihat perpaduan Teks Pena / Gambar dengan mode campuran-campuran oleh SitePoint (@SitePoint) di CodePen.
Dimana tidak berhasil
Anda mungkin berharap isolationuntuk mengisolasi elemen saat background-blend-modedigunakan, tetapi bukan itu masalahnya. Elemen latar belakang sudah diisolasi oleh sifatnya karena tidak menyatu dengan konten yang ada di belakangnya.
Tempat lain di mana isolationtampaknya tidak valid adalah ketika digunakan bersama dengan translateelemen yang sama. Anda mungkin mengalami ini jika mencoba memusatkan elemen baik secara vertikal maupun horizontal menggunakan absolutepemosisian dan translatebersama - sama:
.module ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); isolation: isolate; )Penggunaan dari translatetampaknya mengisolasi elemen itu sendiri tanpa penggunaan isolation.
Terkait
mix-blend-modebackground-blend-mode
Informasi Lebih Lanjut
- Spesifikasi W3C
- isolasi di MDN
- isolasi pada Codrops
- SitePoint: Pandangan Close-up pada Properti mode campuran campuran CSS
Dukungan Browser untuk mengisolasi
| Chrome | Safari | Firefox | Opera | IE / Edge | Android | iOS |
|---|---|---|---|---|---|---|
| 41 | 7.1 | 36 | 30 | Nggak | 41 | 8.4 |
Dapatkah Saya Menggunakan… Dukungan Browser untuk mode campuran-campuran
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 41 | 32 | Tidak | 79 | TP |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |