Re: [CSS21] Addition of 2 values to the visibility property

On Thu, Jun 26, 2008 at 4:25 PM, Damian Vila <damianvila@gmail.com> wrote:

>
> CSS2 > Visual effects > Visibility
>
> Rationale: Right now one of the most common methods to replace text with
> and image in an accessible way is to put the image as a background and
> indent the text, as proposed by Mark Rundel of Phark (
> http://phark.typepad.com/phark/2003/08/accessible_imag.html)
> The idea behind this is to only show the background of the box while hiding
> the foreground.
>
> The proposal is the addition of two new values to the visibility property
> in CSS: foreground and background.
>
> foreground
> The foreground content of the generated box (including borders) are
> visible, but the background content is invisible. The visibility of
> descendents, being placed on the foreground of the box, is 'visible', unless
> a different visibility is specified.
>
> background
> The background content of the generated box (including borders) are
> visible, but the foreground content is invisible. The visibility of
> descendents, being placed on the foreground of the box, is 'hidden', unless
> a different visibility is specified.
>
> The full set of values for the visibility properties would then be: visible
> | foreground | background | hidden | collapse | inherit
> I'd like to hear your opinions.
>
> Damian
>
> While I like the intent, it doesn't solve the major problem with Rundel's
text-replacement, which is that a user browsing with CSS but without images
renders the control nearly completely unusable.

I personally use a slightly less semantic but more accessible
text-replacement strategy by inserting a dummy span into the markup, giving
*it* the desired background, then positioning it over the text (that is,
when I can't just use the text directly on top of a pretty background).  The
best accessible text-replacement strategy I've ever seen is here:
http://www.alistapart.com/articles/dynatext
but that suffers from being complex enough that many won't want to use it.

If we wanted to bring the first text-replacement strategy I mentioned into
pure CSS, something like an ::above generated element might work.  It would
function identically to an element that had been absolutely positioned above
the parent element and given a z-index just above it.

Back on the original topic, though, do you have any other use-cases for
foreground/background?

~TJ