احتواء CSS في Chrome 52

الملخّص

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

احتواء CSS. قبل ذلك: يستغرق التنسيق 59.6 ملي ثانية. بعد: يستغرق التنسيق 0.05 ملي ثانية

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

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

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

سمة الاحتواء

عند إنشاء تطبيق ويب أو حتى موقع معقد، يكون أحد تحديات الأداء الرئيسية هو الحد من تأثيرات الأنماط والتخطيط والطلاء. في كثير من الأحيان، يُعتبر كامل نموذج العناصر في المستند "داخل النطاق" لعمليات الحوسبة، ما قد يعني أن محاولة "عرض" مستقل في تطبيق ويب قد يكون أمرًا صعبًا: يمكن أن تؤثر التغييرات في جزء من نموذج العناصر في المستند (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، زادت عمليات الحوسبة التي تشملها العملية، ما يعني أنّه قد يصبح تطبيقك غير مستجيب لإدخالات المستخدم.

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

والخبر الأفضل هو توفّر خاصية 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 والإصدارات الأحدث وإخبارنا برأيك في ذلك.