استخدام خاصية CSS "display: none"

تتيح لك أوراق الأنماط المتتالية (CSS) تنظيم مظهر صفحة الإنترنت وتصميمها. واحدة من الخصائص الأكثر استخداما وقيمها هي "العرض: لا شيء".

تعريف العقار

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

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

الفرق بين خصائص "العرض" و "الرؤية"

على الرغم من حقيقة أنه في النهاية ، إخفاء كل الخصائصعنصر من المستخدم ، مبدأ تشغيلها يختلف اختلافا كبيرا. كما ذكرنا أعلاه ، تزيل المعلمة "display: none" العنصر بالكامل من المستند. تسقط الكتلة خارج الصفحة ، وبالتالي لا تشغل مكانًا فيها. في هذه الحالة ، يبقى الكائن نفسه في كود HTML.

في المقابل ، الخاصية "الرؤية: مخفي "يخفي العنصر من المستخدم ، ولكنه لا يزيله من طراز المستند. ولهذا السبب تحتفظ الصفحة بمكان محجوز لهذه الكتلة ، أي أن تدفق المستند سيأخذ بعين الاعتبار موقع وأبعاد العنصر مع خاصية" الرؤية: مخفي "، وكذلك بدونها.

يسمح لك هذا الاختلاف في تنظيم بنية المستند باستخدام هاتين الخاصيتين بتحقيق النتيجة الضرورية للعرض الصحيح للصفحة.

استخدام CSS - عرض: لا شيء

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

في عنوان الوثيقة

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

يجب أن نتذكر أنه إذا كانت هذه الطريقةيقع تنظيم الأنماط في المستند أدناه ، بدلاً من استيراد ورقة أنماط منفصلة ، ثم ستتم إعادة كتابة الخصائص المتقاطعة بواسطة تلك الموجودة في نص مستند HTML.

كتلة div. عرض: لا شيء

طريقة أخرى هي أن تضيفمباشرة في عنصر عنصر الكود "style = display: none؛" غالباً ما يتم استخدام هذا الأسلوب عند العمل مع إطارات العمل المختلفة ، والغرض منها هو تقليل عدد الخصائص مباشرة في ورقة الأنماط وعرضها في مستند الإنترنت نفسه. بالإضافة إلى ذلك ، غالباً ما يحدث مثل هذا السجل عند عرض الصفحة "رمز المفتش". من المهم تذكر أنه باستخدام هذا الأسلوب ، يمكنك تغيير الخاصية وقيمتها المحددة في ورقة الأنماط. لذلك ، يجب عليك توخي الحذر ، ونتيجة لذلك ، يمكنك إنشاء مشاكل إضافية لنفسك وقضاء بعض الوقت في البحث عن الأخطاء وإصلاحها في شفرة الصفحة.

جافا سكريبت

ومن الجدير بالذكر أيضا الإضافيإمكانية تغيير هذه الخاصية. لا ينطبق على ورقة الأنماط ورمز HTML ، ولكن على لغة البرمجة النصية. لذلك ، من أجل تطبيقه ، من الضروري الحصول على بعض المعرفة في هذا المجال على الأقل. لإزالة عنصر من تدفق المستند ، يمكنك استخدام خاصية JavaScript "display = none". يسمح لك بتغيير بنية المستند عند حدوث حدث معين. أيضا ، بفضل استخدام البرامج النصية ، يمكنك بشكل ديناميكي ("على الطاير") تغيير معلمة الخاصية وبالتالي تحديث عرض الصفحة دون الحاجة إلى إعادة تشغيله. يفيد هذا الأسلوب في تنظيم القوائم المنسدلة والنوافذ والإشكال النموذجية.

SEO

في مجال تحسين محتوى الويب للبحثهناك العديد من الخرافات واللحظات غير الواضحة. لذلك ، العديد من المبتدئين SEOShniki النظر في استخدام خاصية "العرض" بطريقة سيئة. يشرح ذلك من خلال حقيقة أن محركات البحث ، التي ترى المحتوى المخفي ، تبدأ في اعتبار الصفحة غير مرغوب فيها. في كلماتهم هناك حصة من المنطق ، ولكن لا شيء أكثر من ذلك. عند هذه النقطة الزمنية ، يتم استخدام خاصية إخفاء كائن في كثير من الأحيان لتنسيق القوائم المنسدلة وإخفاء أجزاء من الوثيقة التي لا تثير اهتمام المستخدم (على سبيل المثال ، إذا تم اختيار فئة واحدة ، يتم حذف معلومات عن الأخرى). يستخدم هذا النهج من قبل بوابات الإنترنت قوية جدا (واحد منهم هو "الأمازون"). وبالتالي ، لا يمكن للروبوتات البحث النظر في استخدام خاصية "display: none" كرسائل غير مرغوب فيها.

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