Isolamento - Trucchi CSS

Anonim

La isolationproprietà in CSS viene utilizzata per impedire agli elementi di fondersi con i loro sfondi.

.module ( isolation: isolate; )

È più comunemente usato quando mix-blend-modeè stato dichiarato su un altro elemento. L'applicazione isolationall'elemento protegge quell'elemento in modo che non erediti l' mix-blend-modeapplicazione agli altri elementi che potrebbero esserci dietro.

In altre parole, se mix-blend-modesta dicendo agli elementi sovrapposti di fondersi tra loro, isolationcrea un'esenzione sugli elementi in cui viene applicata. È come un modo per disattivare la modalità mix-blend, ma da un elemento genitore piuttosto che dover selezionare l'elemento con la fusione direttamente.

Valori

  • isolate: Fa esattamente quello che dice. Protegge l'elemento dalla fusione con altri elementi che si trovano sullo sfondo.
  • auto: Ripristina l'isolamento e consente all'elemento di fondersi con lo sfondo.

Vedi il Pen Isolation Cha-Cha-Cha di CSS-Tricks (@ css-tricks) su CodePen.

Un caso d'uso

Maria Antonietta Perna, scrivendo per SitePoint, ha creato una demo che guida particolarmente bene il punto. Abbiamo creato questo grafico per spiegare la sua demo:

Vedi la fusione di testo / immagine della penna con la modalità mix-blend di SitePoint (@SitePoint) su CodePen.

Dove non funziona

Potresti aspettarti isolationdi isolare gli elementi quando background-blend-modeviene utilizzato, ma non è così. Gli elementi di sfondo sono già isolati per loro natura in quanto non si fondono con il contenuto che sta dietro di loro.

Un altro punto in cui isolationsembra essere invalidato è quando viene utilizzato in combinazione con translatesullo stesso elemento. Potresti imbatterti in questo se tenti di centrare un elemento sia verticalmente che orizzontalmente usando il absoluteposizionamento e translateinsieme:

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

L'uso di translatesembra isolare l'elemento da solo senza l'uso isolation.

Relazionato

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

Maggiori informazioni

  • Specifiche W3C
  • isolamento su MDN
  • isolamento su Codrops
  • SitePoint: uno sguardo ravvicinato alla proprietà CSS mix-blend-mode

Supporto del browser per isolare

Cromo Safari Firefox musica lirica IE / Edge Android iOS
41 7.1 36 30 no 41 8.4

Posso usare ... Supporto del browser per la modalità mix-blend

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
41 32 No 79 TP

Mobile / Tablet

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