How to add link tag inside noscript tag its showing

Question

I added tag inside the tag as following

<noscript>
    <link type="text/css" rel="stylesheet" href="${staticFilesUrl}/css/noscript-overrule.css" />
</noscript>

but in firefox when the javascript is enabled I see something like this

<noscript>
      &lt; link type="text/css" rel="stylesheet" href="/static/snsbank/css/noscript-overrule.css" /&gt;
</noscript>

event I tried to put style tag inside the noscript tag still in firefox I got the following result

<noscript>
    &lt; style &gt; #whiteBox{ width:30%; &lt/style&gt;
</noscript>

can anyone tell me how can I avoid this?

Answer 1

CSS is not a script, the <noscript> tag is used for javascript in case it is disabled. Why are you doing that? It is not used for CSS like you are doing.

Answer 2

You ask in a comment: "if I want to use one css file only if javascript is disabled then what should I do?"

Two ways at least (probably more):

1. Have a default stylesheet that is for without javascript that always loads. Then, if javascript is enabled, use a <script> tag in the head to load a different stylesheet after the default to override the styles.

2. If you just have a few things that change, have one style sheet and have a class on your body of NoJavascriptEnabled that you use to target those few styles when javascript is not enabled, and then use javascript to remove that class if javascript is enabled.

Answer 3

<link> is only allowed in the head section of an HTML document, not in the body. Are you placing this code in the head of the document?