CSS Expression Hacks
CSS expressions were Microsoft-specific CSS properties that allowed JavaScript code to be executed within CSS rules, primarily used to work around IE's lack of support for CSS properties like min-height, max-width, and fixed positioning. Expressions used syntax like height: expression(document.body.scrollHeight > 600 ? "600px" : "auto") to create dynamic CSS values.
“css
/* IE Expression examples for missing CSS features */
.min-height {
min-height: 400px;
/* IE6 fallback using expression */
height: expression(this.scrollHeight < 400 ? "400px" : "auto");
}
.max-width {
max-width: 600px;
/* IE6 fallback */
width: expression(document.body.clientWidth > 600 ? "600px" : "auto");
}
.fixed-position {
position: fixed;
top: 0;
/* IE6 expression hack for fixed positioning */
position: expression("absolute");
top: expression(eval(document.documentElement.scrollTop));
}
“
Why CSS Expression Hacks Matters
CSS expressions represented both the creativity and desperation of developers trying to achieve modern CSS functionality in Internet Explorer, while also demonstrating the security and performance problems that arise from mixing JavaScript and CSS. The technique's widespread use and eventual deprecation helped establish the principle of separating presentation and behavior in web development.