Document is editable in RealTime using CSS

carlillo profile image Carlos Caballero ・1 min read

The other day reading my twitter timeline I found a trick by an authentic CSS wizard that left me impressed.

The tweet is in Spanish but I have to admit that he deserves a retweet for us and he will surely be a great professional to follow (although he writes in Spanish).

I leave an animation of what he can teach us modifying a simple property of CSS:

document.designMode controls whether the entire document is editable. Valid values are "on" and "off". According to the specification, this property is meant to default to "off". Firefox follows this standard. The earlier versions of Chrome and IE default to "inherit". Starting in Chrome 43, the default is "off" and "inherit" is no longer supported. In IE6-10, the value is capitalized. - MDN (https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode)

Thanks to @midudev.

Originally published at https://twitter.com/midudev/status/1132918283332706304.

Posted on by:

carlillo profile

Carlos Caballero


I'm PhD. in Computer Science from Málaga, Spain. Currently, I am teaching developers and degree/master computer science how to be experts in web technologies and computer science.


Editor guide

I'm impressed too!


That looks pretty cool! I want to try it! :D


It's very easy to try!


Awesome. can't wait to do it myself



Only open the element inspector and have fun!!

I've been using this week in my class with my students.