Elszigeteltség - CSS-trükkök

Anonim

A isolationCSS-ben lévő tulajdonság megakadályozza az elemek keveredését a hátterükkel.

.module ( isolation: isolate; )

Leggyakrabban akkor használják, amikor mix-blend-modeegy másik elemre deklarálták. Az isolationelemre alkalmazva őrzi az elemet, így nem örökli az mix-blend-modealkalmazást a többi elem mögött, amely esetleg mögötte áll.

Más szavakkal, ha mix-blend-modeazt mondjuk , hogy az átfedő elemek keveredjenek egymással, akkor isolationmentességet hoz létre azokon az elemeken, ahol alkalmazzák őket. Olyan ez, mint a mix-blend-mód kikapcsolása, de szülő elemből, ahelyett, hogy közvetlenül a keveréssel kellene kiválasztani az elemet.

Értékek

  • isolate: Pontosan azt csinálja, amit mond. Védi az elemet attól, hogy más háttérbe keveredjen.
  • auto: Visszaállítja az izolációt, és lehetővé teszi az elem beolvadását a hátterébe.

Lásd a CSS-Tricks (@ css-tricks) tollelkülönítési cha-cha-cha kódolását a CodePen-en.

A használati eset

Maria Antonietta Perna, aki a SitePoint-nak írt, létrehozott egy demót, amely különösen jól vezeti haza a pontot. Azért készítettük ezt a képet, hogy elmagyarázzuk a bemutatóját:

Lásd a Tollszöveg / Kép keveréket a mix-keverés móddal a SitePoint (@SitePoint) segítségével a CodePen-en.

Ahol nem működik

Számíthat arra, isolationhogy az elemek elkülönülnek, amikor background-blend-modehasználatos, de ez nem így van. A háttérelemek már jellegüknél fogva elszigeteltek, mivel nem keverednek a mögöttük lévő tartalommal.

Egy másik hely, ahol isolationérvénytelennek tűnik, az, amikor translateugyanazon elemen együtt használják . Akkor ütközhet ebbe, ha egy elemet függőlegesen és vízszintesen is megpróbál középre absoluteállítani pozicionálás és translateegyütt:

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

Használata translatemegjelenik elkülöníteni az elem saját használata nélkül isolation.

Összefüggő

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

Több információ

  • W3C specifikáció
  • izoláció az MDN-en
  • izolálás a Codrops-on
  • SitePoint: Közeli nézet a CSS mix-blend-mode tulajdonságra

Böngésző támogatás az izolátumhoz

Króm Szafari Firefox Opera IE / Edge Android iOS
41 7.1 36 30 Dehogy 41 8.4

Használhatom ... Böngésző támogatás a mix-blend módhoz

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
41 32 Nem 79 TP

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81. 14,0–14,4