display: contents as a possible solution for subtree visibility

Currently, to debug fallback content, authors have to alter the canvas 
tag name and/or remove fallback content from the canvas in order to view 
it. They can also use a browser that does not support Canvas.

Over at www-style, we may have hit on a CSS attribute which will benefit 
Canvas authors. At present, it's being floated as display: contents. The 
name is still unstable.

Code example:
<canvas style="display: contents"><div>This is now visible fallback 
content</div></canvas>
<audio style="display: contents">I am visible fallback content too!</audio>


Currently, for debugging, I use IE9, and simply switch it over to IE8 
compatibility mode, when I want to debug my fallback content.

I encourage implementers to consider how this feature may be added to 
their code base.

Tab Atkins responded with some ideas on how to implement it in WebKit:
"You would ... apply a fresh shadow subtree that just grabbed the 
light-DOM children."
http://lists.w3.org/Archives/Public/www-style/2012Feb/0127.html

This would have some impact on the manner in which setElementPath is 
implemented. I'd recommend the paths be cached, as display: contents 
does not remove any elements from the DOM. In that instance, if display: 
were set back to inherit, inline or block, the bound paths would once 
again be exposed. This process can happen as the DOM children are 
converted between "light" and "heavy" DOM nodes.

-Charles

Received on Thursday, 2 February 2012 18:51:07 UTC