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

 

לכל אורך השנה ניתן היה לראות אנימציות מסוג חדש, בד”כ באתרים הגדולים יותר, האמיצים יותר שמוכנים לקחת את הסיכון שרק 50% מהמשתמשים באמת יראו את התכנות שעליו עמלו במשך המון שעות אם לא ימים.

 

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

אז איך זה עובד? ומה החידוש?

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

 

למה זה מעניין אותנו?

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

 

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

 

קצת דוגמאות:

דוגמא לאנימצייה בCSS3 ללא גאווה סקריפט בכלל

אלבום תמונות עם אפקט של סיבוב במעבר עכבר

DJ-Hero אפקט דיגי עם לחיצת עכבר על התקליטים

CoverFlow של אפל בCSS