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

בדוגמה זו, הכיוון שבו ניתן לשנות את גודל שדה הטקסט (textarea) מוגדר באמצעות תכונת 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 Video

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