خصائص CSS المتعلقة بواجهة المستخدم

Articles

توضح هذه المقالة خصائص CSS المتعلقة بواجهة المستخدم۔

يمكنك التعرف على خصائص content وcursor وpointer-events وresize، بما في ذلك حالات استخدامها وكيفية كتابتها۔

YouTube Video

HTML للمعاينة

css-ui.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</html>

متعلقة بواجهة المستخدم

خاصية `content`

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

تُستخدم خاصية content لإضافة محتوى إلى العناصر الكاذبة، خاصة ::before أو ::after۔ تُستخدم هذه الخاصية لتحديد النصوص أو الصور أو العدادات وما إلى ذلك، والتي لا يتم عرضها مباشرة داخل العنصر۔ الدور الرئيسي لها هو التحكم بالمحتوى التزييني أو المعلومات التكميلية التي لا تُكتب مباشرة في HTML من خلال أوراق الأنماط۔

في هذا المثال، تمت إضافة "Note: " قبل العنصر، و"(End)" بعده۔ يتم استخدام العناصر الكاذبة ::before و::after لهذه الحالات على التوالي۔

قيم خاصية `content`

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

يمكن لخاصية content أن تأخذ القيم التالية:۔

النص: يتم تحديده مباشرة عن طريق إحاطة النص بين ""۔ تضيف نصاً۔
الصورة: استخدم دالة url() لإضافة الصور۔
العداد: استخدم دالة counter() لعرض العدادات۔
الخاصية: استخدم دالة attr() لعرض قيم خصائص عناصر HTML۔ على سبيل المثال، يمكنك عرض خاصية title۔
none: تحدد أنه لن يتم عرض أي محتوى۔ هذه هي الحالة الافتراضية۔

ملاحظات الاستخدام

خاصية content تُطبق فقط على العناصر الكاذبة، وليس على العناصر العادية۔
نظرًا لأنها لا تُضاف إلى DOM، لا يمكن التلاعب بها مباشرة باستخدام JavaScript۔
قد تؤثر على التخطيط، لذلك تُستخدم عادةً لعرض المحتوى التزييني أو المعلومات التكميلية۔

مثال

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

هذا مثال على إضافة أيقونة قبل عنصر <p>۔ بهذه الطريقة، يمكنك تحسين المحتوى بصريًا من خلال أوراق الأنماط۔

خاصية `cursor`

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

تُستخدم خاصية cursor لتحديد نوع المؤشر الذي يتم عرضه عند وضع مؤشر الفأرة فوق عنصر معين۔ يمكنك تحديد أنماط مؤشر متنوعة، وعادةً ما تُطبق على العناصر التفاعلية لتحسين تجربة المستخدم۔

أنواع المؤشرات الرئيسية

يمكن تحديد القيم التالية كأنواع للمؤشرات:۔

`default`

- `default` هو مؤشر السهم العادي (المؤشر الافتراضي للمتصفح)۔

`pointer`

- `pointer` هو مؤشر على شكل يد يظهر عند وضعه فوق رابط۔

`text`

- `text` هو مؤشر على شكل I-beam يظهر في المناطق التي يمكن تحديد النص بها۔

`move`

- `move` هو مؤشر على شكل صليب يستخدم عندما يمكن سحب عنصر ما۔

`crosshair`

- `crosshair` هو مؤشر على شكل شعيرات متقاطعة يُستخدم للتحديد الدقيق۔

`not-allowed`

- `not-allowed` هو مؤشر للمناطق أو الإجراءات غير المسموح بها۔

`help`

- `help` هو مؤشر مع علامة استفهام يظهر عند وضعه فوق عناصر تقدم معلومات مساعدة۔

`wait`

- `wait` هو مؤشر على شكل ساعة رملية أو دائري يمثل حالة معالجة۔

`progress`

- `progress` هو مؤشر يمثل وجود عملية قيد التنفيذ۔ ومع ذلك، يشير إلى أن المستخدم يمكنه إجراء عمليات أخرى۔

`grab`

- `grab` هو مؤشر للإمساك بالعناصر القابلة للسحب۔

`grabbing`

- `grabbing` هو مؤشر يشير إلى أن هناك عنصراً يتم سحبه۔

`resize`

- `resize` هو مؤشر يُستخدم عند إمكانية تغيير حجم نافذة أو عنصر۔ هناك أنواع مختلفة حسب الاتجاه۔
    - **`n-resize`**: تغيير الحجم في الاتجاه العلوي۔
    - **`s-resize`**: تغيير الحجم في الاتجاه السفلي۔
    - **`e-resize`**: تغيير الحجم إلى اليمين۔
    - **`w-resize`**: تغيير الحجم إلى اليسار۔
    - **`ne-resize`**: تغيير الحجم إلى أعلى اليمين۔
    - **`nw-resize`**: تغيير الحجم إلى أعلى اليسار۔
    - **`se-resize`**: تغيير الحجم إلى أسفل اليمين۔
    - **`sw-resize`**: تغيير الحجم إلى أسفل اليسار۔

مؤشر مخصص

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

يمكن أيضًا تحديد مؤشر مخصص باستخدام url()۔

في هذا المثال، custom-cursor.png هو ملف الصورة للمؤشر۔ إذا لم تكن تلك الصورة متوفرة، يتم عرض مؤشر المتصفح الافتراضي باستخدام auto۔

الملخص

خاصية cursor تحدد أي مؤشر يجب عرضه عندما يكون المستخدم فوق عنصر۔
توجد أنماط مؤشر متنوعة متاحة حسب الاستخدام، ويمكن أيضًا تحديد مؤشرات مخصصة۔
عن طريق اختيار أنماط المؤشر المناسبة وفقًا للعناصر التفاعلية والعمليات المقيدة، يمكن توفير واجهة مستخدم أكثر سهولة۔

