pseudo elements – מה הם ולמה צריך אותם

אולי יצא לכם להיתקל בעבר ב-pseudo elements - או בשם העברי ״אלמנטים מדומים״ - הנוצרים כשמשתמשים בסלקטורים :before ו-:after מבלי להבין איך הם עובדים או למה צריך אותם.

למה צריך את זה? איך עובד content? איפה זה "לפני ו"אחרי" בדיוק? ומה עם אקספלורר? על כל השאלות האלו נענה בפוסט זה.

איך כותבים?

סלקטורי :before ו-:after נכתבים כמו סלקטורים מדומים (pseudo-selectors), למשל hover ו-active המוכרים. רק שהם נקראים אלמנטים מדומים (pseudo-elements), כי זה מה שהם עושים - יוצרים אלמנטים בתוך ה-html.

ככה נראה שימוש בסלקטור "לפני", למשל:

a:before{
  content:"here is a link";
}

ומה שנקבל בפועל הוא שהמילים "here is a link" יופיעו לפני כל הקישורים בדף.

למה צריך את זה?

התשובה הקצרה היא ש-:before ו-:after באים להוסיף טקסט שתפקידו עיצובי, למשל חצים / בולטים / מרכאות. למשל, ייתכן ותרצו בולטים שנראים כמו מקף לפני כל פריט ברשימה שלכם:

פריט 1
פריט 2
פריט 3
פריט 4

בעזרת :before תוכלו ליצור מקפים כאלו באופן פשוט יחסית:

li{
  list-style-type:none;
  position:relative;
}
li:before{
  content: '-';
  width: .75em;
  right: -.75em;
  position: absolute;
}

מה עוד אפשר לעשות עם אלמנטים מדומים?

מבחינת עיצוב - כמעט כל מה שאפשר לעשות עם אלמנט בדף ב-css. על כל אלמנט ב-html - זמינים לנו שני אלמנטים נוספים שאפשר להחיל עליהם עיצוב. הדבר מאפשר להפחית את כמות הקוד הלא-סמנטי שבדף. למשל, אם הזדקקנו בעבר ל-span או ל-div ריקים, נוכל להמנע מכך ע"י שימוש באלמנטים מדומים.

מה אי אפשר לעשות

ג'אווה-סקריפט. האלמנטים המדומים לא מופיעים בתוך ה-dom.
~~מעברים ואנימציות מבוססי css~~ - למעשה מדובר בבאג בוובקיט שתוקן ב-2013

התכונה content

התכונה content היא ייחודית לסלקטורים אלו וחובה לכתוב אותה בהם, אפילו אם אין לכם תוכן שאתם רוצים להכניס. צריך לכתוב את ה-content וגרשיים ריקים בתור הערך של התכונה:

.myclass:before{
  content:"";
}

התכונה content מכניסה טקסט לתוך הדף, כאילו הוא היה כתוב בתוך ה-html. זה נראה מעט מוזר בהתחלה שאפשר להכניס תוכן לדף מתוך ה-css, ובאמת לא מומלץ להכניס באופן זה טקסט חשוב, אלא רק דברים ששייכים לעיצוב.

סימנים מיוחדים

בתוך content אפשר לכתוב אותיות באנגלית בלבד*:

.myclass:before{
  content:"some text";
}

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

שימוש לדוגמה - הוספת מרכאות כפולות לפני ציטוטים:

q:before {
  content:"\201c"; /* add quotation mark before quotes */
}

* אם בכל זאת רוצים, אפשר להדביק סימנים מיוחדים או להקליד עברית, בתנאי שהקובץ שמור כ-utf8, במקרה כזה צריך לכתוב בתחילת קובץ ה-css הגדרת charset:

@charset "UTF-8";

ואז אפשר להדביק את הסימן המיוחד ישירות בתוך ה-css:

q:before {
  content:"“"; /* add quotation mark before quotes */
}

מאפיינים

ניתן להשתמש במאפיינים של האלמנט אליו מצמידים את ה"לפני/אחרי".

לדוגמה, ייתכן ותרצו לשלוף את הערך של מאפיין href של הקישורים בדף. נרצה לעשות זאת כדי שבהדפסה יראו את כתובות הקישורים:

@media print {
  a[href]:after { content: " (" attr(href) ")"; }
}

תמונות

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

a[href$=".pdf"]:before{
  content:url(../img/pdf-icon.png);
}

לפני מה? אחרי מה?

אחד הדברים המבלבלים בסלקטורים לפני ואחרי, הוא "לפני/אחרי מה?"
התשובה הלא נכונה היא "לפני/אחרי האלמנט".
המיקום של התוכן שמייצר :before הוא בתוך האלמנט - ממש בתחילתו - אחרי התגית הפותחת, או ממש בסופו - לפני התגית הסוגרת. אם כן, התשובה הנכונה היא "לפני/אחרי התוכן של האלמנט".

לדוגמה, אם יש לנו דיב כזה:


<div class="box">
  content of box
</div>

וסלקטור כזה:

.box:before{
  content:"before";
}

(נייצג את המיקום של התוכן שמייצר :before באמצעות אלמנט span עם class=before)

לא נכון:

<span class="before"></span>
<div class="box">
  content of box
</div>

נכון:

<div class="box">
  <span class="before"></span>
  content of box
</div>

איפה זה נתמך?

יש תמיכה די טובה בלפני/אחרי - שכן מדובר בתכונה ששייכת ל-css2.1 ולא ל-css3. דפדפנים מודרניים וכן אקספלורר 8 ומעלה תומכים באלמנטים מדומים. כל זמן שאתם מגבילים את השימוש לנספחים עיצוביים לא-הכרחיים, אתם מכוסים. אם אתם בכל זאת רוצים לספק סגנונות חלופיים לדפדפנים שלא תומכים בזה, מודרנייזר יודע לזהות תמיכה באלמנטים המדומים (נקראים CSS generated content).