قد تكون هناك أوقات ، أثناء العمل على تطوير صفحات الويب ، والتي تحتاج إلى "إخفاء" مناطق محددة من العناصر لسبب أو لآخر. بالطبع ، يمكنك ببساطة إزالة العنصر (العناصر) في الأسئلة من ترميز HTML ، ولكن ماذا لو كنت تريد أن تظل في الكود ، ولكن لا يتم عرضها على شاشة المتصفح لأي سبب من الأسباب (وسنقوم بمراجعة أسباب افعل هذا قريبا). للحفاظ على عنصر في HTML الخاص بك ، ولكن لإخفائه للعرض ، يمكنك اللجوء إلى CSS.
والطريقتان الأكثر شيوعًا لإخفاء عنصر موجود في HTML هي استخدام خصائص CSS لـ "display" أو "visibility". للوهلة الأولى ، قد يبدو أن هاتين الخاصيتين تقومان بنفس الشيء ، لكن لكل منهما اختلافات واضحة يجب أن تكون على دراية بها. دعونا نلقي نظرة على الاختلافات بين العرض: لا شيء والرؤية: مخفي.
رؤية
استخدام زوج خاصية / قيمة CSS للرؤية: إخفاء إخفاء عنصر من المتصفح. ومع ذلك ، لا يزال هذا العنصر المخفي يحتل مساحة في التخطيط. يبدو الأمر كما لو أنك جعلت العنصر غير مرئي بشكل أساسي ، لكنه لا يزال في مكانه ويحتل المساحة التي كان سيأخذها لو تركت بمفردها.
إذا وضعت DIV على صفحتك واستخدمت CSS لإعطائها الأبعاد التي تستهلك 100 × 100 بكسل ، فإن الرؤية: الخاصية المخفية ستجعل DIV لا تظهر على الشاشة ، ولكن النص الذي يتبعها سيعمل كما لو كان موجودًا ، مع احترام ذلك تباعد 100 × 100.
بصراحة ، خاصية الرؤية ليست شيئًا استخدمناه كثيرًا ، وبالتأكيد ليس بمفردها. إذا كنا نستخدم أيضًا خصائص CSS أخرى مثل تحديد المواقع لتحقيق التنسيق الذي أردناه لعنصر معين ، يمكننا عندئذ استخدام الرؤية لإخفاء هذا العنصر في البداية ، فقط "لإعادة" تشغيله مرة أخرى على التمرير. هذا هو أحد الاستخدامات الممكنة لهذه الخاصية ، ولكن مرة أخرى ، لا شيء ننتقل إليه بأي تردد.
عرض
بخلاف خاصية الرؤية ، التي تترك عنصرًا في تدفق المستند العادي ، تعرض: لا شيء يزيل العنصر تمامًا من المستند. لا تشغل أي مساحة ، على الرغم من أن HTML الخاص بها لا يزال موجودًا في شفرة المصدر. هذا لأنه ، في الواقع ، إزالتها من تدفق المستندات. لجميع المقاصد والأغراض ، ذهب العنصر. هذا يمكن أن يكون شيئًا جيدًا أو شيئًا سيئًا ، اعتمادًا على نواياك. ويمكن أيضًا أن يكون ضارًا بصفحتك إذا كنت تسيء استخدام هذا الموقع!
غالبًا ما نستخدم "display: none" عند اختبار صفحة. إذا كنا نحتاج إلى منطقة "تختفي" لبعض الوقت حتى نتمكن من اختبار مناطق أخرى من الصفحة ، فيمكننا استخدام العرض: لا شيء لذلك. ولكن الشيء الذي يجب تذكره هو أنه يجب إرجاع العنصر مرة أخرى إلى الصفحة قبل الإطلاق الفعلي لذلك الموقع. ويرجع ذلك إلى أن عنصرًا تمت إزالته من تدفق المستند في هذه الطريقة لا تتم رؤيته بواسطة محركات البحث أو قارئات الشاشة ، على الرغم من أنه قد يبقى في ترميز HTML. في الماضي ، كانت هذه الطريقة تُستخدم كطريقة قبعة سوداء لمحاولة التأثير على تصنيفات محرك البحث ، لذلك قد تكون العناصر غير المعروضة علامة حمراء لـ Google للنظر في سبب استخدام هذا النهج.
إحدى الطرق التي نعرض بها العرض: لا شيء مفيد ، وأين نستخدمها على الإنترنت ، مواقع الإنتاج ، هو عندما نبني موقعًا متجاوبًا قد يحتوي على عناصر متاحة لحجم عرض واحد ولكن ليس للآخرين. يمكنك استخدام العرض: لا شيء لإخفاء هذا العنصر ، ثم إعادة تشغيله مع استعلامات الوسائط لاحقًا. هذا استخدام مقبول للعرض: لا شيء ، لأنك لا تحاول إخفاء أي شيء لأسباب شريرة ، ولكن لديك حاجة مشروعة للقيام بذلك.
المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرارد في 3/3/17