الرؤية
الرؤية (Visibility) في CSS هي الخاصية التي تحدد ما إذا كان عنصر ما ظاهرًا أم مخفيًا في الصفحة. يمكننا تشبيه الرؤية بباب غرفة في المنزل: إذا كان الباب مفتوحًا، يمكنك رؤية الغرفة والمحتويات بوضوح؛ إذا كان الباب مغلقًا، تصبح الغرفة غير مرئية تمامًا، ولكنها لا تزال موجودة في المنزل. الرؤية مهمة جدًا لأنها تمنح المطورين القدرة على التحكم في تجربة المستخدم، مثل عرض عناصر الأخبار الهامة في موقع إخباري، أو إخفاء العروض الترويجية في متجر إلكتروني حتى يحين وقت عرضها، أو تنظيم الأقسام في صفحة شخصية أو بوابة حكومية بطريقة سلسة ومرنة.
في هذا الدرس، ستتعلم كيفية استخدام الرؤية (visibility) للتحكم في عناصر الصفحة، سواء لإظهارها أو إخفائها دون إزالة المحتوى من الهيكل العام للصفحة (DOM). سنتناول أمثلة تطبيقية على مواقع إخبارية، متاجر إلكترونية، صفحات شخصية وبوابات حكومية، مع التركيز على كيفية استخدام الرؤية ضمن تصميم متجاوب، تحسين الأداء، والمحافظة على الكود قابلًا للصيانة. سنتعلم أيضًا الفرق بين الرؤية وخصائص أخرى مثل العرض (display) وتأثيراتها على التخطيط العام للصفحة. سنتعامل مع الرؤية كأننا ننظم مكتبة: الكتب موجودة دائمًا، لكن يمكننا إخفاؤها أو إظهارها حسب الحاجة، مما يجعل تجربة المستخدم أكثر ذكاءً وتنظيمًا.
مثال أساسي
css/* مثال أساسي للتحكم بالرؤية */
.news-article {
visibility: visible; /* المقال ظاهر للمستخدم */
}
.promo-banner {
visibility: hidden; /* الإعلان مخفي، لكنه موجود في DOM */
}في الكود أعلاه، نرى عنصرين رئيسيين: مقالة إخبارية (news-article) ولافتة ترويجية (promo-banner). استخدام visibility: visible يجعل المقالة مرئية للمستخدم، بينما visibility: hidden يخفي الإعلان، ولكنه لا يزيله من الصفحة، مما يعني أن المساحة التي يشغلها العنصر تبقى محفوظة. هذا الاختلاف مهم جدًا مقارنة بـ display: none، حيث يزيل العنصر تمامًا من التخطيط.
الخاصية visibility يمكن أن تأخذ قيمًا متعددة، مثل visible، hidden، collapse (مفيد للجداول) وinherit. التركيب النحوي بسيط: اسم العنصر {visibility: القيمة;}. في مواقع الأخبار، يمكن استخدام visibility لإخفاء المقالات القديمة دون تعطيل التخطيط. في المتاجر الإلكترونية، يمكن إخفاء عروض محددة حتى وقت معين. بالنسبة للصفحات الشخصية أو البوابات الحكومية، يمكن استخدام الرؤية لتنظيم الأقسام المختلفة، مثل إظهار أو إخفاء النماذج، القوائم، أو الإعلانات.
هذا التحكم يجعل تصميم الصفحة أكثر مرونة ويتيح تجربة مستخدم سلسة، خاصة عند التعامل مع عناصر ديناميكية تتغير بحسب تفاعل المستخدم. من منظور الأداء، استخدام visibility أسرع من display: none في إعادة عرض العناصر، لأنه لا يعيد حساب التخطيط بالكامل.
مثال عملي
css/* مثال عملي على موقع إخباري ومتجر إلكتروني */
/* موقع إخباري */
.breaking-news {
visibility: visible; /* أخبار عاجلة تظهر فورًا */
color: red;
}
/* متجر إلكتروني */
.flash-sale {
visibility: hidden; /* عرض ترويجي مخفي حتى وقت محدد */
background-color: yellow;
padding: 10px;
}في هذا المثال العملي، استخدمنا الرؤية في سياقات حقيقية. بالنسبة للأخبار العاجلة (breaking-news)، visibility: visible يضمن ظهور الأخبار فور نشرها، مما يجذب انتباه الزوار. أضفنا أيضًا لونًا أحمر لتسليط الضوء. في المتاجر الإلكترونية، استخدمنا flash-sale مع visibility: hidden لإخفاء العروض حتى وقت محدد، مع تزيين العنصر بلون خلفية أصفر ومساحة padding لإبرازه عند عرضه.
هذا النهج يسمح لنا بالتحكم في تجربة المستخدم دون التأثير على تخطيط الصفحة أو العناصر الأخرى. عند دمج الرؤية مع JavaScript، يمكننا تغيير الحالة ديناميكيًا، مثل إظهار الإعلان عند الوصول إلى وقت معين أو عند تفاعل المستخدم.
التحكم بالرؤية أيضًا مفيد للصفحات الشخصية والبوابات الحكومية: يمكن إخفاء أقسام التسجيل أو الاستمارات حتى يحتاجها المستخدم، مما يحافظ على تنظيم الصفحة ويجعلها أقل ازدحامًا. تعلم كيفية استخدام visibility بشكل فعال يساعد على تصميم صفحات متجاوبة، سريعة التحميل، وسهلة الصيانة.
أفضل الممارسات والأخطاء الشائعة:
- من الممارسات الأساسية:
1. استخدم الرؤية بطريقة Mobile-First لضمان تجربة متجاوبة على جميع الأجهزة.
2. حافظ على أداء الصفحة عن طريق إخفاء العناصر غير الضرورية بدلًا من إعادة تحميلها.
3. استخدم قيم الرؤية بوضوح وتجنب التعارضات مع display.
4. حافظ على كود نظيف وقابل للصيانة مع تسميات واضحة للعناصر المخفية أو الظاهرة. - الأخطاء الشائعة التي يجب تجنبها:
1. الإفراط في استخدام visibility بدلاً من display عند الحاجة لإزالة العنصر من التخطيط.
2. خلق تضارب في التحديدات specificity يؤدي لعدم تطبيق الرؤية كما هو متوقع.
3. تجاهل التصميم المتجاوب، مما يجعل العناصر المخفية تظهر بشكل غير متناسب على شاشات مختلفة.
4. التعديلات المفرطة على override تؤدي لتعقيد الكود وصعوبة الصيانة. - نصائح التصحيح:
تحقق من ترتيب الطبقات (z-index) عند إخفاء العناصر، وتأكد من أن visibility لا يتعارض مع display أو opacity. استخدم أدوات المطور للتحقق من الحالة الفعلية للعناصر.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| visibility | تحدد ما إذا كان العنصر ظاهرًا أم مخفيًا | visibility: visible; |
| visibility | تخفي العنصر دون إزالة المساحة | visibility: hidden; |
| visibility | مفيد في الجداول لإخفاء الصفوف | visibility: collapse; |
| inherit | يرث القيمة من العنصر الأب | visibility: inherit; |
الخلاصة والخطوات التالية:
في هذا الدرس، تعلمنا كيفية استخدام الرؤية (visibility) في CSS للتحكم بعرض وإخفاء العناصر بطريقة مرنة وذكية، مع الحفاظ على تخطيط الصفحة. فهم الفرق بين visibility وdisplay يمكن أن يحسن تجربة المستخدم بشكل كبير ويقلل من مشاكل الأداء. يمكن دمج الرؤية مع JavaScript لتوفير تفاعلات ديناميكية، مثل إظهار الإعلانات أو الأقسام عند الحاجة.
الخطوة التالية هي دراسة تأثير الرؤية مع خصائص أخرى مثل opacity والتحولات (transitions)، لفهم كيفية إنشاء تأثيرات سلسة على العناصر المخفية أو الظاهرة. كما يمكن تجربة استخدام الرؤية في تصميمات معقدة للبوابات الحكومية أو المتاجر الإلكترونية لتعلم كيفية تنظيم المحتوى بشكل احترافي. من المهم الاستمرار في التجربة والتطبيق العملي لتثبيت المفاهيم وتحسين مهارات التصميم المتجاوب والصيانة طويلة المدى.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى