views:

2185

answers:

4

I already know: "Don't use css expressions!" My question is not about whether I should be using an expression or if there is an alternative; my question is simply: Can I get a css expression to only be evaluated in versions of IE prior to version 7 without using conditional comments?

I occasionally use an underscore hack to hide a rule from IE7 but IE7 seems to evaluate expressions anyway. For example, _width:700px; is ignored by IE7 but _width:expression('700px'); is still evaluated.

I know that someone will try to tell me to just use a conditional comment to include the rule, but I am looking for a way to do this without placing a single style rule into a separate file.

A note for those of you who still don't want to let it go: I've chosen to use a css expression, but I didn't do so lightly. I understand the implications and I am using an expression that only evaluates once. Stop worrying about my bad decisions and just answer the question already... ;-)

A: 

You can try Rafael Lima's CSS Selector. It uses Javascript, but you can do things like:

.ie6 .myClass {}
.ie7 .myClass {}
.ie .myClass{}
Diodeus
I would prefer to avoid adding the additional file, but if I can't find another solution I'll probably still go the conditional comment route before adding a script. Thanks for the input.
Prestaul
+1  A: 

I used to use !important to make non-ie browsers use a different style but then IE7 started supporting it. What I have found is that IE7 will apply a style marked !ie-only (or anything not !important) and other browsers will ignore the style as they don't recognise that.

If you need three different styles this might work but not great is you want to adhere to standards though. (normally I don't try the mix of !important and !ie-only and just have !ie-only.)

#myDiv {
  height: 3.0em !important; /* non-ie */
  height: 2.6em !ie-only; /* ie7 */
  height: 2.4em; /* ie < 7 */
}
Dave Anderson
This is a very interesting hack that I've never seen before. After a little more digging I've found several mentions of this across the web but I still couldn't get it to work... Maybe because I'm using multipleIEs? I'll certainly put this in my toolkit for future reference though.
Prestaul
A: 

This answer may be what you are looking for: http://stackoverflow.com/questions/213309/in-line-css-ie-hack#213458

alexp206
Nope. I've already tried the underscore hack and didn't have any luck. The carat (or almost any other symbol, an asterisk being the most common) targets all versions of IE and won't do me any good.
Prestaul
+3  A: 

I always use the star "hack" to target IE6 specifically, but it does require your browser to be in standards compliant mode (see below).

/* IE6 only */   
* html .myClass {
    width: 500px;
}

I like it because it doesn't rely on parsing inconsistencies in browsers and it validates according to W3C.

As for being in standards compliant mode, you should always add a valid DOCTYPE to your pages as it results in fewer CSS bugs and browser idiosyncrasies. For an explanation of quirksmode and standards compliant mode, check out this article.

You can use this example below to play around with expressions in each browser. I tested it in FF, IE6, and IE7 and it worked as expected. I only wish that SO had syntax highlighting to recognize CSS expressions and mark them as red so you can be reminded that they are evil. Might I ask why you are deciding to use CSS expressions in the first place? A lot of people try to use them to achieve min-width in IE6 but that's not the right solution. If that's the problem you're trying to solve, I've written up an answer in a separate question demonstrating a valid CSS solution for min-width in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <style type="text/css">

        .ie6 {
            display: none;
        }

        * html .ie6 {
            display: expression("block");
        }

        * html .ie7 {
            display: expression("none");
        }

    </style>
</head>
<body>
<div class="ie6">
    This is IE6
</div>
<div class="ie7">
    This is Firefox or IE7+
</div>
</body>
</html>
zwerd328
Worked perfectly, thank you. I'm using an expression to implement max-height on an element. If you've got a max-height solution I'd love to see it! I also have previously posted a min-width solution: http://stackoverflow.com/questions/93274/min-width-in-msie-6#93530
Prestaul
Sorry, I don't know of a max-height technique off the top of my head. I tried to implement it once in a table and gave up because of IE. As for the min-width solution you have, I actually responded to it awhile back: http://stackoverflow.com/questions/93274/min-width-in-msie-6#231174
zwerd328