Using expression expressions in CSS

To find this effect, personal feeling is very good

The following is a CSS style

Input {

border:1px solid #B3D6EF;

Background: #ffffff;

}

Input {

Star:expression (

Onmouseover=function () {this.style.backgroundcolor= "#D5E9F6"},

Onmouseout=function () {this.style.backgroundcolor= "#ffffff"})

}

The advantage is that you don't have to write a bunch of onmouseover functions on the page.

Lolo

Some problems need to pay attention to, this kind of writing may cause the browser card to die under the IE6, now does an old occurrence card dead phenomenon ...

Here is a reference to the strange fly the article CSS optimization

The biggest problem with CSS Expression features in browsers: Repeated execution, hundreds of times per second, and serious performance problems.

How to optimize the CSS Expression?

At least: If we take CSS Expression only once in the matching element, the performance will be greatly improved.

OLD9 provides a solution in the CSS Expression Reloaded article:

In the CSS Expression statement body, the Expression CSS property reset is triggered.

The code is as follows:

div {

Zoom:expression (function (EL) {el.style.zoom = "1"; alert (el.tagname);} (this));

}

Or

The code is as follows:

div {

-singlex:expression (This.singlex 0: (function (t) {alert (t.tagname); t.singlex = 0;}) (this));

}

Explain ~:

The CSS Expression executes on any matching element.

Within the CSS expression, the "this" keyword points to the currently matching HTML element.

CSS properties are triggered by using some of the infrequently used properties, triggering the reset back to default values.

About expression, the Yahoo team mentions these

Avoid using CSS expressions (Expression)

CSS expressions are a powerful (but dangerous) way to set CSS properties dynamically. Internet Explorer supports CSS expressions starting with the 5th version. In the following example, you can use a CSS expression to switch the background color once every one hours:

Background-color:expression (New Date ()). GetHours ()%2? "#B8D4FF": "#F08A00");

As shown above, JavaScript expressions are used in expression. CSS properties are set based on the results of the JavaScript expression's calculations. The expression method does not work in other browsers, so it is useful to set up individual Internet Explorer settings in a Cross-browser design.

The problem with an expression is that it is more computationally frequent than we think. Not only when the page is displayed and scaled, but when the page scrolls or even moves the mouse, it is recalculated. Add a counter to the CSS expression to track how often the expression is calculated. Moving the mouse around on the page can easily reach more than 10,000 times the amount of calculation.

A way to reduce the number of times a CSS expression is calculated is to use a one-time expression that assigns the result to the specified style property The first time it is run, and replaces the CSS expression with this property. If the style attribute must change dynamically within the page cycle, it is a viable alternative to using the event handle instead of a CSS expression. If you must use CSS expressions, be sure to remember that they are counted thousands of times and may have an impact on the performance of your page.