CSS with If/Then Browser Logic

CSS with if/then browser logic

Here's an example how you can include an IE6-specific CSS to override specific CSS classes for IE 6 or lower:

<link rel="stylesheet" type="text/css" href="/css/screen.css" title="MySiteStyle" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/screen-ie6.css" title="MySiteStyle" media="screen" />
<![endif]--> 

Alternatively, you can do it on per-element basis like this:

<!--[if (!IE) | (gt IE 6)]>
<div class="header">
<![endif]--> 
<!--[if lte IE 6]>
<div class="ie6_header">
<![endif]--> 

MSDN has some more details about IE Conditional Comments support.

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.

CSS Equivalent of the if statement

No. But can you give an example what you have in mind? What condition do you want to check?

Maybe Sass or Compass are interesting for you.

Quote from Sass:

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

can we give if else condition in css without using any framework

Simply NO. CSS does not support logics.

So you will need a css preprocessor like SASS/SCSS for simple logics like this.

Sample SCSS [This might not give the exact answer - But just to get an idea],

$isBackImgTower: true;

div {
  @if $isBackImgTower == true {
    color: #fff; 
  } @else {
    color: #000;
  }
}

But why not simply use a class with background-image property? Is there any reason?

Example,

div {
    color: #000;
}
div.isBackImgTower {
    background-image:url('images/tower.jpg');
    color: #fff;
}

HTML conditional statement if IE

Conditional comments were disabled in IE10 so they will not work in IE11.

Source

In order to have conditional statements you can use Javascript to detect the browser. Since I see Mootools in your screenshot, here is a guide on how to do that.

Or, here is a JS library that is pretty good: WhichBrowser

That being said, browser sniffing is not recommended. Look into Feature Detection instead.

Can a HTML/CSS statement be a Javascript Condition?

I think the answer is yes. But your assignment is not right i guess. What you mean is check background color is currently red then change it to yellow? I tested in a jsfiddle:
https://jsfiddle.net/r3y72njf/24/. You can also check here: https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp. One more thing, in your comparison, you must use '==' or '===', '=' mean assignment.

if ( document.getElementById('box').style.backgroundColor  === "red") {
    document.getElementById('box').style.backgroundColor  = "yelloy"
} else {
    document.getElementById('box').style.backgroundColor  = "green"
}

How do I detect the user’s browser and apply a specific CSS file?

If you have to detect browsers just to apply CSS, then you might want to rethink your CSS before going to browser-specific stylesheets. All it takes is for one browser to mimic another's user agent string, or a new version to be released, and everything breaks. Use the current standards and validate your code (http://validator.w3.org/), and you'll have to worry about far fewer cross-browser issues. Even just using <!--[if IE]><![endif]--> without a version number could break the layout in later versions.

That being said, if you want to style the page differently based on what CSS features are available, take a look at Modernizr. This way, you're only checking features, which won't be broken if a new version of the browser is released.

If all else fails and you really need to detect the visitor's browser, try jquery.browser. It's built into jQuery, and is simple to use. http://api.jquery.com/jQuery.browser/.

browser type detect in css

See this similar question

You can use special commenting for IE detection in the CSS, or you can do the logic using javascript and apply the CSS classes programmatically (for example using JQuery).

conditional statement for screen resolution?

CSS 3 introduces media queries, but it is new and support is not all that widespread yet (Firefox only introduced it in version 3.5, for instance, and Internet Explorer won't get it until version 9) so build with progressive enhancement in mind. CSS Tricks has a tutorial for providing different CSS for different browser window sizes (which is a more useful metric then display resolution).

You can test support for your browser.

---

Related Topics