javascript showing on page
I had one our websites showing the javascript on the page. After some searching I found out that the script tag inherits "display:block" and shows it's content. IMO that's a bit weird, but other Browser show the same behavior. My question is not to avoid this as I can easily avoid it but if this should be considered a bug in Firefox?
An example can be found here: http://test.timo-design.nl/firefox/scriptshowing.htm
HTML of this test page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<META http-equiv="Content-Script-Type" content="type">
<title>Test Page
</title>
<style type="text/css">
.Main *{display:block; background:#f80;}
.Main h1{background:#0f0;}
</style>
</head>
<body id="Body">
<div class="Main">
<h1>Script test</h1>
<script>
//This is an inline script which shows up in the page
var x = 1
</script>
</div>
</body>
</html>
Thanks, Timo
Modified by cor-el
All Replies (5)
Put the SCRIPT tag outside of the DIV tag and it'll work.
Modified by ErickRibeiro
I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector:
.Main *{display:block; background:#f80;}
Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal.
https://developer.mozilla.org/docs/Web/CSS/Universal_selectors
ErickRibeiro said
Put the SCRIPT tag outside of the DIV tag and it'll work.
Thanks, I know how to avoid this, it was more a question of this behavior is correct or not.
jscher2000 said
I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector: .Main *{display:block; background:#f80;} Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal. https://developer.mozilla.org/docs/Web/CSS/Universal_selectors
Agreed.
I now found in: http://www.w3.org/TR/html5/scripting-1.html
"... script ... The element does not represent content for the user."
But in: http://w3c.github.io/html-reference/script.html
I see,
Typical default display properties script { display: none; }
So it's a bit vague IMO :-)
Ok, there's much more you can show I wouldn't expect to work :-) I guess I'll have to live with it ;-)
head, title, meta, link, script{color:#000; display:block; width:100%; min-height:1em;}
head{background:#FF8; padding:0.3em;}
title{background:#f00;}
meta{background:#0f0; margin-bottom:0.3em;}
link:link{background:#08f; margin-bottom:0.3em;}
script{background:#00f; margin-bottom:0.3em;}