رابط کاربری

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

رابط کاربری در CSS

در این فصل در مورد ویژگی‌های رابط کاربری زیر در CSS مطالبی را خواهید آموخت:[۱]

  • resize
  • outline-offset

پشتیبانی مرورگرها

اعداد درون جدول زیر مشخص کننده اولین نسخه مرورگرهایی است که از این قابلیت به‌طور کامل پشتیبانی کرده‌اند.

ویژگی Chrome Internet Explorer / Edge Firefox Safari Opera
resize ۴٫۰ پشتیبانی نمی‌شود ۵٫۰ ۴٫۰ ۱۵٫۰
outline-offset ۴٫۰ ۱۵٫۰ ۵٫۰ ۴٫۰ ۹٫۵

تغییر سایز در CSS

ویژگی resizeمشخص می‌کند که آیا (و چگونه) یک عنصر می‌بایست توسط کاربر تغییر سایز داده شود.

این عنصر <div> قابل تغییر سایز به وسیله کاربر است.

برای تغییر سایز: کلیک کنید، و گوشه پایین سمت راست این عنصر div را Drag کنید.

نکته: internet explorer از ویژگی Resize پشتیبانی نمی‌کند.

مثال زیر به کاربر اجازه می‌دهد فقط عرض یک عنصر <div> را تغییر سایز دهید:

مثال

div {
  resize: horizontal;
  overflow: auto;
}


مثال زیر به کاربر اجازه می‌دهد فقط ارتفاع یک عنصر <div> را تغییر سایز دهد:

مثال

div {
  resize: vertical;
  overflow: auto;
}


مثال زیر به کاربر اجازه می‌دهد هم ارتفاع و هم عرض یک عنصر <div> را تغییر سایز دهید:

مثال

div {
  resize: both;
  overflow: auto;
}


در بسیاری از مرورگرها، <textarea> به صورت پیش‌فرض قابلیت تغییر سایز دارد. در اینجا، ما از ویژگی resize استفاده کردیم تا خاصیت تغییر سایز را غیرفعال کنیم:

مثال

textarea {
  resize: none;
}


Outline Offset در CSS

ویژگی outline-offset فاصله ای را بین یک outline و لبه یا کادر عنصر اضافه می‌کند.

این div یک outline به اندازه 15px بیرون از لبه‌های کادر دارد.

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

مثال زیر از ویژگی outline-offset برای اضافه‌کردن فاصله بین کادر و outline استفاده می‌کند:

مثال

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}


ویژگی‌های رابط کاربری در CSS

جدول زیر تمامی ویژگی‌های رابط کاربری را لیست می‌کند:

ویژگی توضیحات
outline-offset فاصله ای بین یک outline و لبه یا کادر یک عنصر اضافه می‌کند
resize مشخص می‌کند که آیا اندازه یک عنصر باید توسط کاربر قابل تغییر باشد یا نه

منابع آموزشی