Which elements can be safely made contenteditable?

Question

I\'ve been working with contenteditable recently within a HTML5 page and encountering bugs when using it with certain elements, and I\'d like to know where and how I can act

Answer 1

In my opinion, I'd say div is the safest bet across the board. Any element you wish to truly edit (be it a span, header, etc), you can place inside the div and edit as if it were just that element. Also, to account for the display:inline issue you mentioned, you could always use float:left or float:right on your editable div to give it an "inline feel" without having it actually be inline.

Hope that helps!

Answer 2

Since this is an evolving feature with, apparent, low priority from the browser vendors support has been sketchy and regressions not uncommon. The current state of affairs is evolving, so check the Googles, CanIUse etc and make sure support is there for your sites visitors, everything else is moot ...

Support in Firefox seems to be solid, at least for some elements, now https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content It works well in Chrome as well as far as my testing goes. And CanIUse looks good: http://caniuse.com/#feat=contenteditable

There are a number of different bugs related to the feature in the different browsers though, but for simple use cases it should be ok now, as of August 2016.