CSS واجهة المستخدم

CSS واجهة المستخدم

في هذا الفصل، ستتعلم الخاصيات التالية لـ CSS واجهة المستخدم:

  • تغيير حجم
  • outline-offset

دعم المتصفح

أرقام الجدول تشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.

خصائص Chrome IE Firefox Safari Opera
تغيير حجم 4.0 لا يدعم 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS تعديل الحجم

تغيير حجم تحدد الخاصية ما إذا كان العنصر يجب (و كيف ) تعديله حجمه من قبل المستخدم.

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