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 שמוצג באזורים שבהם ניתן לבחור טקסט.
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 Video

מאפייני CSS הקשורים לאנימציה בתלת-ממדתכונות CSS הקשורות לציפה