Articles
مقدمة إلى CSS
خصائص `overflow` و `contain`

خصائص `overflow` و `contain`

تشرح هذه المقالة خصائص overflow و contain۔

يمكنك تعلم كيفية وصف أشياء مثل عرض شريط التمرير والاقتصاص باستخدام خاصية overflow۔

YouTube Video

HTML للمعاينة

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

خصائص overflow و contain

overflow

خاصية overflow في CSS هي خاصية مهمة تتحكم في كيفية عرض محتويات عنصر عندما تتجاوز حجم صندوقه.۔ تُستخدم بشكل شائع لتشكيل تخطيط وواجهة المستخدم لصفحات الويب، مما يساعد في إدارة عرض شريط التمرير والاقتصاص وتجاوز العناصر.۔

أساسيات خاصية overflow

خاصية overflow لها أربع قيم رئيسية: visible، hidden، scroll، و auto۔

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

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

الميزات:

  • يتم عرض المحتوى دون قيود۔
  • لا يتم عرض شريط التمرير۔
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

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

الميزات:

  • عندما يتجاوز المحتوى حدود العنصر، يتم إخفاء الجزء الزائد.۔
  • لا يتم عرض شريط التمرير۔
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

عند استخدام scroll، يتم عرض شريط التمرير إجباريًا إذا تجاوز محتوى العنصر حجم الصندوق.۔ حتى إذا لم يتجاوز المحتوى الحدود، يتم دائمًا عرض شريط التمرير.۔

الميزات:

  • يتم عرض شريط التمرير حتى إذا كان المحتوى يتناسب داخل حدود العنصر.۔
  • يمكن التمرير في الاتجاهين الأفقي والعمودي.۔
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto تعرض شريط التمرير فقط عند تجاوز المحتوى؛ إذا كان المحتوى يناسب داخل حدود العنصر، لن يتم عرض شريط التمرير.۔

الميزات:

  • يظهر شريط التمرير فقط عندما يتجاوز المحتوى.۔
  • ينشئ منطقة قابلة للتمرير تلقائيًا۔
overflow-x و overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

يمكن أيضًا التحكم في خاصية overflow بشكل فردي للاتجاه الأفقي (محور x) والاتجاه العمودي (محور y)۔

بهذه الطريقة، يمكنك استخدام overflow-x و overflow-y لتعيين عرض أشرطة التمرير الرأسية والأفقية بشكل مستقل۔

اعتبارات تتعلق بخاصية Overflow

عند استخدام خاصية overflow، هناك بعض النقاط التي يجب الانتباه إليها۔

تأثيرات على التصميم بسبب عرض أشرطة التمرير

استخدام scroll أو auto لعرض أشرطة التمرير قد يعطل تصميم الصفحة العام۔ على وجه الخصوص، إذا تم وضع العناصر عند الحافة اليمنى أو السفلية، فقد تجعل أشرطة التمرير هذه العناصر أقل وضوحًا۔

سلوك المتصفح الافتراضي

طريقة عرض وتشغيل أشرطة التمرير يمكن أن تختلف بين المتصفحات۔ خاصة بين Windows و macOS، هناك اختلافات في أنماط عرض أشرطة التمرير، مما قد يؤدي إلى ظهور التصميمات بشكل غير مرغوب فيه۔ من المهم إجراء اختبارات عبر المتصفحات۔

تجاوز عناصر الطفل

تعيين overflow: hidden على عنصر الأب يخفي عناصر الطفل التي تتجاوز صندوق الأب۔ قد يتسبب ذلك في عدم عرض النوافذ المنبثقة والنوافذ العامة بشكل صحيح۔

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

في مواصفات CSS الجديدة، تم تقديم قيمة تسمى overflow: clip أيضًا۔ هذا مشابه لـ hidden، لكنه لا يسمح بالتمرير ويقتصر فقط على اقتصاص المحتوى۔ حاليًا، يتم دعمه فقط من قبل بعض المتصفحات۔

الميزات:

  • إذا تجاوز المحتوى، فسيتم إخفاء ذلك الجزء بالكامل۔
  • لا يتم عرض شريط التمرير۔

الخاتمة

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

contain

لمحة عامة عن خاصية contain

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

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

القيم الخاصة بخاصية contain

خاصية contain تحتوي على القيم التالية:۔

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

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

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint يحد من تأثير عملية الرسم.۔ عند تعيين هذه القيمة، فإن عملية الرسم داخل العنصر لن تؤثر على العناصر الخارجية، مما يحد من نطاق حسابات إعادة الرسم.۔

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size يضمن أن حجم العنصر لا يعتمد على العناصر الخارجية.۔ على وجه التحديد، تمنع هذه القيمة تغيير حجم العناصر الفرعية من التأثير على حجم العنصر الرئيسي، مما يحسن من استقرار التخطيط.۔

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style يضمن أن نمط العنصر لا يؤثر على العناصر الخارجية.۔ على سبيل المثال، يضمن تعيين contain: style; أن تغييرات النمط في ذلك العنصر لن تؤثر على العناصر الأخرى، مما يقلل من نطاق إعادة الحسابات.۔

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content هو قيمة مركبة تطبق layout و paint و size و style.۔ باستخدام هذه القيمة، يمكنك ضمان أن تخطيط العنصر، والرسم، والحجم والنمط لن يكون لها أي تأثير على العناصر الخارجية.۔

فوائد الأداء

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

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

  2. تقليل إعادة الرسم: من خلال تحديد منطقة الرسم، يمكن تقليل الجزء الذي يحتاج إلى إعادة رسم عند تغيير نمط العنصر أو محتواه.۔

  3. التطوير القائم على المكونات: حيث يعمل كل مكون أو وحدة بشكل مستقل عن العناصر الأخرى، مما يعزز أداء كل مكون حتى في التطبيقات واسعة النطاق للويب.۔

ملاحظات

عند استخدام خاصية contain، يجب أن تأخذ النقاط التالية في الاعتبار۔

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

  2. التوافق مع المتصفحات: خاصية contain هي ميزة جديدة نسبيًا في CSS وليست مدعومة بالكامل من جميع المتصفحات۔ تُدعم الخاصية في المتصفحات الرئيسية (Chrome وFirefox وEdge وSafari)، ولكن قد لا تكون قابلة للتطبيق في الإصدارات القديمة۔

الخاتمة

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

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

مقارنة بين تخطيطات Flexbox و Grid و Column