CSS if statements… is it right?

I'm new with the conditional CSS. My question is, is it right to use it for dealing with cross-browsers issues?

For example:

#header
{
    [if IE 7] width: 600px;
    [if Webkit] width:300px;    
}

Editor's note: OP is most likely using this: http://www.conditional-css.com/

Use conditional statements for the actual CSS files (or classes) but on the html.

Like this for example:

<!--[if lte IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->

This is written on the html file, not the CSS file!

The format you posted I think doesn't actually work and I bet it doesn't validate so it is not standard.

It's become common to use variations of this technique for IE, I believe it was made popular by HTML5 Boilerplate [citation needed]:

<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->

Now you can target elements without IE hacks in your main CSS files like so:

.ie6 .header li {
    /* some ie6 only styles here */
}

To me, this is a lot more maintainable than using separate stylesheets, but suffers the very mild setback of other browsers reading (but not applying) the IE styles.

If you are having trouble with Webkit, you are most likely doing something wrong. Not Absolutely, but it's very likely.

EDIT: Many browsers allow proprietary extensions that let you set rules that will only apply to that browser. Example:

-moz-property {}
-webkit-property {}
-o-property {/* Opera */}

Note that this does not mean you can apply any CSS property, you will have to see what is available.

Best reference I could find quickly: http://reference.sitepoint.com/css/vendorspecific

_{SO Editors, feel free to replace this link if there is a better reference}

As to the validity of your statements, jackJoe's got a nice answer. But, it's not generally good practice. It's a better idea to, as far as layout goes, get a good layout that works cross browser and not muck around with browser specific layout problems. Instead, worry about feature-specific issues. There are definitely times when you just can't fix an IE6 issue and at which point you probably should apply some browser specific code so you don't give yourself a headache.

In general, though, that's just not even a good idea.

Side Note: Why in the name of Tim Berners-Lee are you still trying to support IE5?

No it's not, You Can try these

For IE 7 & 8:
width: 600px\9;
For IE10 :
width:300px\0/;

For all browsers:
width: 600px;

But if you want it on all three browsers separately IE,GC,FF then use it like this
width:300px; width: 600px\9; width:300px\0/;
I Think this is what you were looking for!

来源：https://stackoverflow.com/questions/6101314/css-if-statements-is-it-right

标签

css

cross-browser