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

salsabeel nourيونيو 14, 2024

0 42 دقيقة واحدة

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

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

دعم المتصفحات

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

الخاصية	Internet Explorer	Firefox	Chrome	Safari	Opera
resize	4.0	7.0	9.0	5.0	4.0
outline-offset	4.0	15.0	5.0	4.0	9.5

تغيير الحجم باستخدام CSS (resize)

خاصية 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) في CSS

خاصية outline-offset تضيف مسافة بين حافة العنصر (outline) وحدّه الخارجي.

ملحوظة مهمة: الفرق بين الحافة (outline) والحدود (border):

الحافة (outline): يتم رسمها خارج حد العنصر الأساسي (border)، وقد تتداخل مع عناصر أخرى في الصفحة. كذلك، لا تُحتسب الحافة ضمن أبعاد العنصر، فلا يؤثر عرض الحافة على العرض أو الارتفاع الكلي للعنصر.
الحدود (border): يتم رسمها على طول حد العنصر الأساسي، وتُحتسب ضمن أبعاد العنصر الكلية.

المثال التالي يستخدم خاصية outline-offset لإضافة مسافة بين الحد (border) والحافة (outline):

مثال

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

يوجد في CSS عدد محدود من الخصائص للتحكم في بعض جوانب عرض عناصر واجهة المستخدم، إليك ملخص لها:

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