صفت isolation در css ایزوله کردن گروهی عناصر html

صفت isolation در css ایزوله کردن گروهی عناصر html

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت isolation در زبان css توضیحاتی را ارائه نماییم.

ویژگی isolation در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

صفت isolation در css ایزوله کردن گروهی از عناصر html

معرفی ویژگی کاربردی isolation در زبان طراحی سی اس اس

توسط خاصیت isolation می توانیم گروهی از تگ های html را در مقابل آمیخته شدن با محتوای پشت سرشان ایزوله کنیم.

معمولا زمانی ویژگی isolation کاربرد دارد که به جهت استفاده از خصوصیت mix-blend-mode و یا خصوصیت background-blend-mode با آمیخته شدن گروهی از تگ های html و یا ترکیب شدن گروهی از رنگ ها در پس زمینه مواجه شدیم.

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

همچنین می توانید رنگ های ترکیب شده در پس زمینه عناصر html را توسط خاصیت isolation ، ایزوله نمایید.

مقادیر صفت کاربردی isolation در زبان طراحی css

صفت کاربردی isolation که در زبان طراحی CSS3 معرفی شده است، 4 مقدار می پذیرد که عبارتند از:

مقدار auto
مقدار isolate
مقدار initial
مقدار inherit

مقدار auto درون خاصیت isolation در زبان سی اس اس

اگر خاصیت isolation را برابر با مقدار auto قرار دهیم، یعنی می خواهیم برای تگ html مربوطه ایزوله سازی انجام نشود.

مقدار auto به عنوان مقدار پیش فرض خصوصیت isolation می باشد.

مقدار isolate درون خاصیت isolation در زبان css

اگر خاصیت isolation را برابر با مقدار isolate قرار دهیم، یعنی می خواهیم برای تگ html مربوطه عمل ایزوله سازی و جلوگیری از ترکیب تگ html با تگ نگهدارنده آن را اعمال نماییم.

صفت isolation در css ایزوله کردن گروهی از عناصر html

مقدار initial درون خاصیت isolation در زبان سی اس اس

اگر خاصیت isolation را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت isolation در زبان css

اگر خاصیت isolation را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

صفت isolation در css ایزوله کردن گروهی عناصر html

مثالی از کاربرد خاصیت isolation در جلوگیری از ترکیب عناصر html

فرض کنید قصد دارید محتوای یک تگ h2 را با محتوای پشت سرش ترکیب کنید. در این صورت می بایست از خصوصیت mix-blend-mode استفاده نمایید.

[html]<div class=”container”>
<img src=”isolation-siteamoozi.jpg” alt=”isolation-siteamoozi”>
<div class=”text-wrapper-siteamoozi”>
<h2>Siteamoozi.com</h2>
</div>
</div>[/html]

به استایل های مربوط به قطعه کد بالا توجه کنید:

[html]div.text-wrapper-siteamoozi {
position: relative;
top: -400px; }
div.text-wrapper-siteamoozi h2 {
color: white;
mix-blend-mode: overlay;
background-color: black; }[/html]

خروجی کد در مرورگر اینترنتی

صفت isolation در css ایزوله کردن گروهی از عناصر html

در تصویر بالا ملاحظه می کنید که تگ h2 در محتوای پشت سرش آمیخته شده است. و اثری از پس زمینه مشکی رنگ که برای آن توسط خاصیت background تعریف کردیم دیده نمی شود.

حال اگر بخواهیم از ترکیب و آمیختگی تگ h2 با محتوای پشت سرش که با خاصیت mix-blend-mode ایجاد شده است جلوگیری نماییم، می بایست از ویژگی isolation برای تگ div قبل از تگ h2 ( عنصر نگهدارنده تگ h2 ) ، استفاده نماییم.

[html]div.text-wrapper-siteamoozi {
isolation:isolate; }[/html]

خروجی کد در مرورگر اینترنتی

صفت isolation در css ایزوله کردن گروهی از عناصر html

بررسی خاصیت isolation از نظر نسخه زبان طراحی سی اس اس

خصوصیت isolation در سومین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

بررسی ساختاری خصوصیت isolation


عناوین ساختاری خاصیت isolation	وضعیت ساختاری خاصیت isolation
مقدار پیش فرض	auto
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.isolation="isolate