css style if else condition

Question

I would like to use conditions in my css.

The idea is, I have a variable that I replace when the site is run and generate the right stylesheet.

I want that according to this variable the stylesheet changes!

It looks like:

    [if {var} eq 2 ]
         background-position : 150px 8px;
    [else]
        background-position : 4px 8px; 

Can this be done? Do you do this?

thanks.

Answer 1

As far as i know, there is no if/then/else in css. Alternatively, you can use javascript function to alter the background-position property of an element.

Answer 2

Set the server up to parse css files as PHP and then define the variable variable with a simple PHP statement.

Of course this assumes you are using PHP...

Answer 3

I cannot be done in CSS in general!

You have the browser conditionals like:

/*[if IE]/ 
body {height:100%;} 
/*[endif]*/

But nobody keeps you from using Javascript to alter the DOM or assigning classes dynamically or even concatenating styles in your respective programming language.

I sometimes send css classes as strings to the view and echo them into the code like that (php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

Answer 4

No, 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.

Also, there are CSS preprocessors like Less, but little of them have support for conditional statements, and you have the hassle to run your stylesheets through their processors.

Alternatively, 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.

Cheers,

Answer 5

You could create two separate stylesheets and include one of them based on the comparison result

In one of the you can put

background-position : 150px 8px;

In the other one

background-position : 4px 8px;

I think that the only check you can perform in CSS is browser recognition:

Conditional-CSS

Answer 6

This is a little extra info to the Boldewyn answer above.

Add some php code to do the if/else

if($x==1){
  print"<p class="normal">Text</p>\n";
} else {
  print"<p class="active">Text</p>\n";
}

Answer 7

Yet another option (based on whether you want that if statement to be dynamically evaluated or not) is to use the C preprocessor, as described here.

Answer 8

(Yes, old thread. But it turned up on top of a Google-search so others might be interested as well)

I guess the if/else-logic could be done with javascript, which in turn can dynamically load/unload stylesheets. I haven't tested this across browsers etc. but it should work. This will get you started:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml