שיווק תוכן

כיצד להשתמש ב-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 של התמונה בתוך הספרייט, נוכל להציג תמונות בודדות כאלמנטים נפרדים בעמוד. הנה דוגמה... יש לנו שני כפתורים בקובץ תמונה בודד:

CSS Sprite דוגמה

אם נרצה להציג את התמונה משמאל, נוכל לספק ל-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 ספרייט בהיר כהה

באמצעות 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. זה יכול להקשות על מיקום תמונות בודדות בתוך קובץ תמונת הספרייט.

Douglas Karr

Douglas Karr הוא CMO של פתח INSIGHTS ומייסד ה Martech Zone. דאגלס סייע לעשרות סטארט-אפים מצליחים של MarTech, סייע בבדיקת נאותות של למעלה מ-5 מיליארד דולר ברכישות והשקעות של Martech, וממשיך לסייע לחברות ביישום ואוטומציה של אסטרטגיות המכירות והשיווק שלהן. דאגלס הוא מומחה ודובר בטרנספורמציה דיגיטלית ומוכר בינלאומי ב-MarTech. דאגלס הוא גם מחבר שפורסם של מדריך Dummy וספר מנהיגות עסקית.

מאמרים נוספים

לחצן חזרה למעלה
סְגוֹר

זוהה חסימת מודעות

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