מי נתן להם CSS ואיך גורמים לדפדפן לטעון אותו בכח?

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

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

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

הפתרון המקורי שלי היה לתת לכל משתמש קובץ CSS כך:

 LINK href="http://www.saf.org.il/tamplate1css.php?s=username rel="stylesheet" type="text/css"

למעשה אני מפנה לקובץ PHP שמייצר קובץ CSS על פי שם המשתמש.

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

ככה? הא? רק בגלל ששם הקובץ זהה?

אז הנה הפיתרון - בכל פעם שמשתמש משנה את הקובץ אני שומר timestamp ומשרשר אותו לשם הקובץ כך:

 LINK href="http://www.saf.org.il/tamplate1css.php?s=username&t=1263888643" rel="stylesheet" type="text/css"

כלומר בכל שינוי של קובץ הCSS אני יוצר אוטומטית גם שינוי בשם שלו.

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

תעשו כיף ואתרים צבעוניים, יובל.
(-:

באיזה דפדפנים גולשים? באיזה לתמוך?

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

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

ומכאן השאלה שבכותרת מתוך כל סוגי הדפדפנים שישנם בשוק - באיזה דפדפנים צריך לתמוך?

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

להלן למשל טבלת השימוש בדפדפנים כיום - לאתרים בינ"ל:

Microsoft Internet Explorer 7.0 47.32%
Microsoft Internet Explorer 6.0 19.21%
Firefox 3.0 18.30%
Safari 3.2 4.16%
Safari 3.1 2.89%
Firefox 2.0 2.84%
Chrome 1.0 1.08%
Microsoft Internet Explorer 8.0 0.92%

נתונים מתוך Net Applications לינואר 2009

בעקבות הטבלה הזו אנו למשל מסירים את התמיכה ב Firefix 2 שהולך ויורד ועוד מעט יעלם מהמפה (עדיין תומכים כמובן ב FF3). לעומתו אנו נערכים לתמוך ב Chrome וב IE8 שברור מאד שיעברו את סף ה 2% בחודשים הקרובים.

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

ואיך האתר שלך נראה על דפדפן אחר?

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

Microsoft Internet Explorer 6
Microsoft Internet Explorer 7
FireFox 1.5
Firefox 2
Firefox 3

למרבה הצער לא כל אחד מהנ"ל יפענח את סגנונות האתר באותו אופן ועלולות להיות תקלות מביכות כשהמבנה של האתר כולו עלול להשתבש. ישנם דפדפנים נוספים אבל תאימות לדפדפנים ברשימה תכסה את רוב הגולשים שלכם נכון להיום (יותר מ 99% מהגולשים הישראלים בכל אופן).

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



אחלה כלי וחינם.