before & after

בCSS ישנם מס' אלמנטים פיקטיביים, שבעצם לא באמת קיימים, הם אינם חלק מהHTML, אך בCSS ניתן לתפוס אותם ולתת להם הגדרות סטייל שונות. בפוסט הזה נדבר על שתי האלמנטים before & after.

האם כל אלמנט HTMLי יכול לקבל before/after?

התשובה היא לא. כל אלמנט של HTML שכולל תגית פתיחה ותגית סגירה – מסוגל לקבל before וafter. לדוגמא: div, a, button, p, header, form, select וכו'.

אלמנטים שכוללים תגית אחת בלבד – שבסופה בד"כ מגיע סלאש הסגירה – לא מסוגלים לקבל before או after. לדוגמא: input, img, br.

לאיזה צורך משמשים האלמנטים הפיקטיביים?

וואוו, להמון שימושים! כמעט כל תוספת עיצובית שדורשת אלמנט ריק נוסף בתוך אלמנט "אב" – תוכל להתממש באמצעות before, after או שניהם. לדוגמא: אייקון של חץ בסוף טקסט קישור, משולש קטן ליד קישורים, רקע אלכסוני מתחת לדיב עם תוכן שעומד ישר ועוד.

עוד קצת מידע…

האלמנט before יתווסף לנו בתחילת אלמנט האב, לפני כל התוכן שלו, והאלמנט after יתווסף לסוף האלמנט האב, אחרי כל התוכן שלו. יש לזכור ששתיהם נוספים לתוך האלמנט האב שלהם שעליו הם מוגדרים, ולא כמו שנשמע מהשם שלהם – לפניו או אחריו, אלא לפני או אחרי התוכן שבתוך האלמנט האב.

מאחר ומדובר באלמנטים פיקטיביים, שלא באמת קיימים בHTML, נכון לעכשיו סקריפטים אינם מסוגלים לשלוט עליהם. כלומר, לא ניתן לכתוב משהו כמו jQuery('button:after').click(), כי הafter לא מוכר לJS.

לbefore/after חייב להיות מאפיין CSS שנקרא content. תכף נדבר מה האפשרויות הקיימות, רק חשוב לציין שבלי המאפיין הזה – לא נוכל לראות את האלמנט הפיקטיבי שלנו, לערוך אותו וכו'. הוא פשוט לא יהיה קיים ורק המאפיין של content נותן לו חיים. המאפיין content מכיל את התוכן של הbefore/after, אם זה טקסט או תמונה. למשל אם נצהיר משהו כמו content: 'hello' – הbefore שלנו יכיל את הטקסט הזה. כמה שאני יודעת – קוראי מסך לא מסוגלים לקרוא את זה, כי זה לא טקסט אמיתי של HTML, אלא כמו כל האלמנט – זה פיקטיבי. בנוסף לא ניתן לתפוס את זה עם העכבר, וכו'.

סוגי הcontent האפשריים:

  • ריק – ". משמש כשאנחנו צריכים רק להשתמש בbefore/after לצורך עיצובי כלשהו, בלי להכניס להם תוכן.
  • טקסט – יכול להיות מילה ממש, ויכול להיות רק תו כלשהו שמסמל אייקון בפונט של אייקונים כמו font awesome או glyphicons. לדוגמא "\f024". במקרה הזה נצטרך כמובן להוסיף לbefore או הafter שלנו מאפיינים נוספים כמו font-family וכו'.
  • attr(attribute) – ניתן לשתול לתוך הbefore טקסט שקיים כattribute של האלמנט האב שלו. למשל לשתול שם את הID של האב, וכדו'. יצא לי לראות שימוש נחמד לזה בלינקים, שהיו חייבים להיות נגישים, ומצד שני רצו שהtooltip שמופיע מעל הקישור כשעומדים עליו יהיה מעוצב ויפה. לכן במקום להגדיר title לקישור (לצורך נגישות, שקורא המסך יוכל לקרוא מה השם של הלינק), שגם יוצר טולטיפ אפור מעל הקישור במעכבר עכבר – הגדירו aria-label – שזו הגדרה שרק קורא המסך מכיר, בדיוק כמו title, אבל בלי טולטיפ, וכדי להוסיף את הטופלטיפ המעוצב, לאנשים שמסוגלים לצפות באתר – הוסיפו before עם content: attr(aria-label); בתוספת רקע חביב וכו'.
  • counter – ארחיב עליו בפוסט נפרד בעז"ה. באופן כללי – מדובר באפשרות לייצר מונה, אם בספרות או באותיות, שמאתחלים פעם אחת ומקדמים כל הזמן. והכל בCSS בלבד. את התוכן של המונה – הספרה או האות הנוכחית – יש להכניס לbefore או after כדי להציג אותו.
  • url(url) – ניתן להכניס לbefore/after מדיה כמו תמונה, אודיו, וידאו וכדו. כותבים url ואז בסוגריים את הURL של אותה מדיה. יש לשים לב שבמידה ומכניסים שם תמונה – לא ניתן להגדיר לה גודל, אלא היא מוצגת בגודל המקורי שלה בלבד. (אם מצאתם דרך לעשות את זה – אשמח מאד להתעדכן. בשביל זה יש כאן אפשרות לתגובה…)
  • יש אפשרות, השימוש שלה נדיר יותר, להוסיף סימני ציטוט, או לבטל אם כבר קיים. במידה ותצטרכו להשתמש בזה – תוכלו למצא מידע רב ברשת 🙂

דוגמאות לשימוש באלמנטים before & after

איפה לא?!

  • באתר הנפלא tympanus שנותן דוגמאות לרכיבים מעוצבים כולל קוד – תוכלו לראות כאן דוגמאות לאפקטים של מעבר עכבר על כפתורים. אם אני מסתכלת על האפקט הראשון – האייקון שבתוך העיגול הוא before עם content של אייקון, ויש גם שימוש בafter – זה העיגול הלבן שנוסף לכפתור במעבר עכבר.
  • עדיין באותו אתר, הנה דוגמאות לשימושים מגניבים ויוצאי דופן בbefore & after. תוכלו לבדוק את הדוגמאות באמצעות כלי הפיתוח של הדפדפן (developer tools) ותראו איזה יופי של קוד.
  • עיצוב לצ'קבוקס בלי שימוש בשום סקריפט. אכתוב בעתיד פוסט מפורט יותר, אבל הנה דוגמה למימוש – תוכלו לראות את הצ'קבוקסים בסיידבר כאן. מה שרואים על המסך זה הbefore המעוצב של הצ'קבוקס ולא אלמנט הצ'קבוקס עצמו.
  • ואם כבר באתר אלקטרה – המשולש ליד הפריטים בתתי התפריט, תחת התפריט הראשי – הינם גם כן באמצעות before
  • כשרוצים רשימה ממוספרת (ol) או לא ממוספרת (ul), והסימון עצמו יהיה בעיצוב שונה מהעיצוב של הטקסט עצמו – במקרים כאלה אפשר להשתמש פשוט בbefore של li, שהוא מעוצב. אם מדובר בol – רשימה ממוספרת – אפשר להשתמש בcounter כדי להשיג מספרים עולים. גם את זה אפשר לראות באתר אלקטרה.

ועוד ועוד שימושים שונים.

עשיתם משהו מגניב עם before או after? גיליתם אפשרות מעניינת שלא נמצאת כאן בפוסט? עובד או לא עובד לכם? אשמח לשמוע. בהצלחה רבה!

 

 

כתוב/כתבי תגובה