واجهة المستخدم 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 تحديد ما إذا كان العنصر قابلًا للتغيير حجمه من قبل المستخدم.