How to render CSS conditionally in page

Question

i want to render css in page conditionally based on cookie. at my server side i detect cookie and store the cookie value in variable and now in aspx page i want to render css with the help of if else logic based on cookie value stored in variable at code behind.

suppose in my .cs code behind i store the cookie value like strCountryCookie="GB" and in my aspx page i am trying to render css using if else logic based on cookie value stored in variable.

so here is the way i am trying.

<% 
if(strCountryCookie=="DE") 
{ %>
#acloginpod {
    width:380px;
    background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
    border:1px solid #d3d3d3;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
}
<% } else { %>

it is showing error. so i am not being able to figure out how to render it based on cookie value using if else logic. so please guide me with concept. thanks

You can't do any if/else in the actual css, but you could use if/else in style="" using inline css — Albzi
– Albzi, Commented Sep 26, 2013 at 9:11
CSS cannot decide on external conditions. Decision should be injected externally. — Farshid
– Farshid, Commented Sep 26, 2013 at 13:24

MikeSmithDev · Accepted Answer · 2013-09-26 13:18:11Z

Like others said, you can't use server-side code in CSS. What you did is almost correct, if you make sure the string is accessible from the code behind:

protected string strCountryCookie = "GB";

and then fix your statement

<head runat="server">
    <title>Test</title>
    <% if (strCountryCookie == "GB")
       { %>
       <style type="text/css">
        #acloginpod {
                width:380px;
                background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
                border:1px solid #d3d3d3;
                -webkit-border-radius:7px;
                -moz-border-radius:7px;
            }
       </style>
    <%} %>

Although this will get rather ugly quick... especially if you add a bunch of countries.

Another option is to put all the custom styles into its own style sheet and then dynamically load up the style sheet based on the cookie. You get the benefit of the style sheet being cached in this case:

<link id="_countryStyleSheet" rel="stylesheet" type="text/css" runat="server" />

And then load the style sheet in your code behind:

_countryStyleSheet.Href = String.Format("~/styles/{0}.css", strCountryCookie);

In this example, the style sheet would be named GB.css, etc.

lot · Accepted Answer · 2013-09-26 09:18:58Z

0

You can't use any code in CSS files.

you can put your css into a separate file and then include it or not in the header based on your condition.

approach that I prefer in such cases is to include ALL css markup on each page, but rather assign my elements with different classes based on condition. For you that would mean to use a class .acloginpod instead of id and then assign element with this class only when country is 'DE'.

or if you want different styles for different countries then define element class as following: ">

and in your css define different classes like mydiv-DE or mydiv-GB

answered Sep 26, 2013 at 9:18

lot

1,55118 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to render CSS conditionally in page

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related