Conditional CSS in CSS Not Working

conditional css is not working

Conditional comments are for use inside HTML documents, not inside CSS files. IE's HTML parser will interpret the rule inside the comment - as far as I know, there's no equivalent logic in its CSS parser.

The following code will work:

<!--[if IE 6]>
<style type="text/css">
div.box {
         width: 600px;  
         padding: 0 100px; 
}
</style>
<![endif]-->

In most cases, it's better to use the conditional comment to include an external stylesheet, rather than just wrapping a block of inline styles, like so:

<!--[if IE 6]>
<link rel="stylesheet" href="/css/IEpatches.css" type="text/css" media="screen" charset="utf-8"/>
<![endif]-->

Edited to specify IE6 only as requested in the question.

Conditional CSS in CSS not working

Have you read the usage file?

According the website, you have to write the css and compile it using its online tool and then you have include c-css.php to get it working.

@import "/media/css/c-css.php";

According to example from this website, this should fix the problem.

.onetoone{
    position: relative;
    margin: 10px auto 5px;
    padding: 20px;
    width: 878px;
    border: 1px solid #AAAAAA;
    behavior: url(PIE.htc);
}
[if !IE] .onetoone {
    height: 1241px;
}

[if IE] .onetoone {
    height: 241px;
}

After you compile it becomes a huge file like this one here and you include like the way I said above.

However, I would go with the good old fashioned way I knew. And it was to include different css with the conditional CSS comments

<!--[if IE]>
   <style>
      .onetoone {
        height: 241px;
       }
   </style>
<![endif]-->

<!--[if !IE]>
   <style>
      .onetoone {
        height: 1241px;
       }
   </style>
<![endif]-->

Should work either way.

Update

Instead of loading different style like the one in my example load different file in the end after loading all the main css files in this way.

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

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.

Conditional styling not being applied to a div

I would use a method for this

methods: {
  getStyleClasses() {
    let className = ''
    if (
      this.index === this.tasks.length - 2 ||
      this.index === this.tasks.length - 1
    )
      className = className.concat(' p-col-12')
    if (this.index === 0 || this.index === 1)
      className = className.concat(' dp-block')
    return className
  },
},

And use it like so

<div
  class="row"
  v-for="(task, index) in tasks"
  :class="getStyleClasses()"
  :key="task"
>
  <Card style="width: 25em; vertical-align: middle;">
        // card content
  </Card>
</div>

Conditional HTML statements not working as expected

It looks like you are testing with the IE 10 or IE 11 browser. That's why you are not able to see the results properly.

Conditional comments are not supported in IE 10 and IE 11.

If you want to apply custom CSS for it too then you need to use media queries.

Test code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%-- Below code is for browsers except IE --%>
    <![if !IE]>
        <link href="css/normal.css" rel="stylesheet" />
    <![endif]>
    
     <%-- Below code is for IE 7, IE 8, IE 9 --%>
    <!--[if gte IE 7]>
        <link href="css/ie_specific.css" rel="stylesheet">
    <![endif]-->

    <%-- Below code is for IE 10, IE 11--%>
    <style>
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
    {
     
        body 
        {
            background-color: red;
        }
    }
    </style
</head>
<body>
   
    <form id="form1" runat="server">
        <div>
            <h2>Hello... This is sample text</h2>
        </div>
    </form>
</body>
</html>

Test result:

You can try to change the Document mode in the IE 11 browser developer tools to check the results for the older versions of the IE browser.

I hope above example will help you to clear the confusion. Let me know if you have any questions.

Css transition not working on conditional rendering in React

It works for me.
Try like this.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [checkBox, setCheckBox] = useState(false);
  return (
    <div className="App">
      <input
        type="checkbox"
        checked={checkBox}
        onClick={() => setCheckBox(!checkBox)}
      ></input>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div className={checkBox ? "animate show" : "animate"}>
        Hey the checkbox is checked
      </div>
    </div>
  );
}

And in the css file...

.animate {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
}
.show {
  height: 18px;
}

Please confirm here.

https://codesandbox.io/s/goofy-moon-ipe7t

Mailchimp Outlook Conditional CSS not taking effect

So I don't have enough rep to post a comment yet (otherwise I would ask you there) to posts an example of your HTML as well. So please do so if possible so we can have a working code snippet.

I have had some success with this by Adding your CSS above below the opening tag of your HTML. This is a very broad question though as it is impossible to tell why your CSS will not render in a specific mail client without seeing the markup it is meant to select.

That being said I would suggest you try this

<!--[if mso]><style type="text/css">.class-name {  color: red!important;}</style><![endif]-->