خواص نمایش عناصر Cursor , Display , Visibility

در این بخش از آموزش css، ویژگی های نمایش عناصر Cursor , Display , Visibility را بررسی می کنیم. این سه ویژگی ظاهر و رفتار بخش های مختلف صفحه را کنترل می کنند، اما هر کدام وظیفه متفاوتی دارند: cursor شکل اشاره گر را تغییر می دهد، visibility درباره دیده شدن عنصر تصمیم می گیرد و display نحوه قرار گرفتن عنصر در چیدمان صفحه را مشخص می کند.

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

در ادامه، کاربرد هر ویژگی، مقدارهای پرکاربرد، نمونه کد و تفاوت های مهم آن ها را می خوانید. نمونه ها را می توانید در یک فایل CSS قرار دهید و نتیجه را در مرورگر بررسی کنید. برای یادگیری مبانی و ادامه مسیر طراحی سایت نیز درک درست این مفاهیم پایه کمک می کند صفحات منسجم تری بسازید.

ویژگی cursor نوع مکان نما را زمانی که کاربر نشانگر ماوس را روی یک عنصر می برد، تغییر می دهد. این ویژگی به تنهایی عملکرد عنصر را عوض نمی کند؛ بلکه یک راهنمای دیداری ارائه می دهد تا کاربر بهتر حدس بزند با چه نوع محتوایی روبه رو است. برای مثال، نمایش دست روی یک پیوند معمولاً نشان می دهد که آن بخش قابل انتخاب است.

در نمونه زیر، سه عنصر مختلف با شکل های متفاوت اشاره گر نمایش داده می شوند. مقدار crosshair نشانگر را به شکل نشانه گیری، مقدار help به شکل راهنمایی و مقدار wait به شکل انتظار درمی آورد.

span.crosshair {
  cursor: crosshair;
}

span.help {
  cursor: help;
}

span.wait {
  cursor: wait;
}

فرض کنید روی دکمه ای عملیاتی انجام می شود که چند لحظه زمان می برد. نمایش نشانگر انتظار می تواند به کاربر اطلاع دهد که درخواست در حال پردازش است. با این حال، فقط تغییر اشاره گر کافی نیست؛ بهتر است وضعیت بارگذاری یا پیام مناسب نیز در رابط کاربری نشان داده شود تا افراد با نیازهای دسترس پذیری مختلف هم بتوانند وضعیت را درک کنند.

مقدار pointer برای پیوندها و دکمه های قابل کلیک متداول است. مقدار text برای بخش هایی کاربرد دارد که متن آن ها انتخاب یا ویرایش می شود. move می تواند نشان دهد که یک بخش قابلیت جابه جایی دارد و not-allowed معمولاً برای عملی که در وضعیت فعلی مجاز نیست استفاده می شود.

برای مثال، اگر یک دکمه پس از ارسال فرم غیرفعال شود، می توان ظاهر نشانگر آن را با وضعیت دکمه هماهنگ کرد. این کار باید همراه با غیرفعال کردن واقعی دکمه و ارائه توضیح مناسب باشد؛ در غیر این صورت، کاربر فقط تغییری ظاهری می بیند و ممکن است نداند چرا امکان ادامه کار را ندارد.

.submit-button {
  cursor: pointer;
}

.submit-button:disabled {
  cursor: not-allowed;
}

بهتر است cursor را برای عناصری به کار ببرید که رفتارشان واقعاً با آن نشانه هماهنگ است. قراردادن نشانگر دست روی متنی که هیچ کنشی ندارد، انتظار نادرستی ایجاد می کند. همچنین، تغییر نشانگر نباید جایگزین عنوان روشن، حالت فوکوس صفحه کلید یا نشانه های قابل مشاهده دیگر شود.

ویژگی visibility مشخص می کند که عنصر در صفحه دیده شود یا نه. مقدار visible حالت معمول و پیش فرض است و عنصر را قابل مشاهده نگه می دارد. مقدار hidden عنصر را از دید پنهان می کند، اما فضای آن در چیدمان صفحه باقی می ماند.

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

h1.hidden {
  visibility: hidden;
}

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

در برخی ساختارهای HTML، وقتی visibility را روی یک عنصر والد تنظیم می کنید، عنصرهای درون آن نیز از وضعیت پنهان بودن تاثیر می گیرند. برای نمونه، اگر این ویژگی به یک عنوان، پاراگراف یا بخش عمومی صفحه داده شود، محتوای قرار گرفته درون آن نیز می تواند پنهان شود.

عنصرهای رایجی که در چنین ساختارهایی دیده می شوند عبارت اند از:

• <h1>
• <p>
• <div>

بعضی از عنصرهای درون خطی مانند span و a نیز می توانند در انتخاب و بازنویسی مقدارها رفتار متفاوتی داشته باشند. درک این نکته کمک می کند هنگام بررسی یک صفحه، فقط به عنصر والد نگاه نکنید و قانون های CSS مربوط به فرزندان را هم در نظر بگیرید.

