Did you know that style and script tags can be set to display: block?

Avatar of Robin Rendle
Robin Rendle on (Updated on )

The other night, Amit Patel mentioned that you can set script tags in HTML to display: block with CSS and then edit that code inline with the contentEditable attribute. This means that you can then see it all update live in the browser as you type. Shortly after, Marius Gundersen replied that you can do this with the style tag as well.

All of this is such a weird concept to me that I just had to make a demo to see if it worked:

style {
  display: block;
}

Why would we want to do this? Well, I’m not entirely sure. But it is certainly a neat demo. This also reminds me of the ever-so bizarre and brilliant demo Jake Albaugh made a while back, which just happens to be one of my favorite pens of all time: