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
글쓴이 cor-el 수정일시
모든 댓글 (5)
Put the SCRIPT tag outside of the DIV tag and it'll work.
글쓴이 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;}