Conditionally-Rendering CSS in HTML Head

Conditionally-rendering css in html head

You should use ng-href instead of href.

<link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" />

Example

How to conditionally render CSS and JavaScript inside head element of an HTML

I played around a bit and came up with this gist. From index.html you can see that what you want can be achieved using the ngIf, ngSrc, and ngHref directives as I suggested in my comment. From index-grouped.html you can see that you can indeed group <link> and <script> tags that need to appear under the same condition, but I'm not sure whether my approach works cross-browser. I only tried Google Chrome.

Anyway, having two <head> elements is not valid HTML. You can verify this yourself using an online validator.

I hope this helps.

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.

How to render CSS conditionally in page

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.

Correct way to handle conditional styling in React

If you prefer to use a class name, by all means use a class name.

className={completed ? 'text-strike' : null}

You may also find the classnames package helpful. With it, your code would look like this:

className={classNames({ 'text-strike': completed })}

There's no "correct" way to do conditional styling. Do whatever works best for you. For myself, I prefer to avoid inline styling and use classes in the manner just described.

POSTSCRIPT [06-AUG-2019]

Whilst it remains true that React is unopinionated about styling, these days I would recommend a CSS-in-JS solution; namely styled components or emotion. If you're new to React, stick to CSS classes or inline styles to begin with. But once you're comfortable with React I recommend adopting one of these libraries. I use them in every project.

How can I conditionally render .js file in h:head, if file was not rendered after Full Page Refresh (FPR)?

This seems more like a PrimeFaces issue. In order to force loading of push.js on every request on the same view, you could explicitly add a

<h:outputScript library="primefaces" name="push/push.js" target="head" />

without conditional rendering. If everything went well, i.e. it behaves well as per JSF2 resource handling mechanism, then it should not be included twice at all in cases where it worked properly.

Efficient conditional statement to hide certain layout elements (navbar/footer) on root

As i can't see your application.html.erb ill give an example:

Inside your application.html.erb make 2 body's and make one show on the root page and the other one on all other pages like this:

<% if current_page?(root_path) %>
    <body>
     <div class="container">
      <div class="content">
        <%= yield %>
      </div>
     </div>
    </body>
<% else %>  
    <body>
    <%= render 'shared/header' %>
    <div class="container">
      <div class="content">
       <%= yield %>
      </div>
    </div>
    <%= render 'shared/footer' %>
    </body>
<% end %>

This is assuming that you have your footer and header as partials inside your app/views/shared folder

Conditionally-Rendering CSS in HTML Head