• <span>
• <a>

اگر بخشی از محتوا برخلاف انتظار پنهان یا نمایان است، ابزار توسعه مرورگر را باز کنید و مقدار محاسبه شده visibility را برای والد و فرزند بررسی کنید. ممکن است قانون دیگری روی فرزند اثر گذاشته باشد. همچنین، پنهان کردن دیداری با پنهان کردن از فناوری های کمکی یکسان نیست؛ برای بخش های تعاملی یا محتوای حساس، باید رفتار دسترس پذیری را نیز جداگانه بررسی کرد.

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

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

li {
  display: inline;
}

span {
  display: block;
}

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

block معمولاً عنصر را در یک ردیف مستقل قرار می دهد و اجازه می دهد عرض آن در محدوده والد گسترش پیدا کند. inline عنصر را در جریان متن نگه می دارد و باعث می شود بتواند در کنار متن یا عنصرهای هم خط قرار بگیرد. رفتار دقیق هر مقدار به نوع عنصر و ویژگی های دیگر مانند width و margin هم وابسته است.

inline-block ترکیبی از رفتار درون خطی و امکان تعیین ابعاد است. عنصر می تواند در کنار عنصرهای دیگر قرار بگیرد و در عین حال، عرض و ارتفاع مشخص داشته باشد. مقدار none عنصر را از نمایش و چیدمان خارج می کند. همچنین، list-item عنصر را شبیه یک مورد فهرست نمایش می دهد.

.block-example {
  display: block;
}

.inline-example {
  display: inline;
}

.inline-block-example {
  display: inline-block;
}

.hidden-example {
  display: none;
}

.list-example {
  display: list-item;
}

برای نمونه، یک پیوند معمولی در متن اغلب به شکل inline قرار می گیرد؛ اما اگر بخواهید پیوندهای منو هر کدام سطحی جدا داشته باشند، می توانید رفتارشان را به block تغییر دهید. اگر چند دکمه کوچک باید کنار یکدیگر باشند و هر کدام ابعاد قابل کنترل داشته باشند، inline-block می تواند گزینه مناسبی باشد.

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

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

@media print {
  .no-print {
    display: none;
  }
}

برای استفاده از این روش، کلاس no-print را فقط به بخش هایی بدهید که واقعاً نباید چاپ شوند. متن اصلی، نشانی های ضروری و اطلاعاتی را که کاربر برای مراجعه بعدی نیاز دارد حذف نکنید. بعد از افزودن قانون، پیش نمایش چاپ مرورگر را بررسی کنید تا شکست صفحه ها و فاصله ها مناسب باشند.

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

اگر قرار است یک محتوای موقتاً نامرئی جای خود را حفظ کند، visibility ممکن است مناسب باشد. اگر عنصر نباید دیده شود و نباید فضایی هم اشغال کند، display گزینه متداول تری است. برای نمایش و پنهان کردن بخش های تعاملی، وضعیت صفحه کلید و فناوری های کمکی را نیز آزمایش کنید؛ ظاهر صفحه به تنهایی برای اطمینان از رفتار درست کافی نیست.

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

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

تغییر display ممکن است در صفحه بزرگ درست به نظر برسد، اما در صفحه کوچک باعث فشردگی یا بیرون زدگی محتوا شود. پس از تنظیم حالت بلوکی، درون خطی یا inline-block، صفحه را در عرض های مختلف بررسی کنید. همچنین، قانون های CSS تکراری یا متعارض را در ابزار توسعه مرورگر شناسایی کنید تا دلیل رفتار نهایی مشخص شود.

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

1. عنصر مورد نظر را در صفحه انتخاب کنید.
2. مقدار محاسبه شده cursor، display یا visibility را بررسی کنید.
3. قانون های غیرفعال یا بازنویسی شده را پیدا کنید.
4. یک مقدار آزمایشی وارد کنید و تغییر چیدمان را مشاهده کنید.
5. صفحه را در اندازه های مختلف و در حالت چاپ، در صورت نیاز، بررسی کنید.

در پروژه های واقعی، بهتر است تغییرها را در فایل CSS منبع ثبت کنید و پس از آزمایش موقت در مرورگر، آن ها را مستند و مرتب نگه دارید. اگر از کلاس های مشترک استفاده می کنید، بررسی کنید تغییر یک قانون چه اثری بر بخش های دیگر سایت می گذارد.

ویژگی های cursor، display و visibility در CSS هر کدام بخشی متفاوت از رفتار صفحه را مدیریت می کنند. cursor برای تغییر شکل اشاره گر و راهنمایی دیداری به کار می رود. visibility عنصر را پنهان می کند، در حالی که فضای آن را نگه می دارد؛ اما display می تواند نوع نمایش عنصر را تعیین کند یا با مقدار none آن را از چیدمان کنار بگذارد.

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