CSS Academy · درس

خاصية isolation

تحكّم في نطاق المزج وامنع تأثيرات المزج غير المرغوبة باستخدام الخاصية isolation

خاصية isolation درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما المقصود بالعزل؟

تتحكم خاصية isolation فيما إذا كان العنصر ينشئ سياق تكديس جديدًا يعزل محتوياته عن تأثيرات المزج للعناصر الموجودة خارج المجموعة المعزولة.

isolation: isolate

تنشئ isolation: isolate سياق تكديس جديدًا من دون أي تأثير مرئي. والغرض الوحيد منها هو منع أوضاع المزج داخل العنصر من التأثير في العناصر الموجودة خارجه.

<div class="page-bg">
  <div class="card">Card content <span class="accent">accent</span></div>
</div>

المشكلة التي تحلها

من دون العزل، تمتزج mix-blend-mode مع جميع العناصر الموجودة أسفل العنصر في سياق التكديس نفسه، بما في ذلك خلفية الصفحة والمكوّنات الأخرى. ويؤدي ذلك إلى مزج غير مقصود عبر حدود المكوّنات.

مثال عملي

بطاقة تحتوي على وضع مزج يجب ألا يؤثر في الخلفية العامة:

<div class="page">
  <div class="card">Card <span class="accent">Accent</span></div>
</div>

طرق أخرى لإنشاء سياق تكديس

خصائص أخرى تنشئ ضمنيًا سياق تكديس، وبالتالي تعزل أوضاع المزج:

opacity أقل من 1
transform ليست none
filter ليست none
will-change مع خصائص معينة

تُعد isolation: isolate الخيار المقصود الذي لا يسبب آثارًا جانبية.

isolation: auto (الافتراضي)

لا تنشئ isolation: auto (وهي القيمة الافتراضية) سياق تكديس جديدًا. وتتسرب أوضاع المزج إلى الخارج ما لم تنشئ خاصية أخرى سياقًا جديدًا من قبيل المصادفة.

isolation مقابل z-index

لا ينشئ z-index وحده سياق تكديس، إلا إذا اقترن بموضع غير static. وتُعد isolation: isolate الطريقة الصريحة والخالية من الآثار الجانبية لإنشاء سياق تكديس.

isolation مع SVG

في SVG، يتحكم العزل فيما إذا كانت أوضاع المزج تُطبَّق داخل منفذ عرض SVG أو تستمر في التأثير في محتوى HTML الموجود أسفله. ويؤدي ضبطه على عنصر SVG إلى إبقاء المزج داخل SVG نفسه.

نمط حدود المكوّن

من أفضل الممارسات تطبيق isolation: isolate على حاوية كل مكوّن رئيسي في واجهة المستخدم لمنع تسرب المزج:

<div class="card">Card</div>
<div class="modal">Modal</div>
<div class="sidebar">Sidebar</div>
<div class="tooltip">Tooltip</div>

تصحيح مشكلات أوضاع المزج

إذا كان وضع مزج يؤثر في عناصر غير متوقعة، فعادةً ما يكون السبب هو غياب العزل. أضف isolation: isolate إلى أقرب سلف مشترك لمكوّنات المزج لحصر التأثير.

تأثير الأداء

تنشئ isolation: isolate سياق تكديس جديدًا، وبالتالي طبقة تركيب جديدة. وهذا خفيف عمومًا، وأقل تكلفة بكثير من ترقية الطبقة باستخدام will-change: transform.

تحقق سريع

ماذا يحدث عند تطبيق mix-blend-mode: multiply على عنصر داخل حاوية تحتوي على isolation: isolate؟

مراجعة

تنشئ isolation: isolate سياق تكديس جديدًا من دون آثار مرئية؛ والغرض الوحيد منها هو حصر تأثيرات mix-blend-mode داخل حدود المكوّن. طبّقها على حاويات جميع مكوّنات واجهة المستخدم الرئيسية لمنع أوضاع المزج من التأثير عرضيًا في الخلفية العامة أو المكوّنات الشقيقة. وهي البديل المقصود والنظيف لاستخدام opacity أو transform كآلية عزل عرضية.

الأسئلة الشائعة

هل درس «خاصية isolation» مجاني؟

نعم — نص درس «خاصية isolation» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «خاصية isolation»؟

تحكّم في نطاق المزج وامنع تأثيرات المزج غير المرغوبة باستخدام الخاصية isolation تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «خاصية isolation»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy