Изолација - ЦСС-трикови

Anonim

isolationИмовина у ЦСС се користи за спречавање елементе из мешањем са њиховим позадинама.

.module ( isolation: isolate; )

Најчешће се користи када mix-blend-modeје декларисан на другом елементу. Примена isolationна елемент чува тај елемент тако да не наследи mix-blend-modeпримењено на остале елементе који би могли бити иза њега.

Другим речима, ако mix-blend-modeговори преклапајућим елементима да се стопе једни с другима, онда isolationствара изузеће за елементе на којима се примењује. То је као начин да искључите мик-бленд-моде, али из надређеног елемента, уместо да треба директно да изаберете елемент са блендингом.

Вредности

  • isolate: Ради тачно оно што пише. Штити елемент од стапања са другим елементима који су у позадини.
  • auto: Ресетује изолацију и омогућава елементу да се уклопи у његову позадину.

Погледајте изолацију оловке Цха-Цха-Цха компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Случај употребе

Мариа Антониетта Перна, пишући за СитеПоинт, креирала је демонстрацију која посебно добро води ствар до куће. Направили смо ову графику да бисмо објаснили њен демо:

Погледајте мешавину оловке Текст / слика са режимом мешања-мешања, СитеПоинт (@СитеПоинт) на ЦодеПен-у.

Тамо где то не иде

Могли бисте очекивати 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

Више информација

  • В3Ц спецификација
  • изолација на МДН
  • изолација на Цодропс
  • СитеПоинт: Поглед изблиза у својство ЦСС мик-бленд-моде

Подршка прегледача за изолат

Хром Сафари Фирефок Опера ИЕ / Едге Андроид иОС
41 7.1 36 30 Јок 41 8.4

Могу ли да користим ... Подршка прегледача за мик-бленд-моде

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
41 32 Не 79 ТП

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

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 14.0-14.4