0

I have created a CSS file (style1.css) which I am linking under the <head>. The following generated HTML was made using a template, so basically I have no idea why the stylesheets are nested inside the <noscript> tag (if somebody could explain it me why that would be appreciated).

<head>      
    <noscript>
        <link rel="stylesheet" href="css/style1.css" />
    </noscript>
</head>

Here are some issues that have been troubling me for a few days:

  1. When I edit the stylesheet, the changes are not reflected when I run my code.
  2. When I comment out this link, somehow my website is referring to the same CSS file - I don't know from where this is referring from. This is the only place where I have linked the CSS, but it still appears to be inheriting it from somewhere which I am unable to figure out.
  3. I tried this without <noscript>. In that case changes are reflected when I run the code but then again on editing it further, the changes aren't reflected. The crazy stuff is when I include it under <noscript> again, editing is reflected but the changes that I have made in the first attempt are lost.

I fail to understand this weird behaviour, but I suspect that this has something to do with the <noscript> tag in the HTML. I'm using JavaScript to run animations on my website, and JavaScript was enabled in my browser when I was testing.

Ryan B
  • 3,364
  • 21
  • 35
Shivam Soni
  • 29
  • 1
  • 6
    You use the `noscript` tag. And you have JS enabled. Everything inside the `noscript` tag won't be run – Niels Sep 27 '13 at 14:46
  • 1
    These are the styles that would be loaded if the user doesn't have javascript – user1477388 Sep 27 '13 at 14:46
  • 3
    Sounds like a caching problem. When you make changes to your css, try refreshing the page with CTRL+F5 – jonhopkins Sep 27 '13 at 14:51
  • You could understand the difference between CTRL+F5 and CTRL+R (or F5) in http://stackoverflow.com/a/385384/1716542. Former refers to force cache updation and the latter refers to only HTML page refreshing. – RAM Sep 27 '13 at 14:54
  • @neils yeah i know that noscript content is triggered if js is disabled but thats the question,js is enabled and it is still accessing that css which i have included in noscript. Is it possible that it is referring it from cache..? – Shivam Soni Sep 28 '13 at 07:13
  • @jonhopkins no success in dat but indeed it sounds like a caching issue – Shivam Soni Sep 28 '13 at 07:23

2 Answers2

1

I would avoid using <noscript> tag this way. There have been discussion about it. Take a look at this article.

A better solution is feature detection.

In your style1.css, you define rules suffixed with a class name .nojs like body.no-js h1.no-js etc.

Then simply remove that class from the DOM element via JavaScript/jQuery.

$('.no-js').removeClass('no-js');

In this way, when there is no JavaScript, the code above will fail to execute, the rules defined in your style1.css become effective.

Better yet, use Modernizr which is a fully featured library, a must-have for all my websites.

Blaise
  • 21,314
  • 28
  • 108
  • 169
0

Take away the noscript tag, it is only for executing code when javascript is not enabled (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript).

As for the changes not being reflected, your browser has probably cached the CSS file, to get round this you can use a force-refresh, which can be done by pressing the control key and the F5 key together (CTRL+F5) in most browsers on windows.

The template also probably has its own CSS files that are loaded, use your browsers development tools to see which resources are being loaded with the page.

Sean Airey
  • 6,352
  • 1
  • 20
  • 38