Изоляция - CSS-хитрости

Anonim

isolationСвойство в CSS используется для предотвращения элементов от смешивания с их фонами.

.module ( isolation: isolate; )

Чаще всего он используется, когда mix-blend-modeбыл объявлен для другого элемента. Применение isolationк элементу защищает этот элемент, чтобы он не унаследовал mix-blend-modeпримененный к другим элементам, которые могут находиться за ним.

Другими словами, если mix-blend-modeон сообщает перекрывающимся элементам, чтобы они сливались друг с другом, то isolationсоздает исключение для элементов, к которым оно применяется. Это похоже на способ выключить режим смешивания-наложения, но из родительского элемента, вместо того, чтобы выбирать элемент напрямую с помощью смешивания.

Значения

  • isolate: Делает именно то, что написано. Он защищает элемент от смешивания с другими элементами, находящимися на заднем плане.
  • auto: Сбрасывает изоляцию и позволяет элементу сливаться с фоном.

См. Раздел Pen Isolation Cha-Cha-Cha by CSS-Tricks (@ css-tricks) на CodePen.

Пример использования

Мария Антониетта Перна, писатель для SitePoint, создала демонстрацию, которая особенно хорошо демонстрирует суть. Мы создали этот рисунок, чтобы объяснить ее демонстрацию:

См. Наложение Pen Text / Image с помощью режима смешивания 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 mix-blend-mode

Браузерная поддержка для изоляции

Хром Сафари Fire Fox Опера IE / Edge Android iOS
41 год 7.1 36 30 Неа 41 год 8,4

Могу ли я использовать… Браузер Поддержка режима смешивания и смешивания

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
41 год 32 Нет 79 TP

Мобильный / планшет

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