رابط کاربری CSS

رابط کاربری CSS

در این فصل، شما به برخی از ویژگی‌های رابط کاربری CSS آموزش خواهید دید:

  • resize
  • outline-offset

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

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

خصوصیت Chrome IE Firefox Safari Opera
resize 4.0 پشتیبانی نمی‌شود 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS تغییر سایز

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

این عنصر div قابل تغییر سایز توسط کاربر است!

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

توجه داشته باشید: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;
}

آزمایش کنید

حرکت پیرامون CSS

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

این div دارای یک برگه به اطراف لبه‌های چارچوب به اندازه 15px است.

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

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

مثال

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