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

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:

<p>content goes here</p> <style contenteditable> p { color: black; } </style>

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:

See the Pen pen#PwLXXP by Jake Albaugh (@jakealbaugh) on CodePen.

The post Did you know that style and script tags can be set to display: block? appeared first on CSS-Tricks.