CSS 101 – פס גלילה
אני רוצה לציין כמה חוקים ב CSS שאינם מקבלים יותר מידי חשיפה, אבל יש להם השפעה משמעותית על עיצוב אתרים ועל ממשק המשתמש.
דבר ראשון, בואו נדבר על פס הגלילה. מראשית ימי האינטרנט, הורגלנו לכך שפס הגלילה ממוקם בצד ימין של הדפדפן, גם באתרים בעברית וגם באתרים באנגלית. הסיבה כנראה נובעת מכך שרוב האוכלוסיה ימנית, ולכן להתעסק עם פס גלילה בצד ימין של המסך היא פעולה יותר אינטואטיבית לאותם אנשים. מה שמצחיק כאן זה שהמאפיין הזה שמקורו בעולם דובר האנגלית, עובד בצורה אפילו יותר נוחה ואינטואטיבית בעולם דוברי העברית.
כאשר אנחנו קוראים מסמך באנגלית, העין שלנו קופצת מייד לפינה העליונה-שמאלית (אותו “אזור חם” ידוע לשמצה), וכאשר אנחנו קוראים מסמך בעברית, העין קופצת מייד לפינה העליונה-ימנית. בגלל זה קוראי העברית מאתרים את פס הגלילה אפילו מהר יותר משאר העולם, אבל מצד שני אנחנו נעשים אפילו יותר מתוסכלים כאשר פס הגלילה לא מופיע בצד ימין.
הבעיה מתחילה עם אינטרנט אקספלורר… האנשים החביבים במייקרוסופט הגיעו למסקנה שכאשר עוברים משפות הנכתבות משמאל לימין (LTR) אל שפות הנכתבות מימין אל שמאל (RTL), צריך לא רק ליישר את הכתב לצד ההפוך, אלא גם לזרוק את פס הגלילה לצד השני. פיירפוקס לעומת זאת, תמיד מציגים את פס הגלילה בצד ימין.
שימו לב שאתרים רבים בעברית מופיעים כראוי עם פס גלילה בצד ימין כאשר מביטים בהם בשועל האש, אך ב IE פס הגלילה נזרק לצד שמאל. זו בעיה שנפוצה מאוד בבלוגים של וורדפרס עם תבניות עיצוב מעוברתות.
כיצד קובעים את כיוון שפת הכתיבה במסמך כולו או במאפיין מסויים? באמצעות מאפיין ה direction בקובץ ה CSS.
באופן אידיאלי, אנחנו אמורים לסמן מסמך בעברית באמצעות החוק הבא:
body { direction: rtl; }אבל מכיוון שסימון המסמך כולו כמסמך בעברית יזרוק לנו את פס הגלילה באקספלורר לכיוון הלא רצוי, נגדיר את הרמה הגבוהה ביותר של המסמך (זו שלמעשה קובעת את כיוון פס הגלילה) כמיועדת לשפה האנגלית, ואילו את כל מה שבתוכה, כתוכן בעברית:
body { direction: ltr; }
body * { direction: rtl; }זהו, נפתרה הבעייה.
בפעם הבאה בסדרת ה CSS: הבעיה עם עמודות DIV באורך שונה.
וזכרו – "עם כוח גדול, באה אחריות גדולה!"
