CSS sprites: תיאור, טכניקות בסיסיות והמלצות שימושיות

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

תכונות שימושיות של שדונים

CSS sprites מאפשרים לך לשפר את האיכותהמאפיינים של האתר, ואת התמונה של החברה. למעשה, זה לא כלי מפתח מורכב מאוד, אבל זה באמת מאיץ את תהליך פיתוח המשאבים, ואת המהירות של העבודה שלהם.

CSS Sprites

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

בתהליך הרגיל של פיתוח האתר, אתה צריךלעשות תמונות רבות. לעתים קרובות מאוד התמונות האלה תופסים מקום קטן מאוד, אבל הם תמיד קובץ נפרד. עבור כל מערכת הפעלה של כל שרת, פתיחת הקובץ היא פעולה שלוקח הרבה זמן, אבל זה לא יהיה שונה באופן משמעותי בזמן פתיחת הקובץ על ידי 13 על 13 פיקסלים, וכאשר קובץ של 16 תמונות 52 על 52 פיקסלים נפתח. במקרה הראשון, יש לך 16 קבצים ו 16 פעולות קריאה / קריאה, במקרה השני, 16 תמונות יתקבלו על ידי פתיחת קובץ אחד בלבד.

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

הצד האחורי של המטבע

כאשר יש מעריצים אשר מהר מדי להמליץ ​​על שימוש sprites CSS, כדי להיות בטוח למצוא את אלה אשר בזהירות ללמוד את השאלה בתבונה מראה כי זה תמיד מעשי יותר לעבוד בדרך המיושנת.

ואכן, אם במקום 16 קבצי תמונהיהיה קובץ אחד של 16 תמונות, ואז במקום 16 פעולות פתיחה / קריאה יהיה אחד. אבל הטריק הוא שכל דפדפן יש מטמון, וזה טוען משהו רק כמוצא אחרון. בנוסף, בדרך כלל אלמנטים הדף נטענים בפעם הראשונה שאתה מבקר את הדף, ולאחר מכן רק אלה השתנו יורדו.

גנרטור CSS ספרייט

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

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

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

CSS Sprites v34

אוטומציה ו- CSS sprites

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

יש לציין, עם זאת, כי ספרייט משניים או שלושה אלמנטים או תריסר או שניים בכל מקום שבו הוא הלך, אבל כאשר יש מאה רישומים בספרד, אז כמובן לא יהיו בעיות עם כתיבת הפונקציה JavaScript, אבל כמה מאמץ זה ייקח ליצור ספרייט גדול כזה ... בנוסף, תמונות דבק הוא דבר אחד, גנרטור ספרייט CSS עושה גם את התמונה הרצויה ואת קוד ה- CSS על זה, זה לא משנה לו כמה אלמנטים של ספרייט יהיה. בעיות להתעורר בעת לעצב מחדש את האתר, לשנות עיצוב, למחוק ולהוסיף פריטים חדשים. בעת פיתוח ספרייט, אתה לא צריך לחשוב על איך להשתמש בו, אבל איך לשנות את זה מאוחר יותר.

יתרונות תמאטיים של שימוש בשדונים

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

HTML CSS Sprites

לדוגמה, הגרסה הסתיימה של התפריט: רק על ידי חיבור כמה css- כללים, js פונקציות כולל כמה HTML-divs בקוד, אתה יכול לקבל את התוצאה. על ידי שינוי התוכן של ספרייט התמונה, אתה יכול לשנות את המראה של תפריט זה. על ידי ציון גוף הפונקציה, ניתן לכוון את הפונקציונליות.

קבל גרסה מקוריתתכנות מונחה עצמים (OOP). אין ספק, זה יהיה רעיון מבריק, אבל זה לא יהיה מובחן מדי לעומת דיאלקטים אחרים של OOP בשפות אמיתיות. זה היה רק ​​בתחילת שנות ה -90, כאשר OOP להחיות והחל להשיג מקום מהיר במיוחד בשמש, הוא ייצג רעיון קונקרטי צורה מסוימת של הביטוי שלה, והיום מפתחים יש לבוא עם כמה ניבים כמו אין שפה רוסית מגוונת.

צעצועים - מכרה זהב לשדונים

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

עיצוב משחק מושך גרפיקה וקטורית, כיהשילוב של ספרייט SVG + CSS כללי הוא לא רק בביקוש, אבל לעתים קרובות פונה מן האובייקט מפתח (האתר) לתוך אובייקט של משחק אמיתי. בפרט, המשחק הפופולרי Counter Strike חל על מונחים של שדונים, תרסיסים הם מילים נרדפות למדי: פיצוץ, דם, מראה ...

SVG SPRites CSS

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

CSS sprites: דוגמה

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

דוגמה לשימוש בספרייט לבחירת שפת הדף

חסרונות ברורים של שדונים

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

דוגמה CSS ספרייט

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

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

עם זאת קשה להסכים על בסיס פשוט כי הרקע לא נתפס כרקע כללי. זה רק רקע, לא משנה מה - אלמנט מיניאטורי או את כל הדף כולו.

בינתיים, זהו רכיב גרפי כי הוא מכשול רציני בשימוש שדונים.

שימוש סביר

למרות שהמונחים "טכנולוגיית אינטרנט"ו "טכנולוגיה גבוהה" נחשב בדרך כלל נרדף, למעשה היא עתירת עבודה ובמקומות מסוימים מאוד עבודה לא טכנולוגית. שדונים אינם מתבלטים במיוחד נגד צווארי בקבוק אחרים, כגון תכנות טהור ב- JavaScript או PHP, או במונחים של פיתוח הפונקציונליות הנדרשת, הגדרת תהליכים עבור אתרי מילוי עם מידע, או, למשל, יצירת עותקי רקע של ארכיונים.

השתמש שדונים CSS

הכוח והסיכויים של המערכות בשימושניהול האתר הוא לפעמים על ידי ניואנסים של היישום המעשי שלהם, ופיתוח ידני של משאבים, ככלל, מוביל את הצורך לשכתב אחד או יותר של האלגוריתמים שלה בפעם 1001.

בהקשר של מה שנאמר, זה פשוט פשוטגבולות להשתמש בכל מה כלי מודרני מספק. לא להיות קנאי מדי להשתמש אחד על חשבון אחר, ואת כלל הזהב בבניית האתר הוא: אחד צריך לחשוב על איך למסור את העבודה בהקדם האפשרי, אבל על איך ליישם את זה, כך שבמקרה של כל מצב בלתי צפוי זה יכול להיפתר במהירות כל בעיה.</ span </ p>