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

1,146

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 data-height=”550″ data-theme-id=”1″ data-slug-hash=”46b115ccbe34d51e2bf1ebfda04438de” data-default-tab=”result” data-user=”robinrendle” data-embed-version=”2″ data-pen-title=”contentEditable

tags” class=”codepen”>See the Pen contentEditable <style&rt; tags by Robin Rendle (@robinrendle) on CodePen.

And it does, as strange as that might be! All you need to do is add the contentEditable attribute to the style tag and make sure it’s set to display: block like so:

<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.

Source: CSS-tricks.com

0 0 votes

Article Rating