Interaction design • webdevelopment • web art • photography

August 2002

Idea: faking css attribute selectors in Internet Explorer by using IE's special Javascript expression() properties

Example: setting the background of all <input>-tags to yellow, but only if they're of type 'text':

/* standards-compliant; works in Mozilla */

/* alternative for Internet Explorer */
    this.type=='text' ? 'yellow' : 'transparent');

marc wrote on 2002/08/09:
Nice!! I like it!

Jan! wrote on 2002/08/09:
Nice, didn't know about this yet. Be sure to include those hacks in a conditional comments section inside your (X)HTML to ensure CSS validity! :-)

This is about all I could find about expression():

For those interested in conditional comments:

wrote on 2002/08/24:
do you need logic to deploy (sniff) or can u just include both in same css file?
i very much need this, thanks

Stone wrote on 2002/09/05:
Neat, tried:
background-color:expression( this.type=='text' ? 'red' : (this.type=='submit' ? '#e0e0FF' : (this.type=='password' ? '#e0e0e0' : 'transparent')));
that worked too

Aaron wrote on 2002/09/12:
You don't need logic, since expressions are proprietary and not understood by anything other than IE5. Simply put the expression'd statement /after/ the normal CSS2 one so that it overrides it properly.

This is also a great way to override the broken IE box model, something Dave does over at