Content Editable <Style> Tag

Just get the post of This Page does not use JS" by Joel. It shows the ability of use <style> tag in the and make the content of style editable without JavaScript control.

"We forget that it’s just another HTML element." - By Joel

This can be a method to display the UI guideline as this method allows to display the expected style as the source CSS code displaying inside.

Below is a demo that I played with the style tag on codepen.io. By adding the attribute "contenteditable" , you can edit the style and preview the outcome immediately on the page.

See the Pen Style Tag for CSS Style Demo by Millie (@witmin) on CodePen.

Posted