7 באוק׳ 2012

עבודה עם Image Sprites (תמונות מאוחדות) ב CSS

יותר ויותר נפוצה באינטרנט גישת ה sprites לשימוש בתמונות ואייקונים, הגישה שאומרת לאחד תמונות לתמונה אחת. היתרונות ברורים, עבודה עם קבצי sprites מקטינה את כמות הבקשות לשרת(http requests), ובמידה מסוימת גם את סה"כ גודל הנתונים, מה שגורם לאתר להיטען מהר יותר, ולהוריד עומסים בשרת. מאידך עבודה עם sprites, מייצרת עוד עבודה בהכנתו, עוד כתיבת קוד CSS מורכב, וברב המקרים גם שימוש בתגיות HTML נוספות, אשר ייצגו לנו את התמונות מה sprites.

יאללה אז בואו נתחיל!




איך עובדים עם sprites?
1. איחוד תמונות - קודם כל חייבים עורך תמונות מן הסתם. אך יש כלים אינטרנטיים חינמיים שאתם יכולים לצרף אליהם תמונות והם יכינו לכם קובץ מאוחד של התמונות, ואפילו את ה CSS (אני אישית עובד בפוטושופ). 
אז תחילה אנחנו יוצרים גרידים, וריכוז כל התמונות לקובץ אחד.
דוגמא - לצורך הדוגמאות אני יצרתי, שני צורות ספרייט פופלריות, כרגע אני מדגים רק על הימנית.
לינקים לתמונות sprite שבדוגמא: קוביית sprite , טור sprite


2. קבלת ערכי הקואורדינטות, וערכי הגודל של התמונות - על מנת להשתמש ב sprite, אנחנו נזדקק לקואורדינטות וממדי כל אייקון/תמונה שנמצאת בsprite.
נקודת המוצא של הקואורדינטות בתמונות רקע ב CSS, הם פינה עליונה ושמאלית, הערך שם הוא 0 0 (הערך הראשון ב CSS הוא מיקום הורזנטלי והשני לורטיקלי). 

עכשיו כמו שאמרתי אנחנו נשתמש בספרייט המרובע(הימני) לצורך הדוגמא, ואני רוצה לחלץ ממנו את התמונות.
בו נגיד שאני רוצה לחלץ את התמוה עם טקסט הpseudo ממנו. התמונה נמצאת בחלק הורטיקאלי האמצעי בצד ימין, גודל כל תמונה הוא 30X30 פיקסלים (אני יודע כי אני הכנתי את התמונה), עכשיו בציר ההורזנטלי אני צריך להגיע 60 פיקסלים ימינה, כלומר ללכת אחורה 60 פיקסלים, וזה אומר שהוא נמצא במיקום מינוס 60 פיקסלים בציר ההורזונטלי , למה מינוס תחשבו על זה כציר, שזזים מהמרכז שלו לחלקים השלילים שלו. ובציר הורטירלי אני צריך לרדת שורה אחת של אייקונים ולכן הערך הורטיקלי שלו הוא מינוס 30 פיקסלים.

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

ערכים על מנת לקבל את תמונת הpseudo

אז הערכים שאני צריך כדי להשתמש בתמונת pseudo שנמצאת בתוך הsprite שלנו:
מיקום הורזונטלי : מינוס 60 פיקסלים.
מיקום ורטיקלי: מינוס 30 פיקסלים.
רוחב תמונה: 30 פיקסלים.
גובה תמונה: 30 פיקסלים.
ומן הסתם שם קובץ התמונה, שלו נקרא ב CSS.

3. כתיבת ה HTML והCSS של הsprites - הצורה הפופולרית של עבודה עם אייקונים/תמונות בsprite בדף ה HTML, היא ע"י הוספת תגית HTML אשר תייצג לי את האייקון/תמונה ספציפית מתוך ה sprite. 
עכשיו, אני אישית מעדיף לתת לתגית הHTML שלנו שני classים, אחד שמייצג את תמונת ה sprite, אשר משותפת לכל האייקונים. וה class השני ייצג לי באיזו תמונה מדובר, כלומר הקואורדינטות, ובנוסף ערכי הגודל ורוחב שלה.
בדוגמא הספציפית, כל האייקונים הם באותו גודל, לכן נתתי את הגדלים של האייקונים/תמונות לclass הראשי. במידה וכל גודל של תמונה שונה, יש לתת את הגודל של האייקון לclass הספציפי, וע"י כך למנוע שכפול של CSS.

