DCSIMG
Don't use CSS Expressions if you care about performance - Avi Pinto

Avi Pinto

על הבלוג

Follow uberPinto on Twitter

View Avi Pinto's profile on LinkedIn

Subscribe in a reader Subscribe by Email

 


Two new sculptures

View my Air Brush Work at Avipinto.com

Helping a friend, great tool for fixing file names

JavaScript Tutorial


Disclaimer All postings/content on this blog are licensed under a Creative Commons Attribution By license and provided "AS IS" with no warranties, and confer no rights.
All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors.

Don't use CSS Expressions if you care about performance

CSS Expressions הנם כלי חזק ומיותר.
בקצרה, CSS Expressions מאפשרים שינוי דינמי של properties בתוך CSS class ע"י שימוש ב javascript.
שיטה זו עובדת רק ב IE, לכן בדרך כלל משתמשים בה בשביל לאפשר תכונות CSS שעובדות רק בדפדפנים אחרים (כמו max-width).
זהו כלי חזק - כיוון שלכאורה הקוד נראה יותר נקי - שורת javascript בתוך מאפיין בקובץ ה CSS שלכם, ויותר לא צריך לדאוג לעדכון אוטומטי של מאפיין width.
זהו כלי מיותר - כיוון שאפשר פשוט להשתמש ב javascript ולשנות את המאפיין הרצוי לפי הארוע הרצוי.

שתי בעיות עיקריות מתלוות לשימוש ב CSS Expressions: בעית ביצועים ובעית תחזוקה.
בעית ביצועים:
כאשר יש על הדף אלמנט שמשתמש ב class שמכיל expression ה expression מחושב כמעט כל הזמן, כל תנועת עכבר מעל אלמנט אחר בדף או שינוי של מיקום/גודל החלון יגרמו לחישוב מחדש שלו.
הדוגמא הבאה נלקחה והורחבה מההסבר של yahoo בנושא: 

In a css class put the following:
   background-color: expression( ((new Date()).getSeconds()%2 && (evilCssExpressionCounter++ > 0)) ? "#B8D4FF" : "#F08A00"  );
       
In a script block put the following:
    var evilCssExpressionCounter = 0;

Now set the class to an element and attach an onclick to it to alert evilCssExpressionCounter

כיוון שבגרסא 2008 אני לא מצליח להדביק קוד בצורה נורמלית בבלוג כשהשפה היא עברית (ניסיתי כל plug-in שמצאתי - זה פשוט נראה חרא מבחינת עימוד, גם ניסיונות להתערב ב HTML לא צלחו) - פירטתי רק את ה expression  - להורדת דף שמכיל את כל הדוגמא

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

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

כמובן שהערות/הארות יתקבלו בברכה

לגבי WLW + כתיבה בעברית + קטעי קוד - אם מישהו יוכל לעזור בעניין זה יהיה נהדר, אולי ה theme שבחרתי לא נכון, או כל טריק אחר...
זה פשוט מייאש, באנגלית כבר הייתי מסיים את הפוסט הזה מזמן!

תוכן התגובה

Offir Shvartz כתב/ה:

תתחדש על הפוסט עוד פוסט מצויין מבית היוצר של פינטו

# August 30, 2008 10:50 AM

alikl כתב/ה:

אבי - אחלה פוסט!

תשקול לתייג אותו עם תגית Performance

לגבי WLW - אני משתמש בתגית DIV או P ובתוכה dir=ltr ו-align=left עבור קטעים באנגלית

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

תוכל לראות את זה בפעולה כאן:

practicethis.com/.../blog-post-templates-new-and-improved-plugin-for-windows-live-writer-free

# August 30, 2008 3:05 PM

Avi Pinto כתב/ה:

תודה אליק :)

האמת שהתכוונתי לתייג אותו בתגית Performance, אבל העצבים על WLW... :) , עכשיו תוייג

לגבי ה WLW:

ניסיתי להכניס  dir=ltr ו-ו-align=left  ו - direction:ltr

אבל ה plug-in-ים שמפרמטים קוד פשוט לא אוכלים את זה, אני מניח שזה קשור לתגיות pre שעוטפות שם כל דבר.

מה שמוזר זה שבגרסת הבטא - פשוט נכנסתי לקוד ה HTML, הוספתי ltr והכל הסתדר.

אני אבדוק את ה plug-in שלך

תודה

# August 31, 2008 1:14 AM

Rotem Bloom כתב/ה:

אחלה פוסט מאוד מעניין

# August 31, 2008 1:15 AM
שלח תגובה

(שדה חובה)  

(שדה חובה)  

(אופציונלי)

(שדה חובה) 

Please add 7 and 3 and type the answer here:


Enter the numbers above: