isolation

از ویژگی isolation برای ایزوله کردن یک گروه از عناصر در برابر آمیخته شدن با محتوای پشت سرشان استفاده می شود.

معمولا از isolation در زمانی که از ویژگی mix-blend-mode استفاده می کنیم, بهره می بریم.

فرض کنید یک متن در تگ <h1> را بخواهیم با محتوای پشت سرش ترکیب کنیم, ساختار بصورت زیر است:

<div class="container">
  <img src="isolation-destination.jpg" alt="never leave the alt empty!">
  <div class="text-wrapper">
    <h1>CSS-Tricks.ir</h1>
  </div>
</div>

و همینطور در قسمت استایل داریم:

.text-wrapper {
  position: relative;
  top: -350px;
}

.text-wrapper h1 {
  color: white;
  mix-blend-mode: overlay;
  background-color: darkmagenta;
}

 
نتیجه بصورت زیر خواهد بود:

همانطور که مشاهده می کنید متن نمونه بالا با محتوای پشت سرش کاملا آمیخته شده است و اثری از رنگ بنفش پس زمینه متن نیست. کار ویژگی isolation جلوگیری از آمیختگی است و این کار را با ایزوله کردن عناصر در مقابل blending یا آمیختگی, انجام می دهد.
کافی است در مثال بالا به عنصر نگهدارنده متن, این ویژگی را اعمال کنیم:

.text-wrapper {
  isolation: isolate;  
}

نتیجه بصورت زیر خواهد شد:

مقدار پیش فرض این ویژگی auto است که ایزوله سازی انجام نمی دهد. نکته خیلی مهم اینکه ویژگی هایی در CSS هستند که وقتی بر روی یک عنصر اعمال می شوند باعث ایزوله سازی عنصر می شوند و دیگر نیازی به استفاده از ویژگی isolation برای آن عنصر نخواهد بود.
مثلا زمانی که از translate و یا opacity استفاده می کنید.

در مثال بالا کافی بود به جای دادن ویژگی isolation به عنصر نگهدارنده, بصورت زیر عمل کنیم:

.text-wrapper {
  opacity: .99;
}

عنصر ایزوله می شود و نتیجه یکسان خواهیم داشت.

See the Pen isolation by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها