ویژگی CSS isolation برای کنترل تعامل محتوای یک عنصر با والدین و خواهران خود از نظر رندرینگ و محتوای استکینگ استفاده می‌شود. این ویژگی در واقع تعیین می‌کند که یک عنصر آیا یک محیط استکینگ جدید ایجاد می‌کند یا خیر.
مقادیر ممکن
- auto: این مقدار پیش‌فرض است و نشان می‌دهد که محتوای عنصر یک محیط استکینگ جدید ایجاد نمی‌کند. به جای این، محتوای آن از محیط استکینگ والدینش به ارث می‌برد.
- isolate: این مقدار نشان می‌دهد که عنصر یک محیط استکینگ جدید ایجاد می‌کند و محتوای آن را از بقیه مستند جدا می‌کند. این بدان معناست که محتوای عنصر به طور مستقل از خواهران و والدینش رندر می‌شود.
اعمال می‌شود بر تمام عناصر. در SVG، بر روی عناصر ظرف، عناصر گرافیکی و عناصر مرجع گرافیکی اعمال می‌شود.
سینتکس:
isolation: auto | isolate;auto Value
این مثال از ویژگی isolation با مقدار auto نشان می‌دهد که چگونه یک محیط استکینگ جدید ایجاد می‌شود. ترکیب mix-blend-mode: difference، رنگ بالا را از رنگ پایین کم می‌کند و یک اثر با کنتراست بالا ایجاد می‌کند.
در این مثال، یک محیط استکینگ جدید با استفاده از ویژگی isolation با مقدار auto بر روی عنصر با کلاس box1 ایجاد شده است. این عنصر داخل یک عنصر با کلاس container قرار دارد که پس زمینه زردی دارد. همچنین، یک عنصر دیگر با کلاس box2 درون عنصر box1 و container واقع شده است که دارای یک border قرمز و ترکیب mix-blend-mode: difference است. این ترکیب باعث می‌شود که رنگ بالا از رنگ پایین کم شود و یک اثر با کنتراست بالا ایجاد شود.
<html>
<head>
<style>
.container {
background-color: yellow;
width: 250px;
height: 200px;
padding: 5px;
}
.box2 {
width: 130px;
height: 130px;
border: 5px solid red;
padding: 5px;
mix-blend-mode: difference;
margin-left: 50px;
}
.box1 {
isolation: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
<h3 class="container box2">isolation: auto;</h3>
</div>
</div>
</body>
</html>isolate Value
این مثال از ویژگی isolation با مقدار isolate نشان می‌دهد که چگونه یک محیط استکینگ جدید برای عنصر با کلاس box1 ایجاد می‌شود، که جلوی ترکیب شدن box1 با عناصر خارجی را می‌گیرد و ترکیب رنگ اعمال شده به box2 بر عناصر داخلی box1 تأثیری ندارد.
در این مثال، یک محیط استکینگ جدید با استفاده از ویژگی isolation با مقدار isolate بر روی عنصر با کلاس box1 ایجاد شده است. این عنصر داخل یک عنصر با کلاس container قرار دارد که پس زمینه زردی دارد. همچنین، یک عنصر دیگر با کلاس box2 درون عنصر box1 و container واقع شده است که دارای یک border قرمز و ترکیب mix-blend-mode: difference است. با اعمال این ترکیب، رنگ بالا از رنگ پایین کم می‌شود و یک اثر با کنتراست بالا ایجاد می‌شود. اما به دلیل استفاده از مقدار isolate برای ویژگی isolation، box1 مستقل از عناصر خارجی و مستقل از ترکیب رنگ‌های دیگر استکینگ می‌شود و تأثیری در عناصر داخلی خود ندارد.
<html>
<head>
<style>
.container {
background-color: yellow;
width: 250px;
height: 200px;
padding: 5px;
}
.box2 {
width: 130px;
height: 130px;
border: 5px solid red;
padding: 5px;
mix-blend-mode: difference;
margin-left: 50px;
}
.box1 {
isolation: isolate;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
<h3 class="container box2">isolation: isolate;</h3>
</div>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام