مساعدة المتصفحات على التحسين باستخدام خاصية احتواء CSS

في هذه المقالة ، سأقدم مواصفات CSS التي أصبحت للتو توصية W3C. تحدد مواصفات احتواء CSS خاصية واحدة ، contain ، ويمكن أن تساعدك في أن تشرح للمتصفح أي أجزاء من التخطيط الخاص بك مستقلة ولن تحتاج إلى إعادة الحساب إذا تغير جزء آخر من التخطيط.

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

مشكلة إعادة حساب التخطيط

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

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

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

كيف يساعد الاحتواء؟

مستند HTML هو هيكل شجرة يمكنك رؤيته عند فحص أي عنصر باستخدام DevTools. في المثال أعلاه ، حددت عنصرًا واحدًا أريد تغييره باستخدام JavaScript ، ثم أجري بعض التغييرات على العناصر الداخلية. (هذا يعني أنني أقوم فقط بتغيير الأشياء داخل الشجرة الفرعية لعنصر القائمة هذا.)

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

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

باستخدام الاحتواء

يمكن أن تحدد خاصية contain ثلاثة أنواع مختلفة من الاحتواء:

• layout
• paint
• size

ملاحظة : توجد قيمة style في مواصفة المستوى 2. تمت إزالته من المستوى 1 ، لذلك لا يظهر في التوصية ، ولم يتم تنفيذه في Firefox.

تخطيط

يجلب احتواء التخطيط أكبر الفوائد. لتشغيل احتواء التخطيط ، استخدم المقتطف التالي:

 .item { contain: layout; }

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

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

ينشئ المربع سياق تنسيق مستقل . يضمن ذلك بقاء محتوى الصندوق في المربع - خاصةً العوامات التي سيتم احتواؤها ولن تنهار الهوامش عبر الصندوق. هذا هو نفس السلوك الذي نقوم بتشغيله عندما نستخدم display: flow-root كما هو موضح في مقالتي "فهم تخطيط CSS وسياق تنسيق الكتلة". إذا كان من الممكن أن يخرج العوامة من صندوقك ، مما يتسبب في تدفق النص التالي حول العوامة ، فسيكون هذا موقفًا حيث كان العنصر يغير تخطيط الأشياء الموجودة خارجها ، مما يجعله مرشحًا ضعيفًا للاحتواء.

يعمل الصندوق المحتوي على أنه كتلة تحتوي على أي أحفاد ذات وضع مطلق أو ثابت. هذا يعني أنه سيتصرف كما لو كنت قد استخدمت position: relative في المربع الذي قمت بتطبيقه ، والذي contain: layout .

يُنشئ المربع أيضًا سياق التراص . لذلك سيعمل z-index على هذا العنصر ، وسيتم تكديس العناصر الفرعية بناءً على هذا السياق الجديد.

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

رسم

لتشغيل احتواء الطلاء ، استخدم ما يلي:

 .item { contain: paint; }

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

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

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

مع تشغيل احتواء الطلاء ، يتم الآن قطع العنصر الطافي إلى حجم المربع. لا يمكن رسم أي شيء خارج حدود العنصر contain: paint مطبق.

بحجم

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

 .item { contain: size; }

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

في المثال أدناه ، لم أعطي ارتفاعًا li ؛ contain: size المطبق. يمكنك أن ترى أن جميع العناصر قد انهارت كما لو أنها لا تحتوي على محتوى على الإطلاق ، مما يجعلها قائمة ذات مظهر غريب للغاية!

إذا أعطيت الصناديق ارتفاعًا ، فسيتم احترام الارتفاع عند contain: size . وحده ، لن يؤدي احتواء الحجم إلى إنشاء سياق تنسيق جديد وبالتالي لا يحتوي على عوامات وهوامش كما سيفعل احتواء التخطيط والطلاء. من غير المرجح أن تستخدمه بمفرده ؛ بدلاً من ذلك ، فمن الأرجح أنك ستطبقه مع قيم أخرى لـ " contain " لتتمكن من الحصول على أكبر قدر ممكن من الاحتواء.

قيم الاختزال

في معظم الحالات ، يمكنك استخدام إحدى قيمتي الاختزال للحصول على أقصى استفادة من الاحتواء. لتشغيل احتواء التخطيط والطلاء ، استخدم contain: content; ، ولتشغيل كل وسائل الاحتواء الممكنة (مع الأخذ في الاعتبار أن العناصر التي ليس لها حجم ستنهار بعد ذلك) ، استخدم contain: strict .

المواصفات تقول:

" contain: content " آمن "بشكل معقول لتطبيقه على نطاق واسع ؛ آثاره طفيفة إلى حد ما من الناحية العملية ، ولن يتعارض معظم المحتوى مع قيودها. ومع ذلك ، نظرًا لأنه لا يطبق احتواء الحجم ، فلا يزال بإمكان العنصر الاستجابة لحجم محتوياته ، مما قد يتسبب في إبطال التخطيط للتسلل إلى أعلى الشجرة أكثر مما هو مرغوب فيه. استخدم " contain: strict عندما يكون ذلك ممكنًا ، لكسب أكبر قدر ممكن من الاحتواء".

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

هل يمكنني استخدام الاحتواء الآن؟

مواصفات احتواء CSS هي الآن توصية W3C وهو ما نشير إليه أحيانًا كمعيار ويب . لكي تصل المواصفات إلى هذه المرحلة ، يجب أن يكون هناك تطبيقان للميزة يمكننا رؤيتها في كل من Firefox و Chrome:

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

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

لذلك ، إذا كانت لديك صفحة تضيف محتوى إلى DOM بعد التحميل ، فإنني أوصي بتجربتها - إذا حصلت على أي نتائج مثيرة للاهتمام ، فأعلمني بذلك في التعليقات!

موارد ذات الصلة

ستمنحك الموارد التالية مزيدًا من التفاصيل حول تنفيذ الاحتواء وفوائد الأداء المحتملة:

• “The contain CSS Property ،” MDN web docs
• "احتواء CSS في Chrome 52" ، مطورو Google
• "وحدة احتواء CSS المستوى 1 ،" توصية W3C
• "مقدمة لاحتواء CSS ،" مانويل ريغو كاساسنوفاس