פסאודו-רכיבים

The CSS Podcast - 014: Pseudo-Elementments

אם יש לכם כתבה של תוכן ואתם רוצים שהאות הראשונה תהיה גדולה הרבה יותר – איך עושים את זה?

ב-CSS, אפשר להשתמש ברכיב המדומה ::first-letter כדי ליצור פרטי עיצוב מהסוג הזה.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

רכיב פסאודו-רכיב דומה להוספה או לטירגוט של רכיב נוסף בלי שתצטרכו להוסיף עוד HTML. זה הפתרון לדוגמה, באמצעות הפקודה ::first-letter, הוא אחד מאלמנטים פסאודוניים רבים. יש להם מגוון תפקידים, ובשיעור הזה תלמדו אילו פסאודו רכיבים זמינים ואיך ניתן להשתמש בהם.

::before וגם ::after

גם ::before ו- ::after פסאודו-אלמנטים יוצרים רכיב צאצא בתוך רכיב רק אם מגדירים נכס content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

הערך content יכול להיות כל מחרוזת —גם ריקה — אבל חשוב לזכור: סביר להניח שקורא המסך יכריז על כל דבר מלבד מחרוזת ריקה. אפשר להוסיף תמונה url, שתכניס תמונה במידות המקוריות שלה, כך שלא תוכל לשנות את הגודל שלו. אפשר גם להוסיף counter

אחרי שיוצרים רכיב ::before או ::after, תוכלו לעצב אותו בכל דרך שתרצו, ללא מגבלות. אפשר להוסיף רכיב ::before או ::after רק לרכיב שיקבל רכיבי צאצא (רכיבים עם עץ מסמכים), כך שרכיבים כמו <img />, <video> ו-<input> לא יפעלו.

::first-letter

פגשנו את הרכיב המדומה הזה בתחילת השיעור. חשוב לדעת שלא ניתן להשתמש בכל נכסי ה-CSS לטירגוט. ::first-letter הנכסים הזמינים הם:

• color
• background נכסים (כמו background-image)
• border נכסים (כמו border-color)
• float
• font נכסים (כמו font-size ו-font-weight)
• מאפייני טקסט (כמו text-decoration ו-word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

::first-line רכיב מדומה יאפשר לך לעצב את שורת הטקסט הראשונה רק אם לאלמנט שהוחל ::first-line יש ערך display של block, inline-block, list-item, table-caption או table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

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

• color
• background מלונות
• font מלונות
• text מלונות

::backdrop

אם יש לכם רכיב שמוצג במצב מסך מלא, כמו <dialog> או <video>, אפשר לעצב את הרקע — הרווח בין הרכיב לשאר הדף — באמצעות ::backdrop רכיב מדומה:

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker רכיב פסאודו-רכיב מאפשר לעצב את התבליט או המספר עבור פריט ברשימה או את החץ של רכיב <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

יש תמיכה רק בקבוצת משנה קטנה של נכסי CSS עבור ::marker:

• color
• content
• white-space
• font מלונות
• נכסים מסוג animation ו-transition

אפשר לשנות את סמל הסמן באמצעות המאפיין content. לדוגמה, אפשר להשתמש בתכונה הזו כדי להגדיר סימן פלוס ומינוס למצבי הסגור והריק של רכיב <summary>.

::selection

::selection רכיב מדומה מאפשר לכם לעצב את המראה של טקסט שנבחר.

::selection {
  background: green;
  color: white;
}

אפשר להשתמש ברכיב המדומה הזה כדי לעצב את כל הטקסט שנבחר כמו בהדגמה שלמעלה. אפשר גם לשלב אותם עם בוררים אחרים כדי ליצור סגנון בחירה ספציפי יותר.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

בדומה לרכיבים פסאודוניים אחרים, מותר להשתמש רק בקבוצת משנה של מאפייני CSS:

• color
• background-color אבל לא background-image
• text מלונות

::placeholder

אתם יכולים להוסיף רמז עוזר לרכיבי טופס, כמו <input> עם מאפיין placeholder. ::placeholder רכיב מדומה מאפשר לכם לעצב את הטקסט הזה.

input::placeholder {
  color: darkcyan;
}

השדה ::placeholder תומך רק בקבוצת משנה של כללי CSS:

• color
• background מלונות
• font מלונות
• text מלונות

::cue

האחרון בסיור זה בפסאודו אלמנטים ::cue רכיב מדומה. כך אפשר לעצב את רמזים של WebVTT, שהם כיתובים של רכיב <video>.

אפשר גם להעביר בורר ל::cue, שמאפשר לעצב רכיבים ספציפיים בתוך כיתוב.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

בדיקת ההבנה

בוחנים את הידע שלכם על פסאודו אלמנטים