احتواء CSS في Chrome 52

TL;DR

تتيح خاصية احتواء CSS الجديدة للمطوّرين أن يحدّوا من نطاق عمل الأنماط والتنسيق والرسومات في المتصفّح.

لها بعض القيم، مما يجعل بناء الجملة كما يلي:

    contain: none | strict | content | [ size || layout || style || paint ]

فهو يتوفر في الإصدار 52 من Chrome والإصدار 40 أو الإصدارات الأحدث (بالإضافة إلى الدعم العام من Firefox)، لذا جرّبه الآن وأخبرنا بمدى نجاحك.

السمة "تحتوي على"

عند إنشاء تطبيق ويب أو حتى موقع معقد، يتمثل أحد التحديات الرئيسية في الأداء في الحد من تأثيرات الأنماط والتخطيط والطلاء. في كثير من الأحيان، يُعدّ كامل نموذج DOM "ضمن نطاق" عمليات الحوسبة، ما قد يعني أنّ محاولة إجراء "عرض" مستقل في تطبيق ويب قد تكون صعبة: قد تؤثر التغييرات في جزء واحد من نموذج العناصر في المستند (DOM) على أجزاء أخرى، ولا تتوفّر طريقة لإخبار المتصفّح بما يجب أن يكون داخل النطاق أو خارجه.

على سبيل المثال، لنفترض أنّ جزءًا من DOM يبدو كما يلي:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
    </section>

    <section class="view">
      Contact
    </section>

وتقوم بإلحاق عنصر جديد بطريقة عرض واحدة، مما يؤدي إلى تشغيل الأنماط والتخطيط والطلاء:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
      <div class="newly-added-element">Check me out!</div>
    </section>

    <section class="view">
      Contact
    </section>

في هذه الحالة، يكون نموذج كائن المستند بالكامل (DOM) بالكامل ضمن النطاق بشكل فعّال، ما يعني أنّ العمليات الحسابية للنمط والتصميم ورسم الصورة يجب أن تراعي جميع العناصر بغض النظر عمّا إذا كان قد تمّ تغييرها أم لا. وكلما زاد حجم نموذج العناصر في المستند (DOM)، زادت أعمال الحوسبة التي تنطوي عليها، ما يعني أنه يمكنك جعل تطبيقك غير مستجيب لإدخال المستخدم.

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

ولكن الأفضل من ذلك هو توفّر خاصية جديدة في CSS تتيح التحكّم في النطاق للمطوّرين وهي: الاحتواء.

احتواء CSS هو سمة جديدة، تحتوي الكلمة الرئيسية عليها على أربع قيم:

• layout
• paint
• size
• style

وتسمح لك كل قيمة من هذه القيم بالحدّ من مقدار عمل العرض الذي يحتاجه المتصفّح. في ما يلي نظرة أكثر تفصيلاً على كلّ منها.

التخطيط (يحتوي على: تخطيط)

من المحتمل أن يكون احتواء التنسيق أكبر فائدة للاحتواء، إلى جانب السمة contain: paint.

يكون التنسيق عادةً على مستوى المستند، ما يجعله يتم تغيير حجمه بشكل متناسب مع حجم نموذج العناصر في المستند (DOM)، وبالتالي إذا غيّرت سمة left لأحد العناصر، قد يلزم التحقّق من كل عنصر في عنصر DOM.

من المحتمل أن يؤدي تفعيل الاحتواء هنا إلى تقليل عدد العناصر إلى مجرد عدد قليل، بدلاً من المستند بأكمله، مما يوفر على المتصفح الكثير من العمل غير الضروري ويحسن الأداء بشكل كبير.

طلاء (يحتوي على: طلاء)

تحديد نطاق الطلاء هو فائدة أخرى مفيدة للغاية للاحتواء. يقوم احتواء الطلاء بشكل أساسي باقتصاص العنصر المعني، ولكن له أيضًا بعض الآثار الجانبية الأخرى:

