خاصية العرض
خاصية العرض (display) في CSS تعتبر واحدة من أهم اللبنات الأساسية في بناء أي صفحة ويب. تخيل أنك تبني بيتًا: لديك الجدران والغرف، ولكن الطريقة التي تختار بها عرض الأثاث وتنظيم المساحات تحدد تجربة المعيشة داخل البيت. بنفس الشكل، خاصية العرض تتحكم بكيفية ظهور العناصر على الصفحة وكيفية تفاعلها مع بعضها البعض. فهي تحدد ما إذا كان العنصر سيظهر كسطر كامل (block) أو كسطر داخلي (inline) أو أنه لن يظهر إطلاقًا (none).
في مواقع الأخبار، خاصية العرض تساعد على تنظيم المقالات والعناوين بحيث تظهر بشكل منسق وقابل للقراءة. في مواقع التجارة الإلكترونية، تُمكّنك من عرض المنتجات في شبكة منظمة grid أو في صفوف مرنة flex. أما في الصفحات الشخصية، فهي تتيح لك تنسيق الصور والنصوص لتبدو بشكل متوازن وجذاب. وفي البوابات الحكومية، حيث التنظيم والدقة مطلب أساسي، تساعد خاصية العرض على ترتيب النماذج والجداول والبيانات الرسمية بشكل واضح.
خلال هذا الدرس ستتعلم كيف تتحكم بخاصية العرض بشكل متقدم، متى تستخدم كل قيمة، وكيف تتجنب الأخطاء الشائعة. سنربط المفاهيم باستعارات حياتية مثل تنظيم مكتبة: قد تختار أن تضع الكتب بشكل طولي (block) أو بجانب بعضها بشكل أفقي (inline). الفكرة الأساسية أنك من خلال خاصية العرض تتحكم في تجربة المستخدم وتوجه نظره.
مثال أساسي
css/* مثال أساسي لاستخدام خاصية العرض */
.container {
display: flex; /* جعل الحاوية تستخدم نموذج مرن */
justify-content: space-between; /* توزيع العناصر بشكل متساوٍ */
}
.item {
display: block; /* كل عنصر يظهر ككتلة مستقلة */
width: 30%; /* عرض كل عنصر 30% من الحاوية */
}في المثال أعلاه نرى استخدامًا مشتركًا بين display: flex و display: block، وهذا يعكس فكرة أن خاصية العرض ليست مجرد خيار واحد، بل منظومة متكاملة للتحكم بالتصميم. الحاوية (container) تم إعطاؤها display: flex، أي أنها الآن تتبع نموذج "الصندوق المرن" (flexbox). هذا يتيح توزيع العناصر الداخلية بشكل ذكي عبر المحور الأفقي أو العمودي، مما يساعد في تنظيم المحتوى بطريقة تتكيف مع أحجام الشاشات المختلفة. استخدام justify-content: space-between يعني أن العناصر سيتم توزيعها على كامل عرض الحاوية بحيث يكون هناك مسافة متساوية بينها، وهو أمر شائع جدًا في تصميم القوائم أو أقسام المنتجات.
أما العناصر الداخلية (item) فقد أعطيناها display: block، أي أنها ستتصرف ككتل مستقلة، تأخذ كامل المساحة المتاحة في سطرها. لكن مع تحديد width: 30% فإنها ستشغل جزءًا معينًا من المساحة، مما يسمح بعرض ثلاثة عناصر بجانب بعضها بشكل منظم. هذا يجسد التطبيق العملي لخاصية العرض: الجمع بين النماذج (flex + block) للحصول على أفضل تنظيم.
المبتدئون قد يسألون: لماذا لا نستخدم فقط block أو فقط flex؟ الجواب أن block وحده لا ينظم التوزيع أفقيًا، بينما flex يتيح تحكمًا مرنًا لكنه يحتاج لتخصيص أحجام العناصر. لذلك المزج بين القيمتين يمنح تحكمًا متقدمًا يلبي احتياجات متنوعة مثل شبكات المنتجات في التجارة الإلكترونية أو تقسيم الأعمدة في مواقع الأخبار.
مثال عملي
css/* مثال عملي لتطبيق خاصية العرض في موقع إخباري */
.news-container {
display: grid; /* استخدام نموذج الشبكة */
grid-template-columns: 2fr 1fr; /* تقسيم العمودين: المحتوى الرئيسي والأخبار الجانبية */
}
.main-article {
display: block; /* يظهر كمحتوى أساسي */
}
.sidebar {
display: flex; /* عمود جانبي منظم باستخدام flex */
flex-direction: column; /* ترتيب رأسي للعناصر */
}عند الانتقال من المثال الأساسي إلى المثال العملي، نرى كيف أن خاصية العرض تُستخدم في سيناريوهات حقيقية. في موقع إخباري مثلًا، نريد عرض المقالة الرئيسية بشكل واسع، وإلى جانبها عمود للأخبار الجانبية أو الإعلانات. هنا تم استخدام display: grid على الحاوية العامة (news-container) لتقسيم الصفحة إلى عمودين: الأول يأخذ مساحة أكبر (2fr) لعرض المقالة الرئيسية، والثاني يأخذ مساحة أقل (1fr) للعمود الجانبي.
داخل العمود الجانبي (sidebar)، استخدمنا display: flex مع flex-direction: column، مما يجعل الأخبار أو الإعلانات تظهر بشكل رأسي متتابع، وهو ما يناسب نمط القراءة العمودي. أما المقالة الرئيسية (main-article) فقد احتفظت بالعرض التقليدي block لأنها تحتاج إلى أن تأخذ كامل عرض العمود المخصص لها، مما يعطي القارئ تجربة قراءة طبيعية.
من خلال هذا المثال، يمكن ملاحظة أن خاصية العرض ليست مجرد اختيار تقني بل هي وسيلة لتحقيق أهداف تصميمية تتعلق بتجربة المستخدم. إذا نقلنا نفس الفكرة إلى موقع تجارة إلكترونية، يمكننا استبدال المقالة الرئيسية بقائمة منتجات، والعمود الجانبي بعناصر التصفية. أما في بوابة حكومية، فيمكن أن يكون العمود الكبير مخصصًا للنماذج الرسمية والعمود الصغير للمساعدة أو التعليمات. وهكذا نرى أن خاصية العرض عنصر محوري في تنظيم أي محتوى.
أفضل الممارسات والأخطاء الشائعة في استخدام خاصية العرض:
من أفضل الممارسات:
- اتباع مبدأ التصميم الموجه للجوال أولًا (mobile-first) من خلال استخدام display: flex أو grid لتسهيل التوافق مع الشاشات الصغيرة قبل الكبيرة.
- تحسين الأداء عبر عدم استخدام display: none بشكل مفرط لإخفاء العناصر، بل التفكير بطرق أخرى مثل إعادة هيكلة المحتوى.
- كتابة كود قابل للصيانة عبر فصل المهام: استخدام display فقط لأغراض العرض، وعدم دمجها مع خصائص أخرى بشكل مربك.
-
اختبار التصميم في متصفحات وأجهزة مختلفة لضمان سلوك موحد.
أما الأخطاء الشائعة: -
الاعتماد على display: inline-block بدل flex أو grid في حالات معقدة، مما يؤدي إلى تعقيد غير ضروري.
- إهمال التصميم المتجاوب، فيظهر المحتوى غير منظم على الشاشات الصغيرة.
- كتابة قيم متضاربة مثل استخدام display: inline مع أبعاد width/height، مما يسبب سلوك غير متوقع.
- الإفراط في إعادة كتابة display في ملفات CSS متعددة، مما يخلق تعارضات.
من نصائح التصحيح: استخدم أدوات المتصفح لفحص العنصر ومعرفة خصائص العرض النشطة، ثم قلل التكرار. أيضًا، قم بإنشاء مكونات قابلة لإعادة الاستخدام بدلًا من تكرار الكود.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| display: block | يجعل العنصر يأخذ كامل عرض السطر | p { display: block; } |
| display: inline | يجعل العنصر يتراصف بجانب العناصر الأخرى | span { display: inline; } |
| display: flex | يحول العنصر إلى حاوية مرنة | div { display: flex; } |
| display: grid | يحول العنصر إلى شبكة ثنائية الأبعاد | section { display: grid; } |
| display: none | يخفي العنصر من الصفحة كليًا | .hidden { display: none; } |
| display: inline-block | يجمع بين خصائص block و inline | img { display: inline-block; } |
الخلاصة والخطوات التالية:
تعلمنا في هذا الدرس أن خاصية العرض (display) ليست مجرد خاصية عابرة، بل هي حجر الأساس في هندسة صفحات الويب. بفضلها نحدد كيف يتفاعل كل عنصر مع الآخر، سواء كان كتلة مستقلة block، أو عنصرًا داخليًا inline، أو جزءًا من شبكة grid، أو حاوية مرنة flex.
الربط بين خاصية العرض وبنية HTML أمر محوري: فالعناصر الهيكلية (div, section, article) تحتاج إلى خاصية العرض لتحديد دورها في تخطيط الصفحة. كذلك، عند دمجها مع JavaScript يمكننا التلاعب بسلوك العناصر ديناميكيًا، مثل إظهار أو إخفاء القوائم.
الخطوة التالية في تعلمك قد تكون التعمق في موضوعات مثل flexbox وgrid بمزيد من التفاصيل، أو فهم العلاقة بين display وخصائص مثل position وvisibility. كما يُنصح بإنشاء مشاريع صغيرة: صفحة شخصية تعرض صورًا ونصوصًا، أو نموذج إخباري بسيط يحتوي على أعمدة، لتطبيق ما تعلمته.
النصيحة الأهم: لا تحفظ القيم فقط، بل افهم السياق الذي تستخدم فيه. كل قيمة من display هي أداة في صندوق أدواتك كمطور واجهات، استخدمها بحكمة وستبني مواقع منظمة، سريعة، وذات تجربة مستخدم ممتازة.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى