יום שלישי, 26 בפברואר 2008

איך אנחנו נראים בדפדפנים ה”אחרים”

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

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

האפשרות הראשונה היא, כמובן, להתקין את הדפדפן ולצפות דרכו באתר.
בווינדוס, אפשר להתקין כמובן את אקספלורר 7 - הדפדפן החינמי של מיקרוסופט. עם כל הכבוד לאקספלורר 7, הדפדפן הנפוץ בעולם לפי onestat הוא דווקא אקספלורר 6 (54%). דרך האתר של טרדסופט אפשר להוריד קובץ התקנה אחד (לווינדוס XP) לגרסאות 3, 4, 5, 5.5 ו-6 של הדפדפן המיקרוסופטי. בלינק יש גם ציטוט מה-EULA (הסכם משתמש קצה) של מיקרוסופט, וחשוב לקרוא קודם כדי לוודא שאכן מותר להתקין את הדפדפנים הישנים. את גרסאות 5, 5.5 ו-6 אפשר להתקין גם בלינוקס, עם IEs4Linux. בגרסת הבטא יש גם תמיכה מסוימת באקספלורר 7. IEs4Linux היא חופשית, אבל כמובן שהדפדפנים עצמם שמותקנים אינם כאלה. בהסבר המשפטי מבהירים שכדי שזה יהיה חוקי, צריך שיהיה ברשותך רשיון חוקי של ווינדוס (אבל לא חייבים להתקין את ווינדוס בפועל).

הדפדפן השני הוא פיירפוקס, דפדפן חופשי (28% בבלוג שלי, 14% ב-onestat) , אותו אפשר להתקין בווינדוס ובלינוקס (דרך המאגרים באובונטו, או מהאתר). אפשר גם להתקין את פיירפוקס 3 (בטא).
הדפדפן אופרה הוא דפדפן חינמי (0.8% בבלוג שלי, 0.5% ב-onestat) . הוא זמין להורדה בווינדוס ובלינוקס (באובונטו - גם דרך המאגרים). דפדפן מאוד חביב, בדרך-כלל הפיצ'רים החדשים מופיעים קודם כל באופרה, אחר-כך כתוסף לפיירפוקס, אחר-כך בפיירפוקס הרשמי, ואחר-כך באקספלורר.

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

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

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

כך לדוגמה נראה הטאמבלר שלי, בו אני מלקט קישורים לתמונות שאני צילמתי והוצגו באתרים אחרים (שלא על ידי).
המסך צולם ב: Kazehakase 0.4.3 / Ubuntu 7.10 Gutsy Gibbon
טאמבלר
מסתבר שהכותרת (שהיא השם שלי בעברית ובאנגלית בשורה אחת) נראית אחרת בדפדפן כזהכזה: מופיע חצי שם בעברית, אחריו השם באנגלית, ובשורה מתחת החצי השני של השם בעברית. גם המילים " ויקיפדיה | Wikipedia" שמוצגות בדפדפנים המותקנים אצלי בשורה אחת, בכזהכזה פוצלו לשתי שורות; ועוד כמה שינויים קטנים.

שווה לנסות ולראות איך אנחנו נראים בדפדפנים ה"אחרים"

3 תגובות:

lwzgbkey אמר/ה...

, [url=http://iknipbhujcyu.com/]iknipbhujcyu[/url], [link=http://cvpthfzgklrd.com/]cvpthfzgklrd[/link], http://xiigaoaiqjqq.com/

עמית אמר/ה...

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

אבל האם אתה יכול לשים קשור למאמרים בנושא?

תודה, עמית

סרג' אמר/ה...

כדאי לקרוא את המאמר הזה:
http://www.456bereastreet.com/archive/200602/writing_crossbrowser_css

ולבדוק את הלינקים כאן:
http://www.sohtanaka.com/web-design/css-fixes-tools-hacks-cross-browser-solutions

עוד אתר מצוין כמקור לימוד ו reference:
http://htmldog.com/guides/htmladvanced/recap

ולסיום כלל אצבע - לכתוב HTML נקי, פשוט וסמנטי וכמה שפחות CSS.

הוסף רשומת תגובה