בואו נשתמש בערכים שלנו מהסעיף הקודם לכתיבת הHTML והCSS.
ב HTML ניצור תגית עם שני classים, הראשון יהיה הclass הגנרי שלנו שיכיל את מקור התמונה, ובמקרה שלנו גם את הגדלים שלה, והclass השני יהיה ספציפי, וייתן לנו את ההגדות של מיקום הקואורדינטות בתמונה, על מנת לקבל את התמונה של pseudo.
syntax 
HTML
<span class="icon pseudo"></span>
CSS
.icon
     background: url(sptite.png) no-repeat;
     width:30px;
     height:30px;
     display:inline-block;
}
.icon.pseudo{background-position:-60px -30px;}

/*others icon from sprites*/
.icon.html5{background-position: 0 0; }
.icon.less{background-position: -60px 0;}
.icon.modernizr{background-position: 0 -60px;}

מה שעשינו זה יצרנו class ב css, שהוא class אב, שמוריש לילדים שלו את מקור התמונה (שהיא בעצם תמונה של כולם), והילדים מקבלים רק את מיקום הקואורדינטות בתוך ה sprite.

חשוב לציין:
  • ההוספה שלה property מסוג display בדוגמא שציינתי, היא הכרח מחייב במידה ומשתמשים באלמנטים כמו    span / a / label. במידה ולא תתנו ערך של block או inline-block, התמונה לא תוכל לקבל ממדים ולכן לא תופיע לכם.
  • השימוש בתגית span בדוגמאות, היא בגלל היכולת להכיל לתגית זו property מסוג display עם הערך inline-block באקספלורר 7(כל שאר הדפדפנים תומכים בזה בכל התגיות). ערך זה מאפשר לשרשר תמונות באותה שורה עם טקסטים. 

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

זוהי שיטת ה sprites המקובלת והפופולרית. ישנה שיטת נוספת והיא "שיטת המגילה".

"שיטת המגילה"
"שיטת המגילה" - שיטה זו פחות פופולרית, אך היא יכולה להיות שימושית במקרים מסוימים. בשיטה זו התמונות בsprite הם בטור ורטיקלי ארוך. השיטה הזאת מאפשרת למנוע יצירת אלמנט נוסף מיוחד לתמונות, שזה יתרון. צריך להגדיר שתמונת הרקע תהיה ללא repeat, ובנוסף לכל שורת טקסט צריך לתת את המיקום הוריטקאלי של התמונה בלבד(המיקום ההורזנטלי ישאר תמיד על 0,שזה גם יתרון). בגלל שאני משתמש בממדים של שורת הטקסט, אז לא נצטרך לתת ממדים לתמונה, כי היא תקבל אותו משורת הטקסט, שזה עוד יתרון נוסף.

אז הנה אותה דוגמא ממקודם רק בשיטה המגילה: דוגמא ל"שיטת המגילה" ב sprites.

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

שאלות נפוצות
1. שאלה: מה עושים עם תמונות גדולות כגון רקעים?
    תשובה: sprites לא נועדו לשימוש הזה ובמידה ויש תמונות גדולות כמו לוגו, הם יהיו תמונות נפרדות. מעבר לכך רקעים של אתרים ועיצובים נעשים יותר ויותר ללא שימוש בתמונות, אלה ע"י שימוש בcss3, כגון gradients, border-radius,shadows, רב דברים אלו לא נתמכים בדפדפנים ישנים כמו אקספלרר 8 ומתחת, אך הדפדפנים האלה מאבדים פופולריות. ובנוסף בגלל שהאפקטים והעיצובים האלו, לא פוגעים ברמה הפונקציונלית של האתר, יותר ויותר אתרים משתמשים בהם גם ללא תמיכה לאחור. 

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

3. שאלה: האם sprites נתמכים בכל הדפדפנים?
    תשובה: בהחלט, אני אישית הכרתי sprites, עוד בתקופה של אינטרנט אקספלורר 6.

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


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

תודה,
אלעד שכטר