← ← ← 5/2/2022, 4:41:52 PM | Posted by: Felippe Regazio
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: