כתיבת אתרים לפי התקן

הקדמה

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

סקירת טכנולוגיות

ג'אווהסקריפט

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

עץ הDOM

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

עץ גרסא 0

יחד עם הגרסא הראשונה של ג'אווהסקריפט הציגו המתכנתים של נטסקייפ את האובייקטים הבאים document.forms המטפל בטפסים <form>...</form>, אפשר לגשת לטופס לפי סדר הופעתו documnet.forms[7] או לפי שמו המוגדר בפרמטר name=, באופן דומה בתוך טופס ישנו המערך elements. צורת פניה זו היא עמידה מאד, ותפעל ברוב אם לא בכל הדפדפנים התומכים בג'אווהסקריפט. ישנו עוד מערך document.images אבל הוא נתמך רק ע"י | גרסא 3 ומעלה של נטסקייפ . שאר האיברים בעץ לא כ"כ משמעותיים.

עץ בגרסאות לא סטנדרטיות

עץ זה מאפשר מה שנקרא DHTML, כלומר ניתן לגשת לאובייקטים בדף, ולשנות דינאמית את מיקומם. העץ הוצג לראשונה בגרסאות 4 של נטסקייפ ואקספלורר. העץ הזה שונה בכל אחת מהגרסאות (כאן מיקרוסופט השתמשו בdocument.all הידוע לשימצה). השימוש באובייקט הוא document.all.id.style.css_prop באקספלורר וdocument.layers.id.css_prop בנטסקייפ. זו טכנולוגיה ישנה שלא נתמכת יותר ואין טעם לתמוך בה.

עץ גרסא 1 של W3C

מאקספלורר 5, ונטסקייפ 5 ישנה אפשרות לגשת בצורה תואמת תקן לאובייקטים בדף הHTML. התקן הוא גישה ישירה דרך האובייקט document, כלומר document.some_div_id.some_table_in_div וכו'. פרמטר מיוחד שיש לכל אובייקט הוא childNodes[0] שמאפשר לגשת ל"ילדים" של האובייקט. בשביל לגשת לאובייקטים בדף בצורה יותר שמישה, יש להשתמש בפונקציות getElementById שנותנת לך אובייקט בדף לפי פרמטר הid= שלו, או getElementsByTagName שנותנת אובייקט בדף (או בתוך אובייקט הDOM שאתה קורא ממנו לפונקציה).

CSS

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

CSS 1

הגרסא הראשונה של CSS | נתמכת מאקספלורר ונטסקייפ 4 (אולי גם מגרסא 3 של אקספלורר) גרסאות קודמות של הדפדפנים לא תומכות בשום CSS. בכל הגרסאות אפשר להכליל קובץ CSS עם <link...>

CSS 2

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

AJAX

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

המלצות עבודה

באופן כללי

אל תמציא את הגלגל

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

אל תתמוך בכל הדפדפנים, אבל אפשר שמישות בכולם

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

הפרד קוד מתוכן

במידת האפשר, דאג לכך שדף הHTML שלך לא יכיל קוד, אלא רק אלמנטים של HTML והפניה מסוג <script>. שנה אירועים כגון onLoad וכו' ע"י getElementById, זה ייצור קוד קריא וברור של האתר, יאפשר הצגה של התוכן בכל דפדפדן (גם למשל דפדפן שמקריא לחרשים), ויקל על התחזוקה של האתר בעתיד.

במה להשתמש

כדאי לדעתי להשתמש בDOM גרסא 1 אם רוצים אתר מאד תואם לתקן, כמו גם אתר שיפעל ב99% מהדפדפנים הרלוונטיים. אם רוצים יותר שמישות ופחות תאימות לתקן אפשר להוסיף תמיכה בAJAX עדיף ע"י ספריה חיצונית.

טריקים של ג'אווהסקריפט לתאימות דפדפנים

בדיקת קיום אובייקט במקום בדיקת גרסת הדפדפן

לא כדאי בד"כ לבדוק מהי גרסת הדפדפן. אתה לא יכול לתחזק ולזכור את כל הגרסאות האפשריות של הדפדפנים השונים ותכונותיהם. כדאי לדעת שפקודה if (object.property) מחזירה "True" אם התכונה property קיימת באובייקט Object ואחרת False. כך פשוט, לפני שתשתמשו בdocument.getElementById לדוגמא, יש להקדים תנאי if(document.getElementById) וכו'.

שאלות פתוחות

ג'אווה סקריפט

Exceptions

מאיזה גרסאות הדפדפנים תומכים בtry {} except(e){?

for (var i in object)

מאיזה גרסאות דפדפנים תומכים בתחביר זה?