DEV Community

Carlos Caballero
Carlos Caballero

Posted on

Document is editable in RealTime using CSS

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.

Discussion (6)

Collapse
stacy_cash profile image
Stacy Cashmore

Wow, that's so cool!

Collapse
carlillo profile image
Carlos Caballero Author

I'm impressed too!

Collapse
webdeasy profile image
webdeasy.de

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

Collapse
carlillo profile image
Carlos Caballero Author

It's very easy to try!

Collapse
hyungjunk profile image
hyungjunk

Awesome. can't wait to do it myself

Collapse
carlillo profile image
Carlos Caballero Author

Hi!

Only open the element inspector and have fun!!

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

😉