For god sake, don't use this snippet on production. Don't use it at all, maybe (?). But anyway, thats pretty cool!
You can style style tags 😶 You can add contentEditable to style tags also. So, you can build your native & real-time CSS editor with that!
If you paste this code/element at the end of your body tag, you will have your quick native CSS Editor.
<style
contenteditable="true"
style="z-index:1;
position:fixed;
top:0;
right:0;
width:300px;
background:#fff;
min-height:100vh;
display:block !important;
overflow: auto;
padding:14px;
border-left: solid 1px #cccccc">
body {min-height: 100vh;}
</style>
On thing i personally like on this cool snippet is the meta relation between the style and the body, once the code on the style tag gives the body the right size to show the style tag itself, look at the body {min-height: 100vh;}.
Here's a pen if you prefer:
Highlight plugins are welcome ;P
Top comments (7)
You can put the style out of the
bodyand the styles dont affect the samestyle.Thats true. I updated the pen with your suggestion. Thanks Kip!
z-index:9e9; I win 😆
But seriously this is clever and don't use in production!
hahaha ;P
contenteditable="true"is the key. Clever!For development purposes, this is pretty neat! I tried something similar before, by binding an input value to a style tag, but this is waaaaay simpler! Cool trick.