כיצד להשתמש ב-CSS Sprites עם מצב אור ואפל
CSS sprites הם טכניקה המשמשת בפיתוח אתרים כדי להפחית את מספר HTTP בקשות שנעשו על ידי דף אינטרנט. הם כוללים שילוב של מספר תמונות קטנות לקובץ תמונה אחד גדול יותר ולאחר מכן שימוש ב-CSS כדי להציג קטעים ספציפיים של התמונה הזו כאלמנטים בודדים בדף האינטרנט.
היתרון העיקרי של שימוש ב-CSS sprites הוא שהם יכולים לעזור לשפר את זמן טעינת העמוד של אתר אינטרנט. בכל פעם שתמונה נטענת בדף אינטרנט, היא דורשת בקשת HTTP נפרדת, שעלולה להאט את תהליך הטעינה. על ידי שילוב של מספר תמונות לתמונת ספרייט אחת, נוכל להפחית את מספר בקשות ה-HTTP הדרושות לטעינת העמוד. זה יכול להביא לאתר אינטרנט מהיר ורספונסיבי יותר, במיוחד עבור אתרים עם הרבה תמונות קטנות כמו אייקונים וכפתורים.
שימוש ב-CSS sprites מאפשר לנו גם לנצל את היתרונות של שמירה במטמון של דפדפן. כאשר משתמש מבקר באתר, הדפדפן שלו ישמור את תמונת הספרייט לאחר הבקשה הראשונה. המשמעות היא שבקשות עוקבות עבור רכיבים בודדים בדף האינטרנט המשתמשים בתמונת הספרייט יהיו הרבה יותר מהירות מכיוון שהדפדפן כבר יכיל את התמונה במטמון שלו.
ספרייט CSS אינם פופולריים כמו פעם
עדיין נעשה שימוש נפוץ ב-CSS sprites כדי לשפר את מהירות האתר, למרות שהם אולי לא פופולריים כמו פעם. בגלל רוחב פס גבוה, webp פורמטים, דחיסת תמונה, רשתות אספקת תוכן (CDN), טעינה איטית, ו מטמון חזק טכנולוגיות, אנחנו לא רואים הרבה ספרייטים של CSS כמו פעם באינטרנט... למרות שזו עדיין אסטרטגיה מצוינת. זה שימושי במיוחד אם יש לך עמוד שמפנה למספר רב של תמונות קטנות.
CSS Sprite דוגמה
כדי להשתמש ב-CSS sprites, עלינו להגדיר את המיקום של כל תמונה בודדת בתוך קובץ תמונת ה-sprite באמצעות CSS. זה נעשה בדרך כלל על ידי הגדרת ה background-image
ו background-position
מאפיינים עבור כל רכיב בדף האינטרנט המשתמש בתמונת הספרייט. על ידי ציון קואורדינטות x ו-y של התמונה בתוך הספרייט, נוכל להציג תמונות בודדות כאלמנטים נפרדים בעמוד. הנה דוגמה... יש לנו שני כפתורים בקובץ תמונה בודד:
אם נרצה להציג את התמונה משמאל, נוכל לספק ל-div arrow-left
בתור המחלקה כך שהקואורדינטות מציגות רק את הצד הזה:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
ואם נרצה להציג את החץ הימני, היינו מגדירים את המחלקה ל-div שלנו arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites עבור מצב אור ואפל
שימוש מעניין אחד בזה הוא עם מצבי אור וחשוך. אולי יש לך לוגו או תמונה שיש עליהם טקסט כהה שאינו נראה על רקע כהה. עשיתי את הדוגמה הזו של כפתור שיש לו מרכז לבן למצב בהיר ומרכז כהה למצב כהה.
באמצעות CSS, אני יכול להציג את רקע התמונה המתאים על סמך האם המשתמש משתמש במצב בהיר או במצב כהה:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
חריג: ייתכן שלקוחות דוא"ל לא יתמכו בכך
חלק מלקוחות הדוא"ל, כמו Gmail, אינם תומכים במשתני CSS, המשמשים בדוגמה שסיפקתי כדי לעבור בין מצבי אור לחושך. משמעות הדבר היא שייתכן שתצטרך להשתמש בטכניקות חלופיות כדי לעבור בין גרסאות שונות של תמונת הספרייט עבור ערכות צבעים שונות.
מגבלה נוספת היא שחלק מלקוחות הדוא"ל אינם תומכים במאפייני CSS מסוימים הנמצאים בשימוש נפוץ ב-CSS sprites, כגון background-position
. זה יכול להקשות על מיקום תמונות בודדות בתוך קובץ תמונת הספרייט.