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