رابط کاربری

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

رابط کاربری در 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 مشخص می‌کند که آیا اندازه یک عنصر باید توسط کاربر قابل تغییر باشد یا نه

منابع آموزشی[ویرایش]