• strict warning: Non-static method view::load() should not be called statically in /home/newbit/domains/drubit.co.il/public_html/sites/all/modules/views/views.module on line 879.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/newbit/domains/drubit.co.il/public_html/sites/all/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/newbit/domains/drubit.co.il/public_html/sites/all/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_handler_filter_boolean_operator::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/newbit/domains/drubit.co.il/public_html/sites/all/modules/views/handlers/views_handler_filter_boolean_operator.inc on line 149.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/newbit/domains/drubit.co.il/public_html/sites/all/modules/views/plugins/views_plugin_row.inc on line 0.
  • strict warning: Declaration of views_plugin_row::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/newbit/domains/drubit.co.il/public_html/sites/all/modules/views/plugins/views_plugin_row.inc on line 0.

עקרונות כתיבת CSS לחווית גלישה זהה

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

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

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

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

 

הבנת מודל התיבה בCSS

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

מודל התיבה בCSS אחראי על החישוב של:

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

 

חוקי בסיס של  מודל התיבה:

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

 

דברים שחשוב לזכור בהתעסקות עם תיבות:

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

 

ההבדל בין "תיבה" ל"תוך שורה" (Block /  Inline)

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

התמונה הבאה ממחישה את ההבדל בין תיבה לתוך שורה:

 

מספר כללים בסיסיים הנוגעים להבדלים בין תיבה לתוך שורה:

  • אלמנט תיבה, כברירת מחדל, מרחיב את עצמו לרוחב של תיבת האב שמעליו, כך שלא יהיה צורך להגדיר בקוד רוחב של 100%.
  • ברירת המחדל של תיבה, היא להופיע בקצה השמאלי של תיבת האב שמעליה (אלא אם כן מוגדרים לתיבהfloat  או  position).
  • אלמנטים בתוך שורה יתעלמו מהגדרות גובה או רוחב.
  • אלמנטים בתוך שורה זורמים עם הטקסט, והגדרות טיפוגרפיות כמו white-space, font-size, letter-spacing חלות עליהם.
  • אלמנטים בתוך שורה מיושרים ע"י הפקודה vertical-align, מה שלא קורה עם תיבה.
  • אלמנטים בתוך שורה מטבעם משאירים קצת מקום ריק תחתיהם, בכדי להכיל אותיות קצת מתחת לקו השורה (כמו האות g למשל).
  • אלמנט בתוך שורה יהפוך לתיבה אם מגדירים לו Float.

 

מה זה Float  או Clear?

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

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


 

דברים שחשוב לזכור כשמשתמשים בפקודות Float או Clear:

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

 

קודם תשתמשו ב Internet Explorer (או שלא..)

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

מסכימים? מתנגדים? הגיבו לפוסט בסופו..

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

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

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

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

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

הבנת הבעיות הנפוצות של Internet Explorer

אם לקחתם את הטיפ חשוב שתבינו עם איזה דברים יש לInternet Explorer בעיה, או מה המגבלות של הדפדפן

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

  • IE6 הופך לבעייתי אם משתמשים הרבה בFloat. גורם לתוכן להיעלם או לטקסט כפול.
  • IE6 יכפיל את השוליים באלמנטים עם כיוון ציפה, בצידו של כיוון הציפה. הגדרה של display: inline, לרוב מתקנת את הבעיה.
  • IE6 לא תומך בהגדרות CSS min-  או  max-, כמו  min-height ,או max-width.
  • IE6 לא תומך ב  fixed positioning או background images.
  • IE6 וגם IE7 לא תומכים בערכים חלופיים של מאפייני תצוגה כמו inline-table, table-cell, table-row.
  • גרסאות מסויימות של IE תומכות בחלקן פקודות CSS כמו attribute selectors, child selectors וכו'..
  • IE6 לא תומך בהגדרת fixed positioning על תמונת רקע.
  • בגרסאות IE 6-8 יש טיפונת תמיכה לcss3, אבל עדיין כרגיל, יש הרבה התעסקות.

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

יש דברים שלעולם לא יהיו זהים

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

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

טפסים לעיתים קרובות נראים אחרת מדפדפן לדפדפן

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

הציצו בתמונה הבאה מציגה את כפתורי הבחירה באתר Facebook, כפי שמוצג ב5 דפדפנים שונים.

 

לסיכום

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

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

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

 

חזור לראש העמוד