مخفی کردن عناصر وب با CSS

مخفی کردن عناصر وب با CSS

خصوصیات نمایش مشخص می کند که یک عنصر چگونه نمایش داده شود، و خصوصیات قابل مشاهده بودن مشخص می کند که آیا یک عنصر باید قابل مشاهده باشد یا پنهان.

مخفی کردن عناصر وب با CSS مخفی کردن عناصر وب با css مخفی کردن عناصر وب با CSS Hide web elements with CSS

مخفی کردن عناصر وب با CSS

چرا عناصر را در صفحه وب پنهان می کنیم؟

شاید این سوال در ذهنتان باشد که چه نیازی است عناصر را در صفحات وب مخفی و پنهان کنیم؟
البته این کار همیشه هم ضرورت ندارد، بلکه استفاده از این قابلیت در صفحات وب بستگی به شرایط و نیاز شما دارد، به طور مثال فرض کنید یک سیستم ضد ارسال هرزنامه یا اسپم ایجاد کرده اید که متکی بر پر شدن یا نشدن یک فیلد در یک فرم HTML است، به این صورت که اگر فیلد مورد نظر پر شود یعنی کاربر یک ربات است و اگر خالی باشد یعنی کاربر یک انسان است، همان طور که می دانیم ربات ها صفحات وب را معمولا بدون پردازش CSS و به صورت کد HTML دریافت می کنند، لذا آن فیلد مخفی برای آنها قابل رویت است و بنابراین به همراه سایر فیلدهای موجود در فرم، آن را هم به احتمال خیلی زیاد با عباراتی پر می کنند، اما با مخفی کردن فیلد برای کاربران عادی آنها نمی توانند در شرایط معمولی فیلد را مشاهده کنند و لذا نباید اطلاعاتی در آن وارد نمایند، حتی می توان با درج عبارتی مانند “در این فیلد چیزی ننویسید” کاربرانی که استایل CSS در مرورگرشان غیر فعال است را نیز راهنمایی کرد، یا به طور مثال اگر بخواهیم یک ابزار یا یک عبارت، بنا به دلایل مختلف فقط برای ربات ها قابل رویت باشد، نیاز به استفاده از CSS است.

مخفی کردن عناصر وب display:none or visibility:hidden

پنهان کردن یک عنصر می تواند با تنظیم خاصیت display بر روی “none” و یا خاصیت visibility به “hidden” انجام شود. با این حال، توجه کنید که این دو روش، نتایج متفاوتی تولید می کنند :
visibility : hidden یک عنصر را پنهان می کند ، اما هنوز هم عنصر فضای قبلی را اشغال می کند. عنصر پنهان خواهد بود ، اما هنوز بر طرح تاثیر خواهد گذاشت.

display:none : یک عنصر را پنهان می کند و آن عنصر دیگر فضایی را اشغال نخواهد کرد. عنصر پنهان است ، و صفحه بصورتی نمایش داده خواهد شد که گویا این عنصر وجود ندارد :

عناصر بلوک و درون خطی

عنصر بلوک عنصری است که دسترسی کامل عرض را بدست می آورد ، و یک پرش به خط بعد ، قبل و بعد از آن دارد.
نمونه هایی از عناصر بلوک:
• h1> • p> • div> یک عنصر درون خطی تنها عرض لازم را بدست می آورد ، و مجبور به پرش به خط بعد نمی کند.
نمونه هایی از عناصر خطی:
• span> • a>

تغییر دادن چگونگی نمایش یک عنصر

تغییر یک عنصر درون خطی به عنصر بلوک و یا بالعکس، می تواند برای ایجاد ظاهری خاص در صفحه ، مفید باشد ، و همچنان پیرو استانداردهای وب باشد.
نمونه زیر آیتم های لیست را به عنوان عناصر درون خطی نمایش می دهد :

تغییر نوع نمایش یک عنصر ، فقط چگونگی نمایش عنصر را تغییر می ددهد و نه نوع عنصر. به عنوان مثال : به یک عنصر درون خطی که بر روی display:block تنظیم شده است اجازه داشتن عنصر بلوک در درون خود را ندارد.

نمونه زیر عناصر span را به عنوان عناصر بلوک نمایش می دهد :

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید