עיצוב CSS מול עיצוב טבלאות

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

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

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

כמו בהרבה מקרים אחרים מה שנראה נפלא בתיאוריה נראה פחות טוב במציאות בשטח.

במציאות כל דפדפן מפרש בצורה קצת שונה את קוד ה-CSS. מה שמופיע באקספלורר במקום מסוים יכול להופיע בשועל 3 פיקסלים לימין. לפעמים זו לא בעיה ולפעמים זו בעיה גדולה.

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

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

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

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

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

מומלץ לעיין בתגובות המופיעות בתחתית הדף כדי לקבל נקודות יותר מעודכנות בנושא.

יש 2 תגובות

  1. רותם בתאריך 12.2.2008 בשעה 1:11

    כמה הערות :

    לגבי הקובץ של ה CSS, יש מספר דרכים לצמצם אותו :

    1. יש כלים נפלאים ברשת(לדוגמא:http://www.googletools.net/csscopressor) שכל תפקידים הוא להקטין את הקובץ של ה CSS על ידי הסרה של רווחים, הערות , ירידות שורה וכד'. באתרים גדולים זה יכול לחולל נפלאות.
    2. ניתן לחלק את הקובץ CSS לכמה קבצים על פי אזורים באתר וככה בעצם להקטין את הקבצים.
    3. בנוסף לקומפרסור בסעיף 1, ניתן להשתמש ב MOD_GZIP, כיום 90 אחוז מהדפדנים החדשים IE6,7 OPERA FIREFOX SAFARI ועוד, תומך בקריאה של תוכן מכווץ על השרת, כלומר השרת יכול לכווץ את התוכן ואת הפלט שלו, כך שלמעשה ה CSSים (או קבצי ה HTML או כל פלט אחר) שוקלים הרבה פחות כי הם למעשה מכווצים וללא מאמץ וכבר חסכת בזמן טעינה + תעבורה

    "נקודה נוספת שיש לתת עליה את הדעת היא שזמן הפיתוח של אתר המבוסס על CSS בלבד הוא בדרך כלל ארוך יותר עקב הבעייתיות של ההתאמה לדפדפנים השונים"

    כאן בא לידי ביטוי בין חותך מקצועי שלוקח כ 100 דולר לעמוד לבין ילד שלוקח 50-100 שקל לעמוד.
    מי שמקצועי , יכול להתמודד עם השינויים בין הדפדנים ללא בעיות , מעבר לזה הוא מכיר את ההבדלים בניהם ויודע לעבוד ברמת הקוד מבלי לראות את הפלט ולראות את ההבדל כבר בראש, כמובן שצריך לבדוק את עצמך אבל זה לא מה שקשור.
    מעבר לזה , למי שמתקשה יש קובץ של הגדרות (פשוט הגדרות לכל האלמנטים הקיימים החל מ DIV ועד DFN) שכל תפקידו הוא בעצם לעשות "ריסט" לדפדפן ולהגדיר את האתר לפי מידות קבועות (לדוגמא ההגדרה של H1 בין פיירפוקס לבין IE שונה לגמרי, הן ברווחים והן בגודל הטקסט ובעוד כמה דברים לא רלוונטים לעכשיו) ואז כשמתחילים את החיתוך העבודה שוב, הרבה יותר קלה.

    טבלאות נועדו לדבר אחד בלבד. להציג מידע טבלאי !
    מי שמנסה להציג מידע טבלאי באמצעות DIVים ו SPANים הוא פשוט במילה אחת מטומטם.
    טבלה נועדה להציג מידע טבלאי והיא לא צריכה להיות קשורה להגדרות של העיצוב של העמוד.
    אתה רואה את עצמך מעצב מסמך WORD או מסמך POWERPOINT באמצעות טבלאות ? לא נראה לי!
    אז אם ב WORD לא אז למה באתרים כן ?

    כי זה כל מה שאנשים הכירו מאז הגרסאות הראשונות של הרשת. זה שזה היה קיים לא אומר שזה נכון.

    (סתם לשם הקבלה, גם המטוס הראשון בעולם טס, זה לא אומר שהוא היה בטוח)

    בנוסף עוד כמה חסרונות של טבלאות הם :

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

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

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

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

    בנוסף , אני לא התייחסתי לשינוי של ה DOM באמצעות JS משימה שהופכת כמעט לבלתי אפשרית עם טבלאות.

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

    רותם.

  2. דורון בתאריך 13.2.2008 בשעה 16:36

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

    "טבלאות נועדו לדבר אחד בלבד. להציג מידע טבלאי "!
    מסכים לגמרי.

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

כתיבת תגובה

*

מה עוד?

יעוץ

עידכונים

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

הרשמה לעידכוני RSS או
הרשמה לעידכוני Email

דורנט

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

עוד על דורנט

מאמרים מומלצים

נושאים

ספקים מומלצים