Can you style a noscript element?

Question

Is it possible to use the noscript element in CSS selectors?

noscript p {
    font-weight: bold;
}

Josphinejoss

Anyone facing the same problem should probably have a look at that question. – Moldboard

Answer 1

Yes! You can definitely do that.

In fact, many (all?) browsers support targeting any arbitrary tag using CSS. "Official" tags in the HTML spec only define what a browser should do with them. But CSS is a language that targets any flavor of XML, so you can say foo {font-weight:bold;} and in most browsers, <foo> hello world </foo> will come out bold.

As Darko Z clarifies, IE6/7 do not add arbitrary (non-standard) elements to the DOM automatically from the source; they have to be programmatically added.

Jailer

Answer 2

I have an IE bug to keep in mind. If, like OP, you just want to style text within the noscript tag and not the noscript tag itself, please disregard this..

Say you want to make the noscript tag's background red. In IE8, it will show up with JS enabled. Just the box itself, not the text inside.

So this combination isn't good:

CSS

noscript {
    background-color: red;
}

HTML

<noscript>Turn on your damned JavaScript! What is this, 1999?</noscript>

But this workaround works fine:

CSS

noscript div {
    background-color: red;
}

HTML

<noscript><div>Turn on your damned JavaScript! What is this, 1999?</div></noscript>

Weirdly, I only see this behavior in IE8, not IE7. And who knows about 6..

Aminaamine

It's an IE bug: positioniseverything.net/explorer/ie8stylednoscriptbug/…. Thanks for the workaround through, I was hiding the noscript element with Javascript, which was terribly inefficient. This bug also shows in the IE9 beta – Euratom

Answer 3

In addition to Rex M's answer - IE 6/7 (6 def, 7 maybe?) will not style an arbitrary tag for you. But lucky for you as with all many IE problems there's a workaround.

Say you want to style an element called foo. To get IE to recognise it as a styleable element you need to include this line somewhere in your JS:

document.createElement('foo');

You don't need to append it, just create it.

This will kick IE into styling that element for you with the CSS rule:

foo { font-weight:bold; }

Dentistry

thanks, but I have to disagree with your point about "as with all IE problems theres a workaround."... :p – Josphinejoss

Given that the question is about the noscript element, your workaround wouldn't seem very useful. – Counterpoise

@Counterpoise if you substitute foo with noscript then it is. I'm not sure I understand your point. – Dentistry

@DarkoZ: Your solution requires JavaScript. If JavaScript is disabled, the solution won't be able to run. If JavaScript is enabled, it runs, but the content is hidden anyway. – Counterpoise

@Counterpoise couldn't see the forest for the trees! Well pointed out – Dentistry