Pengasingan - Trik CSS

Anonim

The isolationharta di CSS digunakan untuk mencegah unsur-unsur dari campuran dengan latar belakang mereka.

.module ( isolation: isolate; )

Ini paling sering digunakan ketika mix-blend-modetelah dinyatakan pada elemen lain. Memohon isolationelemen melindungi elemen itu sehingga tidak mewarisi yang mix-blend-modediterapkan pada elemen lain yang mungkin berada di belakangnya.

Dengan kata lain, jika mix-blend-modememberitahu unsur-unsur yang bertindih untuk bercampur antara satu sama lain, maka isolationmewujudkan pengecualian pada elemen-elemen di mana ia diterapkan. Ini seperti cara mematikan mod campuran-campuran, tetapi dari elemen induk dan bukannya perlu memilih elemen dengan pencampuran secara langsung.

Nilai

  • isolate: Adakah betul apa yang dinyatakannya. Ia melindungi elemen daripada menyatu dengan unsur lain yang berada di latar belakang.
  • auto: Menetapkan semula pengasingan dan membolehkan elemen menyatu dengan latar belakangnya.

Lihat Pen Isolasi Cha-Cha-Cha oleh CSS-Tricks (@ css-tricks) di CodePen.

Kes Penggunaan

Maria Antonietta Perna, menulis untuk SitePoint, membuat demo yang mendorong pulang ke rumah dengan sangat baik. Kami membuat grafik ini untuk membantu menjelaskan demo beliau:

Lihat gabungan Teks Pen / Imej dengan mod campuran-campuran oleh SitePoint (@SitePoint) di CodePen.

Di mana ia tidak berfungsi

Anda mungkin akan isolationmengasingkan elemen ketika background-blend-modedigunakan, tetapi itu tidak berlaku. Unsur latar belakang sudah diasingkan oleh sifatnya kerana tidak bercampur dengan isi yang ada di belakangnya.

Tempat lain yang isolationkelihatan tidak sah adalah ketika ia digunakan bersamaan dengan translateelemen yang sama. Anda mungkin bertemu dengan ini jika anda cuba memusatkan elemen secara menegak dan mendatar menggunakan absolutekedudukan dan translatebersama:

.module ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); isolation: isolate; )

Penggunaan translatenampaknya mengasingkan elemen itu sendiri tanpa penggunaannya isolation.

Berkaitan

  • mix-blend-mode
  • background-blend-mode

Maklumat lanjut

  • Spesifikasi W3C
  • pengasingan di MDN
  • pengasingan pada Codrops
  • SitePoint: Tinjauan jarak dekat pada hartanah mod campuran-campuran CSS

Sokongan Penyemak Imbas untuk mengasingkan

Chrome Safari Firefox Opera IE / Tepi Android iOS
41 7.1 36 30 Tidak 41 8.4

Bolehkah Saya Menggunakan… Sokongan Penyemak Imbas untuk mod campuran-campuran

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
41 32 Tidak 79 TP

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 14.0-14.4