از آنجا که صفحات وب روز به روز فعال تر و پویا تر می شوند، ما انتظار داریم که محتوا هر جا که خواستیم نشان داده شود و یا ناپدید شود. چهار خصوصیت CSS وجود دارد که که معمولا برای این کار استفاده می شوند.
هر روش کاربردهای خود را دارد، همراه با مزایا و معایب خود. همچنین می توان در صورت امکان از بیش از یک تکنیک در یک زمان استفاده کرد.
<p>Dice used for traditional Dungeons & Dragons games are actually reflections of the five Platonic solids: the tetrahedron (4 sided die), octahedron (8 sides), dodecahedron (12)and icosahedron (20 sides).
<img src="dice.jpg" alt=”Photograph of metal diceused in Dungeons and Dragons games" id="dice">
<p>The dice are used to determine the attributes of characters, and the character’s success or failure in undertaking tasks, challenges, casting spells, attacks and defences.
CSS اصلی که به عکس اعمال شده :
img#dice { float: right; margin-left: 2em; }
تکنیک ها عبارتند از :
1. visibility: hidden
img#dice { float: right; margin-left: 2em;visibility: hidden; }
انتخاب قطعی و بدیهی، و اغلب اولین روشی که بکار می رود visibility: hidden می باشد. این روش درست عمل می کند اما به گو نه ای است که عنصری که مخفی شده همان فضا را در صفحه اشغال می کند و قالب بندی صفحه دست نخورده باقی می ماند. فقط آن عنصر ناپدید می شود.
کاربرد : ظاهر و ناپدید کردن عناصر ، زمانیکه نیازی به افکت انتقال متحرک (animated transition ) نیست.
متضاد : visibility: visible
2. opacity: 0
img#dice { float: right; margin-left: 2em; opacity:0; }
تنظیم Opacity یک عنصر روی مقدار 0 باعث می شود که آن عنصر غیر قابل مشاهده شود ، درست همان کاری که visibility: hidden می کند.
مزیت روش Opacity این است که ،بر خلاف حالت visibility ، عنصر می تواند به صورت متحرک در بیاید.
کاربرد : ایجاد افکت های “fade in” و “fade out” .
متضاد : تنظیم Opacity عنصر روی opacity: 1 (یا هر مقداری بزرگ تر از 0)
3. position: absolute
img#dice { position: absolute; left: -1000px; }
قدیمی ترین و استاندارد ترین تکنیک برای نشان دادن و یا ناپدید کردن عناصر استفاده از position: absolute است. استفاده از خاصیت left با مقدار منفی بالا باعث می شود که عنصر کاملا از صفحه بیرون رود. Float و margin نیز حذف می شوند.
کاربرد : انیمیشن خطی عناصر با بیشترین سازگاری بین مرورگرها.
متضاد : تنظیم left position به میزانی که عنصر در صفحه قابل مشاهده باشد.
4. display: none
img#dice { display: none; }
یکی دیگر از تکنیک های قدیمی برای نشان دادن و مخفی کردن یک عنصر استفاده از خاصیت display: none می باشد. می توان آن را به عنوان یک توافق بین position: absolute و visibility:hidden در نظر گرفت. در این حالت، عنصر هم غیر قابل مشاهده می شود و هم اینکه روی بقیه مطالب صفحه تاثیری نمی گذارد.
کاربرد : استایل دهی مدیا برای از حذف محتوای نامناسب
متضاد : تنظیم خصوصیت display با مقدار display: block یا مقادیر دیگر.
روش های دیگری نیز برای ناپدید کردن عناصر وجود دارد مخصوصا در CSS3. برای مثال شما می توانید از scale برای کاهش اندازه ظاهری یک عنصر استفاده کنید تا زمانی که ناپدید شود. اما در کل همه این روش ها تاثیرشان یکسان است. (scale فضای اشغالی عنصر مربوطه را حفظ می کند، درست مثل opacity: 0 و visibility: hidden )