DEV Community

Michael Z
Michael Z

Posted on

5 2

HTML's hidden realtime CSS editor

Credit goes to

If you prefer seeing it and the code in action, check out the codepen

For everyone who can not watch the video or play with the codepen right now.

Start by creating the following markup

<style>
  html {
    background: blue;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Since <style> is just another HTML tag, it follows the same rules as other HTML tags. If you check the CSS rules in the devtools you will see that display: none gets applied to the style tag. Sooo, let's override it.

<style style="display: block;">
  html {
    background: blue;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Sweet, we can now see the contents of the style tag on the page!

Finally let's try adding the contenteditable attribute to it.

<style style="display: block;" contenteditable>
  html {
    background: blue;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

This will let us type in the style field.
And here comes the twist: The styles get re-evaluated while you type!

In the result, try changing background: blue; to background: green; and see what happens.


After I saw this, I immediately thought "So what about the script tag?".

Everything works the same except that the script unfortunately does not get re-evaluated when you change the content.

Conclusion

There is probably no use case for this, but it is still fun to explore these kinds of things.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more