CSS Expressions performance

FAQ "Briefly about the main thing"

What is CSS Expressions?

CSS Expressions is a proprietary technology of Microsoft, which allows Internet Explorer browsers (from the fifth to the seventh version, inclusive) to use JavaScript in CSS code.

Is CSS Expressions Good or Bad?

This is a double-edged sword. Ekspreshn allow you to solve various problems with incorrect block model of IE and the disadvantages of the Trident engine.
On the other hand, they significantly affect performance.
')

What does "affect performance" mean? How many hear on the Internet, everywhere this "performance"!

This means that the calculation of the expression occurs every second, in which the user performs some action with the browser: he drives the mouse, types in the input field, scrolls or, God forbid, changes the size of the window. This is not obvious until you look at the task manager, although some notice the brakes at work and to the eye.

Let us suppose. What is this schedule?

The graph drew ProcessExplorer for the sixth IE, into which this layout was uploaded (the project is still in development, I can not yet reveal whose site it is):



Customer requirement: "rubber". In addition to the rubber, it is necessary to limit the maximum width, and set the minimum. max/min-width rule, but not in IE. Therefore, through conditional comments, we connect the styles:

* html #wrapper,
* html #footer {
width: expression(
(document.compatMode && document.compatMode == 'CSS1Compat') ?
(document.documentElement.clientWidth < 950 ? "950px" :
(document.documentElement.clientWidth > 1300 ? "1300px" : "auto")) :
(document.body.clientWidth > 950 ? "950px" :
(document.body.clientWidth < 1300 ? "1300px" : "auto")));
}


And then we start to jerk the site in all directions. A graph showing the voracity of IE is attached.

Wow. And now what? Well, they are in the bathhouse, these are expressive, I will go with the customer on the ceiling about fixing better ...

There is an exit. Even two. Only they are suitable for individual cases. These are one-time and cacheable express . Briefly by the first: the value is calculated only once when the page loads. Suitable for adding elements to the DOM, or for a one-time style of any problematic element. Briefly on the second: the value is calculated once until the need to change it appears. More on both: the presentation of Vitaly Kharisov, and the video version of the same (the second is preferable).

In, cool, thanks. I'm going to try! This, maybe some more recommendations?

Try to keep the use of CSS Expressions to a minimum, but if there is no other way out (everything happens in the work) - if possible, optimize them. Connect them through Conditional Comments only when you need it, and even better - think carefully, maybe you can do without them.

^{PS People, I know that there are a lot of professionals who already know this. Let's not throw pissing rags and shout "button accordion", okay? You are not alone on this resource, let the young people learn :)}