/    Sign up×
Community /Pin to ProfileBookmark

Noscript, Styles, and Standards

Copy linkTweet thisAlerts:
May 02.2010

Got a rather annoying problem here. I am validating some pages and i just found out that it is not valid to have the <noscript> tag within the <head> tag…
However, the issue is that i am using the noscript tag to then show a <style> tag if javascript is disabled to clean up the page content and make it look pretty for those with it off… But the <style> tag is not valid within the <body> tag, but since the <noscript> is not valid within the <head> tag i am at a catch 22.
I found that a <noscript> tag is then valid in the <head> if you enclose it within an <object>, for whatever reason. But then it complains the the <style> tag is not valid within the <object>!
Unless there is a legit workaround (no messy javascript solutions) i believe this is one of the cases where ignoring the validation is the best approach.
So, anyone have any ideas?

Sample code:

[code=html]
<head>
<noscript> <—- Does not validate!
<style type=”text/css”>
some css styling fixes for no javascript…
</style>
</noscript>
</head>
[/code]

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991May 02.2010 — There is a very simple JavaScript solution, that is to add a class to the body tag, and remove it with JavaScript.<i>
</i>&lt;script type="text/javascript"&gt;
onload = function () {document.getElementsByTagName("body")[0].className = "";};
&lt;/script&gt;
&lt;/head&gt;
&lt;body class="nojs"&gt;
Not extremely elegant but ok.

This problem occurs another time as well, when trying to redirect when no JavaScript is available. <noscript> is invalid in the head, and a meta redirect is invalid in the body. There is no workaround.

BTW, the worst thing in the world you could do in my opinion, is some sort of hideous object enclosing the noscript tag to make it validate. That sort of cheating just fools the validator, it makes for horrible code, and I would rather have a warning from the validator than trick it like that.

And I know this is unrelated to your problem, but occasionally such problems can be avoided by designing from the bottom up and following the [url=http://www.alistapart.com/articles/understandingprogressiveenhancement/]progressive enhancement[/url] paradigm.
Copy linkTweet thisAlerts:
@ScottyBoyMay 04.2010 — There is a very simple JavaScript solution, that is to add a class to the body tag, and remove it with JavaScript.<i>
</i>&lt;script type="text/javascript"&gt;
onload = function () {document.getElementsByTagName("body")[0].className = "";};
&lt;/script&gt;
&lt;/head&gt;
&lt;body class="nojs"&gt;
Not extremely elegant but ok.
[/QUOTE]

Does that work when JavaScript is turned off? I thought that the whole point of the<noscript> tag was to show something when JS is off.
Copy linkTweet thisAlerts:
@Declan1991May 05.2010 — When JavaScript is turned off, the body tag has a "nojs" class, so this CSS targets it..nojs any_element_on_the_page {
/* Whatever */
}When JavaScript is enabled, the class is removed, so that CSS won't target it. It's the opposite of noscript in a way, but it works.
×

Success!

Help @Jarrod1937 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...