[css4-ui] backdrop for fullscreened elements and modal dialogs/lightboxes

Hi,

Suppose a Web author uses the Fullscreen API[1] to fullscreen an element
with background:transparent. There are a few things we want to be able
to say at this point[2]:

 * the element takes up the entire screen
 * the background of the element is *not* the user's desktop & open
   windows, for the obvious security reasons
 * the only parts of the document that are visible are the element and
   its descendents

There should be an easy way for the Fullscreen API spec to say something
like "the fullscreen element stacks above everything else" without
playing z-index tricks or the like[3], and authors should
[to some extent] be able to style "the thing behind the fullscreen
element"—minimally its background color.

Separately, there's a proposal in the HTML WG for a <dialog> element to
help authors create modal or non-modal dialogs. Modal dialogs in this
proposal have very similar needs, both from an appearance perspective
and from an a11y perspective to fullscreen elements. Dialogs, like
fullscreen elements, should appear on top of everything else in the
document. Additionally, authors need to be able to style "the thing
behind the dialog" to produce a lightbox affect wherein the rest of the
viewport is behind a translucent covering, and authors need to be able
to capture click events on that covering (typically to either dismiss
the dialog or to simply suppress clicking on things below the dialog).

We'd like authors to be able to talk about the backdrop behind
fullscreen elements and modal dialogs, and the Fullscreen API and the
HTML spec shouldn't have to separately describe the stacking behavior
and other details.

I've added a proposal for a ::backdrop-of(selector) pseudo-element for
this use case on the css4-ui wiki page[4].


Ted

1. http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

2. In addition, there are some a11y implications that are out of scope
   for CSS, such as:

   * tabbing should cycle through only elements in this subtree
   * asking assistive technology to start reading the document should
     cause it to start reading at the beginning of the element and not
     the beginning of the document, and it should stop reading at the
     end of the element

3. The rendering section of the Fullscreen API spec currently suggests
   using a z-index of 2147483647. :(

   http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#rendering

4. http://wiki.csswg.org/spec/css4-ui

Received on Monday, 28 November 2011 18:21:42 UTC