LebGeeks

Joe

Member

Conditional CSS?

I have an HTML page that goes like this:

<div id=my_id>
   <include file="{template_variable}" cache="1" />
</div>

{template_variable} is generated by a PHP template engine given certain parameters.

Here goes my question:

How can I modify the CSS of #my_id depending on the {template_variable} value?

Hope I am clear enough :-)

Kassem

Member

Re: Conditional CSS?

hmmm, I think that requires some Javascript or jQuery...

if(template_variable == value)
      $(#my_id).css();
else {
      //code here
}

That's how I would do it, am not sure though...

Joe

Member

Re: Conditional CSS?

Thank you :)

Yet I'm trying to avoid javascript. What I am really looking into is some CSS hack (or not) in order to give conditional values to elements.

pikatore

Member

Re: Conditional CSS?

There's no way to do it without using Javascript/Jquery unfortunately :(

Ayman

Member

Re: Conditional CSS?

True, as Pikatore said, and as far as I know, CSS is not capable of such a conditioning, Javascript will be your only choice.

rolf

Member

Re: Conditional CSS?

You can embed PHP in your css.
What you need to do for that is rename your css to a .php file, then make sure it is sent as text/css by setting it's MIME type to text/css using the php header function.
something like that:

<?php
header("content-type:text/css")
?>

Although you need to check coz i forgot the syntax.
But... I'm not sure I undertand you problem properly, but why dont you do this:

<div id=my_id class="{template_variable}">
   <include file="{template_variable}" cache="1" />
</div>

Then in the css:

div.template_variable#my_id {
        css....
}
div.other_template_variable#my_id {
        css....
}

Not sure the code above works, but then you could try this too:

<div id="my_id__{template_variable}">
   <include file="{template_variable}" cache="1" />
</div>

Then:

div #my_id__template_variable {
        css....
}
div #my_id__other_template_variable {
        css....
}

And you can also use this:

<div id=my_id template="{template_variable}">
   <include file="{template_variable}" cache="1" />
</div>

Then:

div #my_id[template="template_variable"] {
        css....
}
div #my_id[template="other_template_variable"] {
        css....
}

This is valid CSS feature, but I'm not 100% sure the syntax is correct.

Note: to apply a style block to several rules, do this:

div.someclass, div#some_id, #whatever {
    css....
}

Last edited by rolf (May 3 2010)

pikatore

Member

Re: Conditional CSS?

Wow... that blew my mind. This is why I'm not a programmer!

Kassem

Member

Re: Conditional CSS?

Wow... that blew my mind. This is why I'm not a programmer!

lol it's just CSS man!
btw, if you're not a programmer then what are you?

pikatore

Member

Re: Conditional CSS?

I am a businessman first, a designer second I guess X)

Joe

Member

Re: Conditional CSS?

Actually the first two wouldn't work (in my case), because you cannot simply add other_template_variable as a selector. There are litterally thousands of files that can be included from the variable, it is not easy renaming them.

The third one seems interesting, I'll look into it tomorrow.

As usual rolf, thank you for your input helps a lot man

Requiem

Member

Re: Conditional CSS?

You should split your CSS file to small parts and keep the variant parts in another file for same classes or ids
When you do that you control inclusion from PHP or any Server side script. Its alot better to do it that way cuz then later on you can add later classes without modifying anything.
Although as said above it can be used to generate a whole CSS, but why would you want to modify major parts directly. If you want to modify certain things based on interactions use javascript. If not control it by different parts say for example
general-layout.css
red.css
blue.css
green.css

in your script you can include general-layout for common things then load red.css for example for a red layout
red, blue and green might have same class or id but with different attributes.

rolf

Member

Re: Conditional CSS?

As usual rolf, thank you for your input helps a lot man

No problem :)

Wow... that blew my mind. This is why I'm not a programmer!

I think you're a fine programmer!

Joe

Member

Re: Conditional CSS?

I like Requiem's idea. Problem is I am not writing a website from scratch. Am maintaining a full grown website that has hundreds of files. CSS is one BIG file, it would take ages to change.

Anyway, finally we decided to go with jQuery. Nice and easy. Thanks for your concern all ;)