خاصية Isolation
آخر تحديث: 2026-09-13
isolation خاصية Isolation
تتحكم خاصية isolation فيما إذا كان العنصر يُنشئ سياق تكديس جديداً. عند ضبطها على isolate، يُشكّل العنصر بيئة دمج مستقلة بحيث يمزج mix-blend-mode للعناصر الفرعية مع المحتوى داخل العنصر فقط، دون تسريب إلى العناصر الخارجية. إنها خاصية أساسية للتحكم بدقة في نطاق أنماط الدمج.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
isolation: auto | isolate;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | isolate | كلمة مفتاحية | ما إذا كان يجب إنشاء سياق تكديس جديد |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| isolation | ✓ v43 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v30 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： الاستخدام الأكثر شيوعاً لـ isolate هو مع mix-blend-mode، لمنع تسريب الدمج إلى عناصر لا تريد التأثير عليها.
❓ الأسئلة الشائعة
Qما خصائص CSS التي تُنشئ سياق تكديس في المتصفح؟
Aمن الشائعة: position مع z-index غير تلقائي، و opacity أقل من 1، و transform غير none، و filter غير none، و mix-blend-mode غير normal، و will-change. يُنشئ isolation: isolate سياق تكديس عمداً، ويبقي الدمج والتكديس معزولين داخله.
Qما الفرق بين isolation: auto و isolation: isolate؟
Aلا يُنشئ auto سياق تكديس بمفرده: ينضم العنصر إلى بيئة التكديس الخاصة بالأب، لذا يمكن لـ mix-blend-mode للعناصر الفرعية أن يتجاوزه ويمزج مع محتوى أبعد. أما isolate فيفرض سياق تكديس جديداً، محدّداً نطاق الدمج داخل العنصر: تمزج العناصر الفرعية مع المحتوى الداخلي فقط ولا تتسرب للخارج. استخدم isolate عند الحاجة إلى تحكم دقيق في حدود الدمج.
Qإلى جانب أنماط الدمج، هل لـ isolation: isolate استخدامات أخرى؟
Aيمكن استخدامه في أي مكان تتطلب فيه علاقات التكديس عزلاً: منع أنماط دمج العناصر الفرعية من التأثير على العناصر الخارجية، والحد من نطاق مقارنات z-index، ومنع تداخل التموضع والطبقات الداخلية مع الخارج، والدمج مع contain: paint لتحسين العرض. في جوهره، يوفر isolate طريقة نظيفة لإنشاء سياق تكديس دون الاعتماد على z-index أو opacity.
Qما الفرق بين خاصية isolation و z-index؟
Aلا يمكن ضبط z-index إلا على العناصر المتموضعة ويضبط ترتيب التكديس — فالقيمة الأكبر تتراص أعلى. أما isolation: isolate فلا يغيّر الترتيب العلوي-السفلي للعناصر؛ بل يُنشئ حداً عازلاً يفصل التكديس الداخلي عن الخارج. كلاهما يتعلق بسياقات التكديس، ولكن z-index يقرر من هو في الأعلى، بينما isolation يقرر أين يقع الحد.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
