המושג ספריטים קיים כבר זמן מה. זוהי אחת הטכניקות הנפוצות ביותר בתעשיית המשחקים כדי להאיץ את תהליך הצגת הנפשות על גבי המסך. במאמר זה נבחן במיוחד כיצד טכניקה זו יכולה לעזור לנו לשפר את חוויית המשתמש בדפי אינטרנט בעזרת CSS Sprites בסדר הבא:
- מה זה ספרייט?
- מהו CSS Sprite - סקירה מהירה?
- דוגמה כיצד זה עוזר בפיתוח אתרים?
- יתרונות השימוש בספרייטים של CSS
- מה מפתח צריך לעשות בעבודה עם CSS Sprites?
- כיצד ליצור CSS Sprite Sheet?
- איך לעבוד עם CSS Sprites?
- חברות המשתמשות ב- CSS Sprites
מה זה ספרייט?
ספרייט הוא תמונה יחידה שהיא חלק מסצנה גדולה יותר במשחק. ספריטים מרובים משולבים אז לתמונה גדולה הנקראת גיליון ספרייט. ברגע שגליון ספרייט נטען בזיכרון, ספריטים שונים מועברים ברצף מהיר כדי לתת אשליה של אנימציה. זה נעשה בו זמנית עבור עשרות עד מאות ספריטים שונים כדי ליצור סצנה במשחק.
הרעיון הבסיסי הוא שזה הרבה יותר מהיר לטעון תמונה ולהציג חלק ממנה בכל מקום שנדרש בהשוואה לטעינת מספר תמונות ולהציג אותן.
מה זה CSS Sprite: סקירה מהירה?
ספרייט ספייס הוא טכניקה שמשמשת לעתים קרובות מפתחי אתרים כדי לייעל את הביצועים של דפי האינטרנט. בטכניקה זו, תמונות קטנות מרובות של אותם ממדים משולבות לתמונה אחת גדולה הנקראת a יריעת ספרייט אוֹ סט אריחים . גיליון ספרייט זה משמש לאחר מכן להצגת אלמנטים בודדים בכל מקום בו אנו זקוקים להם.
בדרך כלל, אלמנטים כמו סמלי לוגו, חיצים לניווט, כפתורים נכללים בגיליון ה- sprite מכיוון שהם כמעט באותו המידה ומשמשים לעתים קרובות בדף אינטרנט.
דוגמה כיצד זה עוזר בפיתוח אתרים?
בדרך כלל, בעת תכנון דפי אינטרנט תמונות נשמרות ומשמשות כקבצים בודדים. לכן, כאשר משתמש פותח דף אינטרנט, הדפדפן צריך להגיש בקשת HTTP עבור כל אחד מהקבצים הללו, להוריד אותם בנפרד ולהציג אותם. זה מוביל לזמני טעינת עמודים גבוהים יותר שכן דף אינטרנט מסוים יכול להכיל מספר גדול של תמונות קטנות יותר כמו כפתורים, סמלים, סמלי לוגו.
ספריטים של CSS עוזרים למפתחים לשלב תמונות קטנות בשימוש תכוף לתמונה אחת גדולה. לאחר מכן הדפדפן צריך להוריד רק קובץ אחד שאליו הוא רגיללהציג את החלק הנדרש על ידי קיזוז התמונה.
יתרונות השימוש בספרייטים של CSS
ישנם שני יתרונות עיקריים בשימוש בספרייטים של CSS על פני תמונות רגילות:
טעינת דפים מהירה יותר: משפר את זמן טעינת הדף כאשר תמונות המשמשות בדף האינטרנט מופיעות מיד עם הורדת הגיליון.
תפוקה גדולה יותר ושימוש נמוך יותר במשאבים: לא רק טכניקה זו משפרת את חוויית משתמשי הקצה בכך שהיא גורמת לדף לטעון מהר יותר,אך זה גם מפחית את עומסי הרשת ככל שמספר נמוך יותר של בקשות HTTP מתבצעות.
מה מפתח צריך לעשות בעבודה עם CSS Sprites?
בעבודה עם תמונות בודדות, המפתח יכול פשוט לעבוד עם תג HTML ולעצב אותו ב- CSS אם נדרש. אך כאשר עובדים עם CSS Sprites, מפתח צריך לעשות שני דברים ספציפיים:
- יצירת גליון ספרייט
בעת פיתוח דף אינטרנט אם היזם מחליט להשתמש ב- sprites CSS, עליו ליצור תחילה את גיליון ה- sprite על ידי מיזוג כל האלמנטים הרצויים כמו כפתורים, סמלי לוגו וכו 'בתבנית דמוית רשת. ניתן לעשות זאת באמצעות כל תוכנית לעריכת תמונות כמו Photoshop או Gimp. ישנם גם כלים מקוונים רבים העוזרים לך להכין את גיליון הספרייט. כלים אלה נדונים בהמשך מאמר זה.
- גש לאלמנט מסוים של הספרייט באמצעות ה- עמדת רקע CSS תכונה
לאחר גיליון הספרייט מוכן, היזם צריך להשתמש בתכונות CSS כדי לגשת לחלקים שונים של הגיליון.
- רוֹחַב: רוחב הספרייט
- גוֹבַה: גובה הספרייט
- רקע כללי: התייחסות לסדין הספרייט
- עמדת רקע: קזז ערכים (בפיקסלים) כדי לגשת רק לחלק הנדרש בגיליון הספרייט
כיצד ליצור CSS Sprite Sheet?
אתה יכול להשתמש בכל תוכנת עריכת תמונות כדי לסדר את התמונות הקטנות שלך לרשת, אך שתי שיטות קלות יותר ניתנות להלן:
1. כלי ליצירת גליונות ספרייט מקוונים
קישור: toptal.com/developers/css/sprite-generator/
כלי זה אינו רק חופשי לשימוש, אלא גם מספק לך את קוד ה- CSS הנדרש שניתן להשתמש בו תוך התייחסות לגיליון הספרייט. כמו כן, תוכלו להתעסק בתכונות שונות כמו ריפוד בין האלמנטים ושינוי היישור שלהם.
2. יצירת גליון ספרייט עם ספריטי
אם אתה משתמש ב- Grunt, Node או Gulp, אתה יכול להתקין חבילה בשם Sprity שתעזור לך ליצור דף ספרייט במגוון פורמטים כמו PNG, JPG וכו '.
ראשית, יהיה עליך להתקין את Sprity באמצעות:
npm להתקין sprity -g
לאחר מכן, כדי ליצור גיליון ספרייט, השתמש בפקודה הבאה:
sprity ./output-directory/ ./input-directory/*.png
איך לעבוד עם CSS Sprites?
בדוגמה זו נשתמש בגיליון הספרייט הבא:
כפי שניתן לראות בתמונה לעיל שישה סמלים (אינסטגרם, טוויטר ופייסבוק) הוסדרו בתבנית דמוית רשת. בשורה הראשונה יש לנו מצב רגיל ובשורה השנייה יש לנו את מצב הרחף שלהם (התמונה שמופיעה ברגע שאנחנו מעלים את סמן העכבר עליהם).
אם הכנת את גיליון הספרייט באמצעות הכלים עליהם דנו לעיל, אז אתה כבר יודע את הקיזוזים הנדרשים ב- CSS, אך אם השתמשת בכלי אחר או שפשוט קיבלת גיליון ספרייט כלשהו אז אל תדאג, נדון בשיטה ש יעזור לך לקזז עבור האלמנט הנדרש.
מאפשר כעת לראות דרך פשוטה מאוד לקבל קיזוזים נדרשים עבור כל אחד מששת הסמלים באמצעות MS Paint. זה לא יכול להיות פיתרון אידיאלי לעבודה עם ספריטים, אך מכיוון שיש לו את התכונה המספקת את הקואורדינטות של סמן העכבר, ניתן להשתמש בה כדי לקבל את קואורדינטות ה- X וה- Y הנדרשות.
ראשית, פתח את תמונת גיליון הספרייט שלך (רשת המכילה את כל התמונות הקטנות יותר) והביא את סמן העכבר בפינה השמאלית העליונה של הספרייט שברצונך לתפוס.
ברגע שיש לך את הקואורדינטות של הנקודה השמאלית העליונה של ספרייט שלך (תמונת אינסטגרם משמאל למעלה), אתה יכול להציג את ספרייט ספציפי זה בכל מקום שנדרש באמצעות קוד CSS:
רקע: url ('img_sprites.png')
עמדת רקע: 0 0
רוחב: 125 פיקסלים
גובה: 125 פיקסלים
אנו משתמשים ברוחב ובגובה כ- 125 פיקסלים מכיוון שהסמלים שלנו הם בממד זה. כדי להביא את התמונה הבאה (טוויטר) באותה שורה, אנו משתמשים בקוד הבא:
רקע: url ('img_sprites.png')
מיקום רקע: -128px 0px
רוחב: 125 פיקסלים
גובה: 125 פיקסלים
שימו לב למאפיין מיקום הרקע בקטע הקוד שלמעלה. (-128px, 0) פירושו שאנו מקזזים את גיליון ה- sprite שלנו משמאל בכ- 128 פיקסלים (תוך התחשבות בריפוד בין אלמנטים) וב- 0 פיקסלים בציר ה- Y. אם היינו ניגשים לסמל הרחף של הטוויטר, התכונה שלנו למיקום הרקע תהיה:
מיקום רקע: -128px -128px
באופן זה, כעת אנו יכולים לגשת לכל רכיב בגיליון ה- sprite שלנו באמצעות CSS. בואו נעבור קוד HTML ו- CSS מלא כיצד לעשות זאת.
שלב 1: כתיבת קוד ה- HTML הנדרש
בקוד שלהלן, אנו פשוט מוסיפים שלושה קישורים. כמו כן, נקשר את ה- HTML שלנו עם גיליון הסגנונות (screen.css).
שלב 2: כתיבת ה- CSS הדרוש. ראשית, נעצב את מחלקת האייקונים המשותפת שלנו. כאן תוכלו לראות שאנחנו מתייחסים לגיליון הספרייט שיצרנו.
/ * סמל משותף Class * /
span.icon קישור,
span.icon a: ביקר{
לְהַצִיג:לַחסוֹם
כניסה לטקסט:-9999 פיקסלים
תמונת רקע: url (./ img_sprites.png)
חזור על רקע:לא לחזור
}
שלב 3: קבלת הסמלים האישיים מגיליון הספרייט באמצעות הקיזוזים.
/ * אייקון אינסטגרם * /
span.instagram קישור,
span.instagram a: ביקר{
רוֹחַב:125 פיקסלים
גוֹבַה:125 פיקסלים
עמדת רקע:0 0
}
/ * אייקון טוויטר * /
span.twitter קישור,
span.twitter a: ביקר{
רוֹחַב:125 פיקסלים
גוֹבַה:125 פיקסלים
עמדת רקע:-128 פיקסלים 0
}
/ * אייקון פייסבוק * /
span.facebook קישור,
span.facebook a: ביקר{
רוֹחַב:125 פיקסלים
גוֹבַה:125 פיקסלים
עמדת רקע:-257px 0
}
מהן חבילות בג'אווה
שלב 4: השגת סמלי הרחף מגיליון הספרייט באמצעות הקיזוזים.
span.instagram a: רחף{עמדת רקע:0 -128 פיקסלים}
span.twitter a: רחף{עמדת רקע:-128 פיקסלים -128 פיקסלים}
span.facebook a: רחף{עמדת רקע:-255 פיקסלים -128 פיקסלים}
חברות המשתמשות ב- CSS Sprites
שמות גדולים רבים בתעשייה משתמשים ב- CSS Sprites כדי לשפר את היענות האתרים שלהם. חברות כמו גוגל, פייסבוק, אמזון משתמשות בשיטה זו בהרחבה מכיוון שהדבר מסייע להן להפחית את מספר בקשות ה- HTTP בכל הפעלה עבור משתמש מסוים. זהו יתרון עצום כאשר אנו לוקחים בחשבון שחברות אלו משרתות מיליוני לקוחות בכל רגע נתון.
עכשיו שיש לך אחיזה במה הם ספריטים של CSS וכיצד לעבוד איתם, אתה צעד אחד קרוב יותר למסע שלך ללמוד CSS. מושגים כמו ספריטים הם מחליפי משחק בימינו מכיוון שהפך לחשוב ביותר עבור מפתחים לחלץ כל פיסת ביצועים מדף אינטרנט.
בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.
יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'תמונות HTML' ונחזור אליך.