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

ستتعرف في هذا الفصل على خصائص واجهة مستخدم CSS التالية:

resize
outline-offset

دعم المتصفح

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

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

تغيير حجم CSS

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

يمكن للمستخدم تغيير حجم عنصر div هذا!

لتغيير الحجم: انقر واسحب الزاوية اليمنى السفلية لعنصر div هذا.

المثال التالي يتيح للمستخدم تغيير حجم عرض عنصر <div> فقط:

مثال

div {
resize: horizontal;
overflow: auto;
}

المثال التالي يتيح للمستخدم تغيير حجم ارتفاع عنصر <div> فقط:

مثال

div {
resize: vertical;
overflow: auto;
}

المثال التالي يتيح للمستخدم تغيير حجم كل من ارتفاع وعرض عنصر <div>:

مثال

div {
resize: both;
overflow: auto;
}

في العديد من المتصفحات ، يمكن تغيير حجم <textarea> افتراضيًا. هنا ، استخدمنا خاصية تغيير الحجم لتعطيل إمكانية تغيير الحجم:

مثال

textarea {
resize: none;
}

إزاحة مخطط CSS

تضيف outline-offsetالخاصية مسافة بين مخطط تفصيلي وحافة عنصر أو حده.

يحتوي div هذا على مخطط تفصيلي 15 بكسل خارج حافة الحد.

ملاحظة: يختلف المخطط التفصيلي عن الحدود! على عكس الحد ، يتم رسم المخطط التفصيلي خارج حدود العنصر ، وقد يتداخل مع محتوى آخر. أيضًا ، المخطط التفصيلي ليس جزءًا من أبعاد العنصر ؛ لا يتأثر العرض والارتفاع الكلي للعنصر بعرض المخطط التفصيلي.

يستخدم المثال التالي 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

يسرد الجدول التالي جميع خصائص واجهة المستخدم:

Property	Description
outline-offset	Adds space between an outline and the edge or border of an element
resize	Specifies whether or not an element is resizable by the user

❮ سابق التالي ❯

دروس CSS

CSS متقدم

استجابة CSS

شبكة CSS

CSS SASS

أمثلة CSS

مراجع CSS

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