Ізоляція - 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 ТП

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

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