What is a CSS expression? What are your opinions and suggestions on its use.

What is CSS expression?

Ie5 and later versions support the use of expression in CSS to associate CSS attributes with JavaScript scripts. the CSS attributes here can be inherent attributes of elements or custom attributes. That is to say, the CSS attribute can be followed by a javascript expression. The value of the CSS attribute is equal to the result calculated by the Javascript expression. You can directly reference attributes and methods of an element in an expression, or use other browser objects. This expression seems to be the same in a member function of this element. Do you think the text above is a bit obscure? It doesn't matter. You just need to know: we can write JavaScript scripts into CSS files through expression to implement some convenient functions and effects.

Expression application:

1. assign values to the inherent attributes of an element. The following instance positions an element based on the browser size.

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  >  <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   /> <  Title  > Mid.lt263.com/mb </  Title  >  <  Style  Type  = "Text/CSS"  >  # Mydiv  {  Position  : Absolute  ;  Width  :  100px  ;  Height  :  100px  ;  Background  : # C00  ;  Left  :  Expression (document. Body. offsetwidth-180 "PX ")  ;  Top  :  Expression (document. Body. offsetheight--80 "PX ")  ;  Text-align :  Center  ;  Line-height  :  90px  ;  Color  :  # Fff  ;  } </  Style  >  </  Head  >  <  Body  >  <  Div  ID  = "Mydiv"  > Mb5u.com </  Div  > </  Body  >  </  Html  > 

2. assign values to custom attributes of Elements
Let's look at the following example:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  >  <  Html  Xmlns = "Http://www.w3.org/1999/xhtml"  >  <  Head  >  <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   />  <  Title  > Mid.lt263.com/mb </ Title  >  <  Style  Type  = "Text/CSS"  >  A  {  Star  :  Expression (this. onfocus = This. Blur ())  }  </ Style  >  </  Head  >  <  Body  >  <  A  Href  = "#"  _ Fcksavedurl  = "#"  >  Template world-mid.lt263.com/mb  </ P  >  </  Body  >  </  Html  > 

Note: Star is an attribute defined by yourself. You can define it as you like, and the statements contained in expression () are JS scripts, do not forget to keep a quotation mark between the custom attribute and expression. Because it is actually CSS, it is placed in the style label rather than in the script.In this way, you can easily use one sentence to eliminate the link dashed lines in the page.Important:If expression is not very special, it is generally not recommended to use expression because expression has high requirements on browser resources.

 

CSS expressions are powerful but dangerous methods to dynamically set CSS attributes. Internet Explorer fromVersion 5thCSS expressions are supported. In the following example, you can use a CSS expression to change the background color every hour:
Background-color: expression (new date (). gethours () % 2? "# B8d4ff": "# f08a00 ");
As shown above, expression uses a javascript expression. The CSS attribute is set based on the calculation result of the Javascript expression. The expression method does not work in other browsers. Therefore, it is useful in cross-browser design for setting Internet Explorer separately.
The problem with expressions is that they are computed more frequently than we think. Not only when the page is displayed and scaled, but when the page is scrolling or even moving the mouse, it is re-computed. Add a counter to the CSS expression to track the computing frequency of the expression. You can easily move the mouse over 10000 times on the page.
One way to reduce the number of CSS expression computations is to use a one-time expression. It assigns the result to the specified style attribute at the first run and uses this attribute to replace the CSS expression. If the style attribute must be dynamically changed within the page cycle, it is feasible to use the event handle instead of the CSS expression. If you must use CSS expressions, remember that they must be calculated thousands of times and may affect the performance of your page.