آموزش ویژگی isolation در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی isolation در CSS با من همراه باشید.

آموزش ویژگی isolation در CSS

Free-Learn

ویژگی isolation در CSS

با استفاده از ویژگی isolation در CSS میتوان از مخلوط شدن عناصر با زمینه ها ( رنگ زمینه ) جلوگیری کرد و تعریف کنیم که عنصر بصورت جدا از زمینه خودش ، نمایش داده شود.

برای مخلوط کردن ( متن ، تصویر و… ) با زمینه ها از ویژگی mix-blend-mode استفاده میشود.

در CSS ویژگی background-blend-mode رو هم داریم که با استفاده از آن نیز میتوان تصویر زمینه را با رنگ زمینه مخلوط کرد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی isolation را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : در مثال زیر ۲ تصویر در یک ظرف قرار دارند، و ظرف از حالت mix-blend-mode برای مخلوط کردن رنگ زمینه با محتوای موجود در ظرف استفاده میکند.

این یعنی هر چیزی در ظرف قرار بگیرد با رنگ زمینه ظرف مخلوط میشود و عملا رنگ و استایلش تغییر میکند، ولی اون تصویری که از ویژگی isolation با مقدار isolate استفاده کرده اجازه مخلوط شدن با زمینه را نمیدهد.

امتحان کنید

Free-Learn

جدول مشخصات ویژگی isolation در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.isolation=”isolate”;

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی isolation در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
isolation ۴۱٫۰ ۳۶٫۰ ۳۰٫۰ ۸٫۰ خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی isolation در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto پیش فرض – بصورت خودکار عنصر با زمینه مخلوط میشود
isolate از مخلوط شدن عنصر با زمینه جلوگیری میکند
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

  • این ویژگی در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود
  • برای ترکیب کردن رنگ زمینه با عناصر میتوانید از ویژگی mix-blend-mode استفاده نمایید

از این ویژگی باید درون عنصر پدر یا والد استفاده نمایید، نه اینکه بصورت مستقیم در خوده عنصر استفاده نمایید :

 

Free-Learn

دریافت PDF یا پرینت این مطلب