תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

5 שימושים מועילים בתכונה content  של CSS ובפסאודו אלמנטים before ו-after

מחבר:
בתאריך:

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

במדריך זה 5 דוגמאות לשימוש בפסאודו אלמנטים של CSS.

 

1. הוספת כוכבית לשדות חובה בטופס

מאוד מקובל להוסיף כוכבית קטנה ליד שדות הכרחיים (required) בטופס.

את הכוכבית אנחנו יכולים להוסיף בתור פסאודו אלמנט של CSS.

בדוגמה הבאה הוספנו את הכוכבית האדומה לצד התגית באמצעות CSS בלבד:

ה-HTML כולל שדה בטופס ותגית label עטופים בתוך div שיש לו קלאס required:

<div class="input-wrapper required">
  <label>
  שדה חובה
  </label> 
  <input required="" type="text" value="" />
</div>

ברמת ה-CSS, נוסיף את הפסאודו אלמנט after לתגית label כי אנחנו רוצים שהאלמנט יבוא אחרי התגית:

.required label:after{

}

חובה להוסיף את התכונה content שמגדירה מה יהיה תוכן הפסאודו אלמנט. במקרה זה, כוכבית:

.required label:after{
  content: '*';
}

נוסיף כללי עיצוב המקנים לאלמנט רווח וצבע אדום:

.required label:after{
  content: '*';
  color: red;
  padding-left:10px;
}

הוספנו את הפסאודו אלמנט לתגית label ולא לשדה input מכיוון שניתן להשתמש רק על אלמנטים של HTML הכוללים תגית פותחת וסוגרת דוגמת div בעוד input מורכב מתגית אחת בלבד.

 

2. טולטיפ ללא JavaScript

טולטיפ היא תיבת טקסט קטנה שמופיעה כשמרחפים hover על אלמנט. נהוג להשתמש ב-JavaScript כדי להפעיל טולטיפים. אבל גם פסאודו אלמנט של CSS יכול לספק את הסחורה.

אם תעבור עם העכבר על סימן השאלה תוכל לראות את הטולטיפ בפעולה:

?

לתוך מבנה ה-HTML שהשתמשנו בו בסעיף קודם נוסיף עכשיו span עם קלאס tooltip שיכלול תכונה של data-tooltip עם הטקסט שנרצה שיופיע כשמשתמש יעבור עם העכבר.

<div class="input-wrapper required">
  <label>
  שדה חובה  
  </label>
  <input required="" type="text" value="" /> 
  <span class="tooltip" data-tooltip="הטולטיפ שלנו גדול וירוק"> ? </span>
</div>

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

.input-wrapper{
  position:relative;
  width:300px;
  height:40px;
}

כדי שהטולטיפ יופיע רק כשעוברים עם העכבר, נשתמש ב-hover:

.tooltip:hover:after{
  content: attr(data-tooltip);
  position:absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background-color:green;
  color:white;
}

התכונה content מקבלת את ערכה מהפונקציה attr(). הפרמטר שמעבירים לפונקציה הוא שם ה-attribute על גבי אלמנט ה-HTML.

 

3. הוספת טקסט

אנחנו יכולים להוסיף טקסט שמקורו ב-CSS. כל מה שצריך הוא לרשום את הטקסט בתור הערך של התכונה content:

.element:after {
  content: 'Some text'
}

 

4. הוספת גליפים או תמונות

אנחנו יכולים להוסיף גליפים (glyphs) לפני או אחרי אלמנט.

נשתמש בזה כדי שהבולטים של הרשימה שלנו יהיו בצורת תלתן:

  • ראשון
  • שני
  • שלישי

זה הקוד שהשיג את התוצאה:

ul {
  list-style-type:none;
}

ul li:before {
  content: "♣";
  display: inline-block;
  width: 16px;
  font-size: 18px;
  text-align: right;
  color:red;
}

לרשימת הגליפים בהם ניתן להשתמש: glyphs page

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

ul{
  list-style-type:none;
}

.li:before {
  content: url('path-to-img.png');
}

 

5. בתור clearfix

כשרוצים לנקות את ה-float אפשר להשתמש בפסאודו אלמנט :after על האלמנט ההורה:

<div class="parent">
  <div class="child-with-float"></div>
  <div class="child-with-float"></div>
  <div class="child-with-float"></div>
</div>
.parent:after {
  content: "";
  display: table;
  clear: both;
}

יותר פשוט ונקי מאשר div שעושה clearfix.

לכל מדריכי ה-CSS3

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך אומרים בעברית אינטרנט?

 

תמונת המגיב

יעקב בתאריך: 04.11.2020

מדריך יפה מאוד , תודה על כל ההשקעה