פתאום שמתי לב, שבקצת יותר משנה של קיומו של הבלוג הזה, מעולם לא פירסמתי פוסט המוקדש לאהבה והמקצוע המקבילים שלי, לצד ההפקה המוזיקלית: עיצוב ותכנות אתרים. זה גם חלק גדול ממה שאני מלמד בקולג' שבו אני עובד, ה Art Institute of  Fort Lauderdale.

אז במה דברים אמורים, ומדוע אני מתעצבן על אקספלורר?

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

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

למה צריך שתי שפות? ה HTML כיום משמש בעיקר לתאור התוכן והמבנה, בעוד ה-CSS אחראי על הצורה, העיצוב, המראה.

משל למה הדבר דומה? נגיד שאאסוף קבוצה של אנשים, אתן להן פיסת נייר ועיפרון, ואכתיב להם בעל פה:

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

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

כלומר, HTML למשל יגיד משהו מקביל ל "פה מתחילה קופסה, ובתוך הקופסה יש את המילים האלו…."

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

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

והאספלורר הוא הגרוע והעקשן מכולם. 

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

אז קודם כל, הנה עמוד פשוט, בלי CSS בכלל, רק תוכן ב HTML:

 

מה יש פה? כותרת, ואז קופסה, (div, קיצור ל-division) ובתוכה פיסקה של טקסט.

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

וכך זה מתקבל בפיירפוקס (מאק ו–ווינדוז), וגם בסאפרי (מאק ו–ווינדוז), וגם בדפדפן החדש של גוגל, כרום:

 

 

למי שמתעניין, הנה ה CSS קוד:

 

<style type="text/css">

<!–

.twocol {

width: 450px;

background-color: #eee;

-webkit-box-shadow:2px 2px 5px #333;

-moz-box-shadow:2px 2px 5px #333;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

.twocol p {

padding: 10px;

margin: 10px;

-webkit-column-count: 2;

-webkit-column-gap: 1em;

-moz-column-count: 2;

-moz-column-gap: 1em;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 12px;

}

h1 {

text-shadow:2px 2px 5px #333;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 24px;

color: #333;

}

אז מה הבעיה? הנה, כך זה יראה באקספלורר, לכל גירסאותיו, כולל 8, החדשה ביותר:

 

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

כמה אנשים משתמשים באקספלורר?  הנה קצת סטטיסטיקה:

 

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

Share this:

• לחצו כדי לשתף בטוויטר (נפתח בחלון חדש)
• לחיצה לשיתוף בפייסבוק (נפתח בחלון חדש)