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

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

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

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

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

CSS Sprites

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

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

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

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

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

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

מחולל CSS Sprite

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

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

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

CSS vr שדונים

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

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

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

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

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

HTML CSS Sprites

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

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

צעצועים - בתחתית הזהב עבור שדונים

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

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

SVG SPRites CSS

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

CSS Sprites: דוגמה

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

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

פגמים ברורים של שדונים

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

דוגמת CSS sprites

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

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

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

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

שימוש סביר

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

השתמש Sprites CSS

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

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

חדשות קשורות


תגובות (0)

הוסף תגובה