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;
}

آپ خود کا کوشش کریں

سی ایس ایس پروفائل کی کھوتا

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 عنصر کو کاربر کی جانب سے سائز تبدیل کرنا کا نصاب