CSS, CSS ועוד פעם CSS (או "עיצוב ועימוד דפי אינטרנט באמצעות CSS")

29 בפברואר 2008

תגיות: , ,
3 תגובות

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

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

בפוסט זה (ובעוד סדרת פוסטים שאני אוציא בנושא, שנוגעים גם לנושא הנגשת אתרים) אסביר למה, מה, מדוע, מתי ואיך באמת עושים את זה (עם [CSS]).

אז נתחיל משאלת השאלות:

למה CSS והאם זה באמת עדיף על טבלאות?

יש בנושא לא מעט דיונים וויכוחים, האם באמת עדיף להשתמש ב – CSS לעימוד הדפים לעומת טבלאות.

יש הרבה אנשים שיטענו שלהשתמש בטבלאות זה מיותר לחלוטין ואין לזה שום יתרונות, ויש אנשים שיטענו שלעמד באמצעות CSS דורש המון זמן ולא באמת נותן יתרונות.

אני לא אומר שאלו או אלו צודקים, אך אנסה לסקור את היתרונות שיש לעימוד באמצעות CSS (גם "גליונות סגנון מדורגים"):

  • נפח הדפים: דפים שמעוצבים עם CSS תופסים פחות מדפים שמעוצבים באמצעות טבלאות. בנוסף קבצי ה – CSS נשמרים בזכרון הדפדפן ולכן נטענים רק פעם אחת בכניסה לאתר (לעתים קרובות גם בכניסות הבאות לאתר).
  • נגישות: דפים שאינם משתמשים בטבלאות לעימוד נגישים יותר לאנשים עם מוגבלויות או לתוכנות וחומרה מוגבלים יחסית (לדוגמה טלפונים סלולאריים).
    לצערי הרב (ויותר לצערם של אנשים בעלי מוגבלויות), אין מספיק התייחסות לנושא הנגישות באינטרנט, ואנשים בעלי מוגבלויות שיכולים לעשות הכל בעולם של היום (חרף המוגבלויות שלהם) – לא יכולים לגלוש באינטרנט, שהפך לחלק מרכזי מהחיים שלנו.
  • ריכוז ותחזוקה: ניתן לרכז את כל הגדרות העיצוב במקום אחד, כל העיצוב נמצא במספר מצומצם של קבצי CSS. דבר שנותן שליטה טובה יותר על העיצוב. (שינוי בעיצוב, כמו לדוגמא שינוי גודל ה – Header והכתב בו באופן גורף ידרוש שינוי בקובץ CSS אחד לרוב במקום בדפים רבים.
  • גמישות: ניתן ליצור עיצובים רבים לאתר אחד באמצעות קבצי CSS שונים, דבר שמשתלב בצורה מעולה עם מנגנון ה – Themes שיש ב – ASP.NET 2.0. (וג'סטין פרסם Webcast מעולה על נושא ה – Themes). שני אתרים שמדגימים את היכולת הזו בצורה מעולה הם:
    • CSS Zen Garden – אתר שיש לו בסה"כ html אחד, ונכון להיום מעל 200 קבצי CSS שונים שמראים את היופי של ההפרדה בין ה – HTML לעיצוב. (תבחרו עיצוב מהתפריט העונה לשם "Select a design").
    • הכללים – האתר הזה מציע שלושה עיצובים, וגם הסברים שכדאי לקרוא על סטנדרטים באינטרנט.
  • קריאות (למנועי חיפוש): דף שכתוב ללא טבלאות לעימוד – הוא קריא יותר למנועי החיפוש.

בנוסף הנה מצגת Webית (בעברית) שמסבירה למה CSS: מדוע זה מטופש להשתמש בטבלאות לעימוד (אנגלית).

עם הזמן יותר ויותר אתרים עוברים לעימוד באמצעות CSS (ידוע גם בשם מודל הקופסה או Box Model),  להלן רשימה מצומצמת של כמה מהאתרים הגדולים שמשתמשים בשיטת עיצוב זו: ASP.NET, Wikipedia, Facebook, Yahoo, וגם Community Server (הבלוגים האלו, ולמעשה רוב אם לא כל פלטפורמות הבלוגים הנפוצות כיום).

עוד כמה נקודות שחשוב לי להבהיר:

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

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

טבלאות זה לא מיותר. ואין צורך להמנע מהן, טבלאות נועדו להציג מידע בצורה מסויימת, ואם יש צורך להציג מידע בצורה של טבלה – יש להשתמש בטבלה. (דוגמה טובה היא הצגת רשומות מבסיס נתונים).

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

אם אתם מעוניינים שאני אכתוב על נושאים מסויימים שנוגעים לעיצוב CSS(י), אתם מוזמנים להגיב כאן או לשלוח לי באימייל.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

3 תגובות

  1. Ken Egozi29 בפברואר 2008 ב 23:53

    מעולה מעולה מעולה.
    חבל שהרוב המכריע של המתכנתים בארץ (אם לשפוט לפי רמת האתרים הישראליים) לא "בענין" …

    והערה קטנה – למיטב ידיעתי המונח Box-Model מדבר על האופן בו דפדפן מסויים מתייחס ל width/padding/border/margin של אלמנט כלשהו (רמז – כל הדפדפנים מתייחסים באופן אחד, בעוד ש IE-quirks-mode מתייחס אחרת).
    כתבתי על זה בקצרה בבלוג שלי לפני כשנתיים:
    http://www.kenegozi.com/Blog/2006/02/19/understanding-the-box-model-of-html-elements.aspx
    אפשר אגב לראות בתגובה הראשונה לפוסט שלי את היחס של המתכנת הישראלי הממוצע לתקנים של פיתוח ב web.

    הגב
  2. OhadAston1 במרץ 2008 ב 22:05

    תודה,

    ד"א יש עוד בעיות מעבר לזה, כמו השימוש ב – table-cell וכיו"ב לא עובד ב – IE. דבר שמאוד מגביל.

    הגב
  3. אלי24 בספטמבר 2008 ב 12:14

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

    הגב