Izolacja - CSS-Tricks

Anonim

isolationNieruchomość w CSS jest stosowany w celu zapobiegania elementy z mieszania z ich tłem.

.module ( isolation: isolate; )

Jest najczęściej używany, gdy mix-blend-modezostał zadeklarowany w innym elemencie. Zastosowanie isolationdo elementu zabezpiecza ten element, aby nie dziedziczył mix-blend-modezastosowanego do innych elementów, które mogą się za nim znajdować.

Innymi słowy, jeśli mix-blend-modemówi nakładającym się elementom, aby łączyły się ze sobą, isolationtworzy wyjątek dla elementów, w których jest stosowany. To jest jak sposób na wyłączenie trybu mieszania mieszanego, ale z elementu nadrzędnego, zamiast konieczności bezpośredniego wybierania elementu z mieszaniem.

Wartości

  • isolate: Robi dokładnie to, co mówi. Chroni element przed wtopieniem się w inne elementy znajdujące się w tle.
  • auto: Resetuje izolację i pozwala elementowi wtopić się w tło.

Zobacz izolację pióra Cha-Cha-Cha autorstwa CSS-Tricks (@ css-tricks) na CodePen.

Przykład użycia

Maria Antonietta Perna, pisząca dla SitePoint, stworzyła demo, które szczególnie dobrze oddaje ten punkt. Stworzyliśmy tę grafikę, aby pomóc wyjaśnić jej demo:

Zobacz mieszanie tekstu / obrazu pióra z trybem mieszania mieszania przez SitePoint (@SitePoint) w CodePen.

Gdzie to nie działa

Możesz spodziewać isolationsię izolowania elementów, gdy background-blend-modejest używany, ale tak nie jest. Elementy tła są już izolowane ze swojej natury, ponieważ nie mieszają się z treścią, która za nimi stoi.

Innym miejscem, w którym isolationwydaje się być unieważniony, jest użycie w połączeniu z translatetym samym elementem. Możesz natknąć się na to, jeśli spróbujesz wyśrodkować element zarówno w pionie, jak iw poziomie za pomocą absolutepozycjonowania i translaterazem:

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

Użycie translatewydaje się izolować element samodzielnie bez użycia isolation.

Związane z

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

Więcej informacji

  • Specyfikacja W3C
  • izolacja na MDN
  • izolacja na Codrops
  • SitePoint: Zbliżenie na właściwość CSS mix-blend-mode

Przeglądarka obsługuje izolowanie

Chrom Safari Firefox Opera IE / Edge Android iOS
41 7.1 36 30 nie 41 8.4

Can I Use… Obsługa przeglądarki w trybie mieszania mieszanego

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
41 32 Nie 79 TP

Telefon komórkowy / tablet

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