CSS-שדונים: תיאור של טכניקות בסיסיות וטיפים שימושיים

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

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

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

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

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

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

החיסרון

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

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

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

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

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

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

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

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

יתרון נושא באמצעות שדונים

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

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

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

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

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

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

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

-שילובי CSS: דוגמה

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

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

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

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

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

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

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

שימוש נבון

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

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

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