למרות שהפתרון הוא רק פלסטר, הוא נועד לשדר מידע ברור יותר למשתמשים שהתמונה חסרה.
אנחנו נשתמש בתגית <img>.
שני פרמטרים שכדאי לציין לגבי <img>
כדי להבין כיצד ניתן לעצב תמונות "שבורות", ישנן שתי עובדות על האופן שבו האלמנט מתנהג שעלינו להבין תחילה.
- ניתן לעצב את הטיפוגרפיה הקשורה לאלמנט
<img>.
סגנונות אלו יחולו על הטקסט החלופי, אם הוא יוצג, ולא ישפיעו על התמונה. - האלמנט
<img>הוא אלמנט מוחלף. זהו אלמנט "שמראהו ומידותיו מוגדרות על ידי משאב חיצוני" (Sitepoint). מכיוון שהאלמנט נשלט על ידי מקור חיצוני, הפסואודו אלמנטים:beforeו-:afterבדרך כלל לא אמורים לעבוד איתו. עם זאת, כאשר התמונה חסרה ואינה נטענת, הפסאודו אלמנטים כן יכולים להופיע.
בגלל שתי עובדות אלו, אנחנו יכולים להחיל סגנונות על האלמנט שיופיע רק כאשר התמונה נשברה, וישאיר תמונה תקינה ללא השפעה.
יישום העיצוב עם דוגמאות
באמצעות המידע הקודם, הנה כמה דוגמאות לאופן שבו אנו יכולים לסגנן תמונות חסרות, באמצעות הקישור השבור הבא:
הוספת מידע מועיל
אחת הדרכים שבהן נוכל לטפל בתמונות שנעלמו היא לספק הודעה למשתמש שאומרת שהתמונה חסרה. באמצעות הביטוי attr() נוכל אפילו להציג את הקישור לתמונה החסרה.
img {
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;width: 100%;
height: auto;
display: block;
position: relative;
}img:before {
content: "We're sorry, the image below is broken";
display: block;
margin-bottom: 10px;
}img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}שימו לב בבקשה, הקוד CSS בפוסט הוא רק רעיון שנועד לתת לכם חיזוק לעיצוב שלכם, אנא התאימו את הקוד בהתאם לעיצוב אתר שלכם.
נחליף את ברירת המחדל של טקסט אלטרנטיבי
לחלופין, נוכל להשתמש בפסאודו-אלמנטים כדי להחליף את הטקסט האלטרנטיבי המופיע כברירת מחדל, על ידי מיקום הפסאודו-אלמנט מעל הטקסט הרגיל, מה שיסתיר אותו מעיני המשתמש.
img { /* Same as first example */ }img:after {
content: "\f1c5" " " attr(alt);
font-size: 16px;
font-family: FontAwesome;
color: rgb(100, 100, 100);display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}עיצוב נוסף
בנוסף (או במקום) הצגת הודעה מותאמת אישית, אנו יכולים להשתמש באלמנטים הפסאודו כדי להחיל סגנון נוסף על התמונה החסרה
img {
/* Same as first example */
min-height: 50px;
}img:before {
content: " ";
display: block;position: absolute;
top: -10px;
left: 0;
height: calc(100% + 10px);
width: 100%;
background-color: rgb(230, 230, 230);
border: 2px dotted rgb(200, 200, 200);
border-radius: 5px;
}img:after {
content: "\f127" " Broken Image of " attr(alt);
display: block;
font-size: 16px;
font-style: normal;
font-family: FontAwesome;
color: rgb(100, 100, 100);position: absolute;
top: 5px;
left: 0;
width: 100%;
text-align: center;
}אם התמונה אינה חסרה, כאשר כל אותם סגנונות מוחלים על האלמנט, התמונה מוצגת כרגיל. הפסאודו-אלמנטים אינם נוצרים.
הפוסט המקורי נכתב באנגלית ב-2016 על ידי Ire Aderinokun, כשלא הייתה תמיכה מצד ספארי לפסאודו-אלמנטים של ::before & :after
למזלנו, זה השתנה והתמיכה רחבה – לכן הפלסטר של היום יוכל להיות מוצג בכל הדפדפנים.
סיכום
בתכל'ס אין הרבה מה לסכם, מקווה שהצלחתי לחדש לכם עם פלסטר נחמד לבעיות שקורות, קרו, ויקרו לכל אתר (אפילו אני לא חף מזה). המטרה של פתרון ה-CSS לתת מידע נוסף שהתמונה חסרה בעיצוב מותאם אישית לעיצוב של האתר.
הפוסט הוא חלק משני פוסטים שעתידים לעלות על HTML & CSS (בנפרד), כשהם יעלו, אעדכן בקישורים כאן.
