View Full Version : style,script{display:block;} ??

01-03-2008, 10:27 AM
Do the browsers use display property to hide these tags?

Has anyone tried a CSS like


01-03-2008, 10:05 PM
You can only style the content of the <body> of the page.

style and script tags belong in the <head> of the page and therefore can't be styled.

01-03-2008, 10:48 PM
style and script tags belong in the <head> of the page and therefore can't be styled.

Well, not quite. You can put a script anywhere in the document. Try styling that and you’ll see what happens.

01-04-2008, 10:02 AM
Exactly, we don't have an option to edit javascript in firebug. Using this technique we can do some tricks (say some alerts for testing) on run just like editing html. :)

01-04-2008, 08:04 PM
Well, not quite. You can put a script anywhere in the document. Try styling that and you’ll see what happens.

I didn't say that you can't put a script in the body of the page - just that scripts belong in the head of the page because you shouldn't be polluting the body content with something which is not a displayable element.

With the exception of the document.write command (which should not be used anyway) it shouldn't make any difference whether a script is in the head or body of the page except with regard to timing issues as to when you want it to run. While some people place their script immediately before the </body> in order for it to not have to wait for all the images to load as would be the case if they put it in the head and triggered it with window.onload, that location is really no different from having it in the head of the page in so far as what it outputs to the web page is concerned. All outputs to the page from JavaScript should be done using either the appropriate DOM commands or innerHTML and it is the elements created from those commands that need to be styled and not the <script> tag.

01-04-2008, 11:49 PM
I disagree. I find it very useful to place scripts in my body tag for DOM reasons. Aka, document.getElementById().

Yes, I could send a callback to document.addEventListener("load", callback, false), but sometimes doing stuff like that is a bit overkill and silly, like when your whole code would have to be put into a callback.

02-01-2008, 01:35 AM
There are legitimate reasons to place script blocks inside the body tag. Some of them were already mentioned. An additional one is that if you place your script tags at the bottom of the document, the page will appear to load faster. When the script tags are in the head, all the JS must be loaded and parsed before the browser continues on to render the displayable elements.

02-01-2008, 03:09 AM
I recall seeing experiments where the author set head, style { display: block }, and in some browsers, that would work.

02-01-2008, 03:16 AM
Anyway, to answer the original question: IIRC it works. Sort of. In some browsers (and a bit differently depending on which browser...). The head element has display: none; as well, though, so you need to deal with that. But I might be mistaken, that these are hard coded. I know for sure, though, that I have had pretty much the entire document tree render in at least Opera, including children of the head element.

Felgall: There's nothing about the head element that makes it a special non-rendering container - it has meta-information semantics, but that's got nothing to do with it's presentation. Those semantics are why it defaults to not render, though. Whether the non-rendering is hard coded (I believe it is in IE) or through user-agent default style sheet is another question. However, it's just an element in the node tree. CSS operates on the entire node tree. So CSS can govern also the rendering or non-rendering of the head element and descendants in theory.