خاصية `pointer-events`

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

تُستخدم خاصية pointer-events للتحكم في كيفية تعامل العنصر مع الأحداث من أجهزة المؤشر مثل الفأرة واللمس والقلم۔ عادةً، عندما يتم النقر أو التمرير فوق عنصر من قبل المستخدم، يتلقى العنصر أحداث المؤشر، ولكن يمكن تغيير هذا السلوك باستخدام هذه الخاصية۔

في فئة pointer-events-auto، يتم تعيين خاصية pointer-events إلى auto، مما يتيح معالجة أحداث النقر والتمرير العادية۔ العنصر قابل للنقر، وبالتالي يتم عرض رسالة عند النقر عليه۔
في فئة pointer-events-auto، يتم تعيين خاصية pointer-events إلى none، لذا لا يتلقى العنصر أحداث المؤشر۔ حتى إذا تم تعيين خاصية cursor إلى pointer، فإن مؤشر الفأرة لا يتغير، وتصبح العناصر الأخرى أسفله قابلة للنقر۔

أنواع القيم

خاصية pointer-events تحدد ما إذا كان العنصر يتلقى أحداث المؤشر وكيفية ذلك۔ يمكنك تحديد القيم التالية۔

`auto`

القيمة الافتراضية هي auto، حيث يستقبل العنصر أحداث المؤشر بشكل طبيعي۔

`none`

عند تحديد none، لن يستقبل العنصر أحداث المؤشر۔ العنصر يعطل التفاعلات مثل النقر أو التمرير فوقه، ولكن العناصر الأخرى الموجودة تحته يمكنها استقبال أحداث المؤشر۔

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

تُستخدم هذه القيم بشكل أساسي لعناصر SVG۔ كل قيمة تتحكم فيما إذا كانت أجزاء معينة من العنصر (مثل التعبئة، أو الحد، إلخ.) تستجيب لأحداث المؤشر۔ لا يُستخدم عادةً مع عناصر HTML العادية۔

النقاط الرئيسية للاستخدام

فيما يلي بعض الأمثلة على كيفية استخدام خاصية pointer-events۔

تحديد العناصر التي ترغب في تعطيلها
- القيمة none مفيدة لتعطيل العناصر مثل الأزرار أو الروابط بشكل مؤقت۔
الاستخدام مع العناصر المتراكبة
- عندما يتم تعيين خاصية position إلى absolute أو يتم تكديس العناصر باستخدام خاصية z-index، فإن تعيين خاصية pointer-events إلى none على العنصر العلوي يسمح بإرسال أحداث المؤشر إلى العنصر الموجود أسفله۔

خاصية `resize`

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

خاصية resize هي خاصية CSS تحدد الاتجاه الذي يمكن للمستخدم تغيير حجم العنصر فيه۔ باستخدام هذه الخاصية، يمكنك السماح بتغيير حجم العناصر رأسيًا أو أفقيًا عن طريق السحب، أو تعطيل تغيير الحجم بالكامل۔

في هذا المثال، يتم تحديد الاتجاه الذي يمكن فيه تغيير حجم منطقة النص باستخدام خاصية resize۔

باستخدام resize: both;، يمكن تغيير حجم العنصر أفقيًا ورأسيًا۔
باستخدام resize: horizontal;، يمكن تغيير حجم العنصر أفقيًا فقط۔
باستخدام resize: vertical;، يمكن تغيير حجم العنصر رأسيًا فقط۔
باستخدام resize: none;، لا يمكن تغيير حجم العنصر۔

أنواع القيم

يتم تعيين خاصية resize قيمة تحدد الاتجاه الذي يمكن تغيير حجم العنصر فيه۔ يمكنك تحديد القيم التالية۔

`none`

تحديد none يعطل تغيير حجم العنصر۔ هذه هي القيمة الافتراضية۔

`both`

تحديد both يسمح بتغيير حجم العنصر في الاتجاهين الرأسي والأفقي۔

`horizontal`

تحديد horizontal يسمح بتغيير حجم العنصر فقط في الاتجاه الأفقي (العرض)۔

`vertical`

تحديد vertical يسمح بتغيير حجم العنصر فقط في الاتجاه الرأسي (الارتفاع)۔

`inherit`

تحديد inherit يجعل العنصر يرث قيمة خاصية resize من العنصر الأب۔

ملاحظات

لجعل العنصر قابلاً لتغيير الحجم، يجب تعيين خاصية overflow بالإضافة إلى خاصية resize۔ قد تتطلب العناصر القابلة لتغيير الحجم أشرطة تمرير، وعادةً ما يتم تعيين overflow: auto۔
عادةً ما يُستخدم تغيير الحجم مع العناصر الكتلية مثل div و textarea۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بالرسوم المتحركة ثلاثية الأبعاد خصائص CSS المتعلقة بـ Float

خصائص CSS المتعلقة بواجهة المستخدم

YouTube Video

HTML للمعاينة

متعلقة بواجهة المستخدم

خاصية content

قيم خاصية content

ملاحظات الاستخدام

مثال

خاصية cursor

أنواع المؤشرات الرئيسية

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

مؤشر مخصص

الملخص

خاصية pointer-events

أنواع القيم

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

النقاط الرئيسية للاستخدام

خاصية resize

أنواع القيم

none

both

horizontal

vertical

inherit

ملاحظات

YouTube Video

خاصية `content`

قيم خاصية `content`

خاصية `cursor`

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

خاصية `pointer-events`

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

خاصية `resize`

`none`

`both`

`horizontal`

`vertical`

`inherit`