• تكون بمثابة كتلة تحتوي على العناصر ذات الموضع الكامل والثابت. وهذا يعني أنه يتم تحديد موضع أي عنصر فرعي بناءً على العنصر الذي يحتوي على contain: paint وليس على أي عنصر رئيسي آخر مثل -- لنفترض -- المستند.
• يصبح سياقًا مكدسًا. وهذا يعني أن أشياء مثل z-index سيكون لها تأثير على العنصر، وسيتم تكديس العناصر الثانوية وفقًا للسياق الجديد.
• يتحوّل إلى سياق تنسيق جديد. وهذا يعني أنّه إذا كان لديك مثلاً عنصر على مستوى الكتلة مع احتواء الطلاء، سيتم التعامل معه كبيئة تنسيق جديدة مستقلة. هذا يعني أن التنسيق خارج العنصر لن يؤثر عادةً في العناصر الثانوية للعنصر الذي يحتوي عليه.

الحجم (يحتوي على: الحجم)

ويعني contain: size أنّ العناصر الثانوية للعنصر لا تؤثّر في حجم العنصر الرئيسي، وأنّ أبعاده المستنتَجة أو المعلَن عنها سيتم استخدامها. وبالتالي، إذا أردت ضبط السمة contain: size بدون تحديد أبعاد العنصر (إما مباشرةً أو من خلال الخصائص المرنة)، سيتم عرضه بمقاس 0 بكسل × 0 بكسل.

إنّ ميزة احتواء المقاس هي إجراء يضمن عدم الاعتماد على العناصر الثانوية لتحديد المقاسات، لكنّه في حد ذاته لا يحقق فائدة كبيرة من حيث الأداء.

النمط (يحتوي على: النمط)

قد يكون من الصعب التنبؤ بتأثير تغيير أنماط عنصر ما على شجرة عناصر DOM. ومن الأمثلة على ذلك عدّادات CSS، إذ إنّ تغيير العدّاد في عنصر فرعي يمكن أن يؤثر في القيم المضادة التي تحمل الاسم نفسه المستخدَم في مكان آخر في المستند. عند ضبط contain: style، لن يتم نشر تغييرات النمط مرة أخرى بعد العنصر الذي يحتوي على العنصر.

لتوضيح الأمر، ما لا يوفّره contain: style هو النمط المخصّص لتحديد نطاق البيانات كما تحصل عليه من Shadow DOM. فالاحتواء هنا يقتصر على الحد من أجزاء الشجرة التي يتم وضعها في الاعتبار عند تغيير الأنماط، وليس عند تعريفها.

صارمة واحتواء محتوى

يمكنك أيضًا دمج كلمات رئيسية، مثل contain: layout paint، التي ستطبّق هذه السلوكيات فقط على أحد العناصر. ولكن تدعم أيضًا قيمتين إضافيتين:

• contain: strict تعني نفس الشيء مثل contain: size layout paint
• contain: content تعني نفس الشيء مثل contain: layout paint

يعد استخدام الاحتواء الصارم أمرًا رائعًا عندما تعرف حجم العنصر مسبقًا (أو تريد الاحتفاظ بأبعاده)، ولكن يجب أن تضع في اعتبارك أنه إذا أعلنت أن الاحتواء الصارم بدون أبعاد، بسبب احتواء الحجم الضمني، قد يتم عرض العنصر كمربع بمقاس 0 بكسل × 0 بكسل.

من ناحية أخرى، يوفر احتواء المحتوى تحسينات مهمة في النطاق، لكنه لا يتطلب منك معرفة أبعاد العنصر أو تحديدها مسبقًا.

ومن بين الخيارَين، عليك استخدام contain: content تلقائيًا. يجب أن تتعامل مع الاحتواء الصارم على أنّه بمثابة مخرج من الهروب عندما لا يكون contain: content قويًا بما يكفي لتلبية احتياجاتك.

أخبِرنا بمدى تقدمك

يعتبر الاحتواء طريقة رائعة لبدء إعلام المتصفح بما تريد أن تظل معزولاً في صفحتك. يمكنك تجربته في الإصدار 52 من Chrome والإصدارات الأحدث وإعلامنا بمدى نجاحك.

روابط مفيدة

• مواصفات احتواء CSS
• الاحتواء على حالة Chrome