Isolation - CSS-tricks

Anonim

Den isolationejendom i CSS bruges til at forhindre elementer fra blanding med deres baggrunde.

.module ( isolation: isolate; )

Det bruges mest, når mix-blend-modedet er erklæret for et andet element. Anvendelse isolationpå elementet beskytter dette element, så det ikke arver det mix-blend-modeanvendte til de andre elementer, der kan være bag det.

Med andre ord, hvis mix-blend-modefortæller overlappende elementer at blande sig med hinanden, så isolationskaber en undtagelse for de elementer, hvor det anvendes. Det er som en måde at slå mix-blend-mode fra, men fra et overordnet element i stedet for at skulle vælge elementet med blanding direkte.

Værdier

  • isolate: Gør nøjagtigt hvad den siger. Det beskytter elementet mod at blande sig i andre elementer, der er i baggrunden.
  • auto: Nulstiller isolationen og giver elementet mulighed for at blande sig i baggrunden.

Se Pen Isolation Cha-Cha-Cha af CSS-Tricks (@ css-tricks) på CodePen.

En brugssag

Maria Antonietta Perna, der skrev for SitePoint, oprettede en demo, der driver punktet særligt godt. Vi oprettede denne grafik for at hjælpe med at forklare hendes demo:

Se pennetekst / billedblanding med mix-blend-mode fra SitePoint (@SitePoint) på CodePen.

Hvor det ikke virker

Du kan forvente isolationat isolere elementer, når de background-blend-modebruges, men det er ikke tilfældet. Baggrundselementer er allerede isoleret af deres natur, idet de ikke blander sig med det indhold, der ligger bag dem.

Et andet sted, hvor det isolationser ud til at være ugyldigt, er når det bruges sammen med translatedet samme element. Du kan støde på dette, hvis du forsøger at centrere et element både lodret og vandret ved hjælp af absolutepositionering og translatesammen:

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

Brugen af translateser ud til at isolere elementet alene uden brug isolation.

Relaterede

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

Mere information

  • W3C specifikation
  • isolation på MDN
  • isolering på Codrops
  • SitePoint: En nærbillede af CSS-mix-blend-mode-egenskaben

Browsersupport til isolat

Chrome Safari Firefox Opera IE / Edge Android iOS
41 7.1 36 30 Nix 41 8.4

Kan jeg bruge ... Browsersupport til mix-blend-mode

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
41 32 Ingen 79 TP

Mobil / tablet

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