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

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

توضح هذه المقالة خصائص 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>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</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 أن تأخذ القيم التالية:۔

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}
  • نص
    • يمكنك إضافة نص عن طريق إحاطة السلسلة مباشرةً بعلامتي اقتباس مزدوجتين ("")۔
1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}
  • صورة
    • يمكنك إدراج صورة باستخدام دالة url()۔
 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}
  • عداد
    • استخدم دالة counter() لعرض العداد۔
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • خاصية
    • يمكن استخدام دالة attr() لعرض قيمة خاصية في عنصر HTML۔ على سبيل المثال، يمكنك عرض خاصية title۔
1/* None */
2.content-none::before {
3    content: none;
4}
  • لا شيء
    • يحدد أنه لا يجب عرض أي محتوى۔ هذه هي الحالة الافتراضية۔

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

عند استخدام خاصية content، ضع في اعتبارك النقاط التالية:۔

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

خاصية cursor

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

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

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

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }
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۔

  1. تحديد العناصر التي ترغب في تعطيلها

    • القيمة none مفيدة لتعطيل العناصر مثل الأزرار أو الروابط بشكل مؤقت۔

  2. الاستخدام مع العناصر المتراكبة

    • عندما يتم تعيين خاصية 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 الاتجاهات التي يمكن فيها تغيير حجم العنصر۔ يمكنك تحديد القيم التالية۔
both
  • تحديد both يسمح بتغيير حجم العنصر في الاتجاهين الرأسي والأفقي۔
horizontal
  • تحديد horizontal يسمح بتغيير حجم العنصر فقط في الاتجاه الأفقي (العرض)۔
vertical
  • تحديد vertical يسمح بتغيير حجم العنصر فقط في الاتجاه الرأسي (الارتفاع)۔
none
  • تحديد none يعطل تغيير حجم العنصر۔ هذه هي القيمة الافتراضية۔
inherit
  • تحديد inherit يجعل العنصر يرث قيمة خاصية resize من العنصر الأب۔

ملاحظات

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

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

YouTube Video

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