CSS'deki isolationözellik, öğelerin arka planlarıyla karışmasını önlemek için kullanılır.
.module ( isolation: isolate; )En yaygın mix-blend-modeolarak başka bir öğede bildirildiğinde kullanılır . Öğeye uygulamak isolation, o öğeyi koruyarak, mix-blend-modeuygulanmış öğeyi arkasında olabilecek diğer öğelere miras bırakmaz .
Diğer bir deyişle, mix-blend-modeüst üste binen öğelere birbiriyle harmanlanmasını söylüyorsa, isolationuygulandığı öğelerde bir muafiyet oluşturur. Karıştırma-harmanlama modunu kapatmanın bir yolu gibi, ancak doğrudan harmanlama ile öğeyi seçmeye ihtiyaç duymak yerine bir ana öğeden.
Değerler
isolate: Tam olarak ne diyorsa onu yapar. Öğeyi arka plandaki diğer öğelere karışmaktan korur.auto: İzolasyonu sıfırlar ve öğenin arka planına karışmasına izin verir.
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem İzolasyonu Cha-Cha-Cha'ya bakın.
Bir Kullanım Örneği
SitePoint için yazan Maria Antonietta Perna, noktayı özellikle iyi bir şekilde yönlendiren bir demo hazırladı. Demosunu açıklamaya yardımcı olması için bu grafiği oluşturduk:
CodePen'de SitePoint (@SitePoint) tarafından mix-blend-mode ile Kalem Metni / Görüntü karışımına bakın.
Nerede çalışmıyor
isolationÖğeleri background-blend-modekullanıldığında izole etmeyi bekleyebilirsiniz , ancak durum böyle değildir. Arka plan öğeleri, arkalarındaki içerikle uyumlu olmadıkları için zaten doğaları gereği izole edilmiştir.
Geçersiz isolationgibi görünen başka bir nokta translate, aynı öğe üzerinde birlikte kullanılmasıdır . absoluteKonumlandırmayı ve translatebirlikte kullanarak bir öğeyi hem dikey hem de yatay olarak ortalamaya çalışırsanız, bununla karşılaşabilirsiniz:
.module ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); isolation: isolate; )translateÖğesinin kullanımı , öğeyi kullanmadan kendi başına izole ediyor gibi görünmektedir isolation.
İlişkili
mix-blend-modebackground-blend-mode
Daha fazla bilgi
- W3C özellikleri
- MDN'de izolasyon
- Codrops üzerinde izolasyon
- SitePoint: CSS mix-blend-mode Özelliğine Yakın Plan Bir Bakış
İzolat için Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE / Edge | Android | iOS |
|---|---|---|---|---|---|---|
| 41 | 7.1 | 36 | 30 | Hayır | 41 | 8.4 |
Kullanabilir miyim… Karma karışım modu için Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 41 | 32 | Hayır | 79 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |