milov.nl

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 */
input[type="text"]
{
background-color:yellow;
}

/* alternative for Internet Explorer */
input
{
background-color:expression(
    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(): http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setexpression.asp

For those interested in conditional comments:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp


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 http://www.stilleye.com/scripts/marginfix/