CSS Expresssions and Dynamic Properties | CSS: Presentation Layer
Standards Based Development
css Expressions were introduced in ie5, allowing JavaScript expressions to be assinged to a css property. css Expressions are another name for css Dynamic Properties.
In the example below, the element's position is being set to the browser size:
#myDiv {
position:absolute;
width:100px;
height:100px;
left:expression(document.body.offsetWidth - 110 + "px");
top:expression(document.body.offsetHeight - 110 + "px");
background:red;
}
Dynamic Expressions
Dynamic css Expressions are possible, however they should be avoided as much as possible. Dynamic Expressions are continuously recalculated, which can very quickly lead to extreme performance issues. In the example below ieBox is a constant flag, which is true when ie is in quirks mode, the expression at all time results in 80px or 100px; even though the expression is constant it is recalculated most of the time:
#myDiv{
border:10px solid Red;
width:expression(ieBox ? "100px" : "80px");
}
Constant Expressions
Constant css Expressions are the safer alternative to dynamic expressions: instead of using a constant expression, use a constant value. The previous example, assuming in ie6 standards mode:
The easiest way to find out if an expression is constant is to mark it for finding; in this case, enclose the expression in a function that you know the name of and is equal to the identity function and apply it to the style sheet:
/** static css **/
#myDiv {
border: 10px solid Red;
width: 80px;
}
// js
function constExpression(x) {
return x;
}
/** css block **/
#myDiv{
border:10px solid Red;
width:expression(constExpression(ieBox ? "100px" : "80px"));
}
constExpression is defined in the cssexpr.js; it can be used anywhere in the document; on pageload it will loop through the document, updating the constant values.
Force min-width/max-width in ie6
/** desired style **/
.whatever{
min-width:760px;
max-width:955px;
}
/** ie6 max-width/min-width support via javascript expressions **/
.whatever{
width:expression(document.body.clientWidth < 955 ? "955px": "100%" );
}
css Dynamic Properties
Dynamic Properties (also known as css expressions) have been deprecated since ie8, in ie8 Standards mode and higher. Dynamic Properties are still available in ie8 in either ie7 mode or ie8 mode/
Expression
ie5 (for Windows) introduced css expressions, an extension that allows you to use Microsoft JScript to assign a dynamic value to a css property value.
Note: ie8 deprecated dynamic properties; they are only supported in web documents displayed in ie5 mode or ie7 mode.