7 טיפים חשובים לפריסת CSS

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

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

*
{
שוליים: 0;
ריפוד: 0;
גבול: 0;
}

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

טיפ 2: כדי למרכז את הפריסה שלך, השתמש ב-container div כדי להכיל את כל התוכן שלך
הכריזו על כך באופן הבא:

#מְכוֹלָה

{
שוליים: 0 אוטומטי;
רוחב: xxxpx;
}

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

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

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

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

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

הבעיה היחידה עם זה היא שהעיצוב שלך עשוי לעבוד בצורה מושלמת בפיירפוקס, אבל לא ב-IE5, IE6 או IE7. זה מביא אותנו לטיפ הבא.

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

בעמוד הבא, תוכל לראות אילו דפדפנים הם הפופולריים ביותר: http://www.w3schools.com/browsers/browsers_stats.asp. מדף זה ניתן לראות שמשהו כמו IE5 נמצא בשימוש רק על ידי כ-1.1% מהדפדפנים. זה תלוי בך אם אתה חושב שכדאי לבנות את ה-CSS שלך כדי להיות תואם לדפדפן זה, או אם אתה רק הולך לבדוק את התאימות שלך עם IE6, IE7 ו-Firefox, למשל. לא משנה מה תעשה, כשאתה מתחיל לבנות את ה-CSS שלך, התחל מלמעלה, ובדוק כל הגדרה והגדרה בכל אחד מהדפדפנים תוך כדי. אין דבר גרוע יותר מלבנות אתר מושלם בפיירפוקס, ואז לגלות מיד אחרי שקידדתם קובץ css בן 1000 שורות שהוא מקולקל ב-IE6. לאחר מכן לנפות באגים ולתקן את הקוד שלך לאחר מעשה זה סיוט.

טיפ 6: הנה טיפ קטן ומביך לתיקון ה-CSS שלך ב-IE6 או IE7
נניח שהעיצוב שלך עובד בצורה מושלמת בפיירפוקס, אבל מקולקל ב-IE6. אינך יכול להשתמש ב-Firebug כדי לקבוע היכן הבעיה עשויה להיות מכיוון שהוא עובד ב-Firefox. אין לך את המותרות של שימוש ב-Firebug ב-IE6, אז איך מנפים באגים בגיליון סגנונות של IE6 או IE7? לא פעם גיליתי שזה עוזר להוסיף {גבול : 1 פיקסלים אדום מלא} or {גבול : 1 פיקסלים סגול מלא} למרכיבים הבעייתיים. בדרך זו תוכלו לראות לעיתים קרובות מדוע אלמנטים מסוימים אינם מתאימים לחלל הפנוי. זה טיפ קטן ומביך מכיוון שהוא כל כך פרימיטיבי ופשוט, אבל זה עובד!

טיפ 7: הבן מצופים
ציפה של אלמנטים היא חיונית להבנה, במיוחד בהקשר של קבלת האלמנטים הצפים שלך לעבוד בדפדפנים השונים!

בעיקרון אלמנטים כמו divs מרחפים שמאלה או ימינה (לעולם לא למעלה או למטה, רק הצידה). הנה כמה דברים שכדאי לקחת בחשבון עם אלמנטים צפים. כל רכיב צף חייב להיות בעל רוחב מפורש. אם אתה עושה שימוש ב-Divs צפה כדי ליצור פריסה של 3 עמודות או 2 עמודות, ציין את הרוחבים במונחים של אחוזים ולא ברוחב קבוע, ואם אתה כן משתמש באחוזים, ודא שהאחוזים לא מסתכמים ב-100 %, לעתים קרובות זה יגרום לעמודה הימנית ביותר לרדת מתחת לשאר, מה שמציין בבירור שאתה מנסה להתאים משהו לשטח הפנוי שהוא רחב מדי עבורו. עדיף להשתמש באחוזים שמסתכמים מעט מתחת ל-100%, כגון 25%, 49%, 24% עבור עמודה שמאל, עמודה אמצעית ועמודה ימנית.

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

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