Изолация - CSS-трикове

Anonim

В isolationимота в CSS се използва за предотвратяване на елементи от смесване с техните декори.

.module ( isolation: isolate; )

Най-често се използва, когато mix-blend-modeе деклариран за друг елемент. Прилагането isolationкъм елемента пази този елемент, така че да не наследява mix-blend-modeприложеното към останалите елементи, които може да са зад него.

С други думи, ако mix-blend-modeказва на припокриващите се елементи да се смесват един с друг, тогава isolationсъздава изключение за елементите, където се прилага. Това е като начин да изключите режима на смесване, но от родителски елемент, вместо да се налага директно да изберете елемента със смесване.

Стойности

  • isolate: Прави точно това, което пише. Той предпазва елемента от смесване с други елементи, които са на фона.
  • auto: Нулира изолацията и позволява на елемента да се слее в неговия фон.

Вижте Изолацията на писалката Cha-Cha-Cha от CSS-Tricks (@ css-tricks) на CodePen.

Случай за употреба

Мария Антониета Перна, пишейки за SitePoint, създаде демонстрация, която насочва точката към дома особено добре. Създадохме тази графика, за да обясним нейната демонстрация:

Вижте смес Текст / Изображение на писалка с режим на смесване на смесване от SitePoint (@SitePoint) на CodePen.

Където не работи

Може да очаквате isolationда изолирате елементи, когато background-blend-modeсе използва, но това не е така. Елементите на фона вече са изолирани по своята същност, тъй като не се смесват със съдържанието, което е зад тях.

Друго място, където isolationизглежда обезсилено, е когато се използва заедно с translateедин и същ елемент. Може да се натъкнете на това, ако се опитате да центрирате елемент както вертикално, така и хоризонтално, като използвате absoluteпозициониране и translateзаедно:

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

Използването на translateизглежда изолира елемента самостоятелно, без използването isolation.

Свързани

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

Повече информация

  • Спецификация на W3C
  • изолация на MDN
  • изолация на Codrops
  • SitePoint: Поглед отблизо на свойството на CSS режим на смесване

Поддръжка на браузър за изолиране

Chrome Сафари Firefox Опера IE / Edge Android iOS
41 7.1 36 30 Не 41 8.4

Мога ли да използвам ... Поддръжка на браузър за микс-бленд режим

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
41 32 Не 79 TP

Мобилен / таблет

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