تفاوت بین "display: none" و "visibility: hidden" در CSS

ممکن است زمان هایی وجود داشته باشد که شما در توسعه صفحات وب کار می کنید، شما باید به علت یک یا چند دلیل برای مخفی کردن مناطق خاصی از موارد استفاده کنید. البته شما می توانید این مورد را در سؤالات از نشانه گذاری HTML حذف کنید ، اما اگر میخواهید آنها را در کد بگذارید، اما در هر صفحه به هیچ وجه در صفحه مرورگر نمایش داده نمی شود (و ما دلایل را برای بررسی این کار را به زودی انجام دهید) برای نگه داشتن یک عنصر در HTML خود، اما آن را برای نمایش پنهان کنید، به CSS تبدیل خواهید شد.

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

دید

با استفاده از خصیصه و ویژگی ارزش CSS دید: پنهان یک عنصر از مرورگر را پنهان می کند. با این حال، عنصر پنهان همچنان فضا را در طرح قرار می دهد. این همان چیزی است که شما اساسا این عنصر را نامرئی ساخته اید، اما هنوز هم در جای خود قرار دارد و فضای مورد نظر را به دست می آورید اگر آن را تنها گذاشته اید.

اگر شما DIV را در صفحه خود قرار دهید و از CSS استفاده کنید تا ابعاد آن 100x100 پیکسل باشد، ابعاد پنهان: DIV را روی صفحه نمایش نشان نمی دهد، اما متن زیر آن عمل می کند مانند آن است که هنوز وجود دارد، احترام به آن فاصله 100x100.

صادقانه، ویژگی دید ما چیزی نیست که ما آن را اغلب استفاده کردیم و مطمئنا نه به خودمان. اگر ما همچنین از خواص دیگر CSS مانند موقعیت برای رسیدن به طرح مورد نظر برای یک عنصر خاص استفاده می کنیم، می توانیم بعد از استفاده از دید برای مخفی کردن آن مورد ابتدا، فقط به «روشن کردن» آن بر روی شناور برویم. این یک استفاده احتمالی از این ویژگی است، اما دوباره آن چیزی نیست که ما با هر فرکانسی آن را تغییر دهیم.

نمایش دادن

بر خلاف ویژگی دید، که یک عنصر را در جریان سند معمولی نگه می دارد، نمایش داده می شود: هیچ عنصر به طور کامل از سند حذف نمی شود. این فضای خالی نیست، هر چند HTML برای آن هنوز در کد منبع است. این به این دلیل است که، در واقع، از جریان سند حذف شده است. برای تمام اهداف و اهداف، مورد رفته است. این امر می تواند یک چیز خوب یا یک چیز بد باشد، بسته به اینکه اهداف شما چیست. اگر این اموال را نادیده بگیرید، می توانید به صفحه خود آسیب برسانید!

ما اغلب در هنگام تست یک صفحه "display: none" استفاده می کنیم. اگر به یک منطقه نیاز داشته باشیم تا به جای دیگری بچرخیم تا بتوانیم مناطق دیگر صفحه را آزمایش کنیم، می توانیم از صفحه نمایش استفاده کنیم: هیچ کدام برای آن. با این حال، چیزی که باید به یاد داشته باشید این است که عنصر باید قبل از انتشار واقعی آن سایت به صفحه بازگردانده شود. این به این دلیل است که یک مورد از جریان سند در این روش حذف شده توسط موتورهای جستجو یا خوانندگان صفحه نمایش دیده نمی شود، حتی اگر در نشانه گذاری HTML باقی بماند. در گذشته، این روش به عنوان یک روش سیاه پوستان مورد استفاده قرار گرفت تا سعی کند تا رتبه بندی موتورهای جستجو را تحت تاثیر قرار دهد، بنابراین اقلامی که نمایش داده نمی شود می تواند یک پرچم قرمز برای گوگل باشد تا به این دلیل که این روش استفاده می شود.

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

مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در 3/3/17