כידוע, לאחרונה רווחת אופנת ה-sprite-ים. מקבצים את כל תמונות הקרע לתמונה אחת גדולה, ובכל פעם שמשתמשים בה- מראים רק את החלק הרלוונטי. הסיבה לעשות את זה היא כדי לא לפנות לשרת כל פעם שצריך תמונה, כי כל פניה כזו גורמת לעיכוב בעליית האתר.
מאד הצטערתי שאין טכניקת sprite כזו גם עבור img-ים. כי בעוד של -background יש מאפיין של background-position, ל-img אין מאפיין כזה. ובאתר ננו צ’נלס, יש חלק בצד שמראה את כל הלוגואים של השותפים לאתר, וזה מכיל 9 תמונות לוגואים.
ממש העציב אותי שאת כל הגישות שאני חוסכת ב-sprite, אני אצטרך לבזבז עכשיו על Img-ים.
אבל, אני עובדת ב-NetBeans, ושם יש intelisense גם ל-CSS. וכל פעם שאני משתמשת במאפיין color או clear, אז אחרי שאני מקלידה את ה-c, נפתחת לי רשימת כל המאפיינים התחילים באות זו. ושמתי לב שיש שם מאפיינים שאני לא כל כך זוכרת מה הם עושים. כזה היה המאפיין clip. החלטתי להזכר מה טיבו – והתברר שהוא בדיוק המענה לבעיה הזו.
clip מאפשר לציין את הקואורדינטות של החלק של התמונה שאנחנו רוצים להציג ב-img.
div { clip: rect(5px, 40px, 45px, 5px) }
הערך הראשון הוא הערך שעל ציר ה-Y בפינה השמאלית העליונה של החלק אותו אנחנו רוצים להציג (אפשר להשיג את הערכים האלה בפוטושופ)
הערך השני הוא הרוחב של החלק שאחנו רוצים להציג
הערך השלישי הוא הפינה הימנית התחתונה
הערך הרביעי הוא הערך של ה-X בפינה השמאלית התחתונה
אם נותנים ל-img מאפיינים של גובה ורוחב, אז צריך לתת את הגובה והרוחב של כל התמונה, ולא של החלק שאותו אנחנו רוצים להציג. את החלק שאנחנו מציגים נותנים בערכים של ה-clip. החסרון היחיד הוא שצריך להציב את התמונה ב-absolute. זה חסרון כי אז כל תמונה עומדת בפני עצמה, וןאם אני צריכה רייוח קבוע לפני תמונה, אני צריכה לתת את זה לכל תמונה ותמונה, במקום לתת לאתר וכולן תתישרנה לפי זה. אבל זה הדבר היחיד שמפריע (וגם זה שצריך לחשב את כל הקואורדינטות, אם כי ברגע שמתחילים, זה די מסתמך אחד על השני).
והיתרון הגדול הוא שזה עובד באקספלורר!! בכל גרסאותיו (לפחות מ-7-9…)! אבל כמובן שלא בפשטות כזו. בהתחלה, אחרי שסידרתי את כל ה-img-ים יפה יפה והם נראו נפלא בפייפרוקס, פתחתי את אקספלורר, וחשכו עיניי:
נכון מהמם? אבל מכיוון שלא חשבתי שהכיוון העיצובי הזה יתקבל בברכה, התחלתי לחפש בגוגל, וחיש קל מצאתי פתרון. התברר כי אף על פי שבאפיון של clip כתוב שצריכים להיות פסיקים בין הערכים השונים שבתוך הסוגריים, אקספלורר מתעלם מזה, ומבין רק אם אין פסיקים בין הערכים. ואכן, ברגע שהורדתי את הפסיקים – הכל נראה נפלא באקספלורר. הדבר הטוב הוא שגם הדפדפנים האחרים מבינים את הערכים גם אם אין פסיקים, כך שלא הייתי צריכה לכוון CSS מיוחד לדפדפן מסוים. אמנם ה-CSS הזה הוא לא ולידי, אבל הוא עובד 🙂
אז זכיתי לממש את הרצון שלי, ולשים (כמעט) את כל התמונות של האתר בתמונה אחת.
תודה, טוב לדעת
זאת אומרת חוץ מלנסות את clip
כי חשבתי שזה יותר סמנטי ככה
היה נראה לי שיותר נכון לשים את הלוגואים כתמונות, כי הן מה שחשוב. הקישורים הם רק תופעת לואי, לא העיקר
הממ.. כן, את צודקת 🙂