CSS Academy · درس

Visibility مقابل Display None

تعلّم متى تستخدم visibility: hidden بدلًا من display: none، وكيف يؤثر كل منهما في التخطيط.

Visibility مقابل Display None درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ثلاث طرق لإخفاء العناصر

توفر CSS ثلاث طرق شائعة لإخفاء العناصر، ولكل منها تأثيرات مختلفة في التخطيط وإمكانية الوصول والتفاعل:

display: none
visibility: hidden
opacity: 0

display: none

تُزال العنصر بالكامل من التخطيط. فلا تشغل أي مساحة، ولا تكون تفاعلية، ولا تقرؤها برامج قراءة الشاشة في معظم التطبيقات. ومع ذلك، يظل العنصر موجودًا في DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

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

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

يصبح العنصر غير مرئي لكنه يظل تفاعليًا بالكامل. ويستمر في شغل مساحة والاستجابة للأحداث، مثل النقرات وعمليات التمرير. وقد تظل برامج قراءة الشاشة تقرؤه.

<button class="transparent">Invisible but clickable</button>

تجاوز visibility: visible

يمكن لعنصر ابن تجاوز visibility: hidden المطبقة على العنصر الأب، وذلك بضبط visibility: visible. ولا يمكن فعل ذلك مع display: none، إذ يرثه الأبناء بصورة مطلقة.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

جدول المقارنة

مرجع سريع:

display: none: لا مساحة، ولا نقرات، ولا قراءة
visibility: hidden: يشغل مساحة، ولا يقبل النقر، ولا يُقرأ
opacity: 0: يشغل مساحة، ويظل قابلًا للنقر، وقد يُقرأ

إجراء انتقالات visibility

لا يمكن إجراء انتقال على display. ولإظهار العناصر وإخفائها تدريجيًا، ادمج visibility مع opacity:

<div class="dropdown open">Dropdown menu content</div>

الإخفاء المتاح باستخدام SR-only

يخفي نمط لقارئ الشاشة فقط المحتوى بصريًا، لكنه يبقيه متاحًا للتقنيات المساعدة:

<button>Save <span class="sr-only">your document now</span></button>

السمة hidden مقارنةً بـ CSS

تطبّق سمة HTML المسماة hidden القيمة display: none عبر ورقة أنماط وكيل المستخدم في المتصفح. وهي دلالية ومتاحة، لكن يمكن تجاوزها بسبب أولوية CSS.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

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

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

لإبقاء العنصر مرئيًا مع منعه من التفاعل، استخدم pointer-events: none. فتمر النقرات وعمليات التمرير عبر العنصر إلى العناصر الموجودة تحته.

<div class="overlay">Clicks pass through this overlay</div>

تحقق سريع

ما التقنية التي تخفي عنصرًا مع الحفاظ على مساحة التخطيط التي يشغلها؟

مراجعة

تزيل display: none العنصر من التخطيط بالكامل. وتخفيه visibility: hidden مع الحفاظ على مساحته. أما opacity: 0 فتخفيه مع إبقائه تفاعليًا. وللإخفاء المتاح، استخدم نمط .sr-only. وادمج visibility مع opacity لإنشاء انتقالات التلاشي.

الأسئلة الشائعة

هل درس «Visibility مقابل Display None» مجاني؟

نعم — نص درس «Visibility مقابل Display None» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Visibility مقابل Display None»؟

تعلّم متى تستخدم visibility: hidden بدلًا من display: none، وكيف يؤثر كل منهما في التخطيط. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «Visibility مقابل Display None»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy