Do You Put Ie Conditionals in The CSS File or in The HTML File

Do you put IE conditionals in the css file or in the html file?

The IE conditional(s) go in the HTML, and should be used to include an additional CSS file that will overwrite CSS as needed for IE hacks.

Example:

<head>
    <style type="text/css">
    @import url(/styles.css);
    </style>
    <!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->
</head>

Conditional stylesheets from Chrome-IE compatibility

As I mentioned in the comments, you missunderstand the conditional option. The IE7 will load both files and invoke the deinitions. For isolationg css style you have to mark the class names with special names.

Here an example:

Imagin there is a css rule:

.headless .content {background-color: yellow;}

All browser will understand this. If you want to change the background only for IE 7 you habe to define the rule as follow:

*:first-child+html .headless .content {background-color: red;}

How does it work:

Chrome browser:

.headless .content is a valid statement for me, so I will invoke it

:first-child+html .headless .content

is an invalid statement for me, so I will ignore it.

IE7:

.headless .content
is a valid statement for me, so I will invoke it

:first-child+html .headless .content
is also a valid statement for me, so I will invoke it either. And because the last statement does always win, I coulor the background red.

The keyword for it "cross browser hacks"

How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?

You can use IE conditional comments such as this:

<!--[if IE]>
    According to the conditional comment this is IE<br />
<![endif]-->

So you could use something like this:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 10]>
        <link href="iestyles.css" rel="stylesheet" type="text/css" />
    <![endif]-->
</head>

You can learn more about them here

Is there a way to do browser specific conditional CSS inside a *.css file?

There is a way to do it in IE by taking advantage of bugs in the browser and @import. The best method I've seen is here, courtesy of bobince (and definitely beat out my answer, heh).

In general though, no. Even conditional comments are browser-specific to IE.

Using IE conditional comments inside a stylesheet

Conditional comments do not work within stylesheets. Instead, you can use conditional comments in your HTML to apply different CSS classes or IDs to elements that you can then target with CSS.

For instance:

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->

Also, there are tools such as Modernizr that do feature detection in a very similar way (by adding classes to the <html> element). You can use it to progressively enhance your design/script for newer browsers while still supporting older browsers.

Can you use if/else conditions in CSS?

Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:

<p class="normal">Text</p>

<p class="active">Text</p>

and in your CSS file:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

That's the CSS way to do it.

Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.

A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).

With them you could do something along the line:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php file, that looks something like this:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.

Different CSS files for Different Browsers

I know only for ie:

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

also js detection

Else in html conditional for ie

The  will ensure that other browsers see the content between it and the next <!--. Notice how the syntax highlighter on Stack Overflow does not highlight the content as an HTML comment — that's how you can tell.

A more common variation that's somewhat shorter:

<!--[if gt IE 8]><!-->
  this is all browsers: IE9 or higher, firefox, chrome, etc.
<!--<![endif]-->

Return conditional formatting on html with external .css file

Another approach could be to add classes like .valid and .invalid to the input fields on posting to signify the validity of the fields. This will also circumvent any specificity issues you might be having with your original approach.

input.invalid {    border: 2px dashed red;}
input.valid {    border: 2px solid black;}

<input class="invalid" type="text" name="name" placeholder="Invalid" /><input class="valid" type="text" name="name" placeholder="Valid" />

Do You Put Ie Conditionals in The CSS File or in The HTML File