Re: Viewport scrolling to reach overflow from root element [Was: Re: Shadows vs. layout]

@Tab: sorry, I didn't receive your message until after sending my
previous one.

Tab Atkins Jr. wrote:
> On Mon, Aug 3, 2009 at 10:38 PM, Robert O'Callahan<robert@ocallahan.org> wrote:
>> On Tue, Aug 4, 2009 at 3:25 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>>> On Aug 3, 2009, at 4:08 PM, David Hyatt wrote:
>>>
>>> In fact Web sites even deliberately hide elements offscreen using large
>>> negative left/top values, so we couldn't scroll to reveal this stuff at this
>>> point even if we wanted to. :)
>>>
>>> I could be wrong, but I thought we used to be able to do that on the right
>>> also a few years ago, and then that got "fixed".
>>
>> You've never been able to do it on the right, at least not in Gecko.
>>
>> Note that doing it on the left stuffs up accessibility. It really shouldn't
>> be done at all.
>
> Sometimes we use it *for* accessibility, but that's often a large
> negative text-indent instead.  Put text in your links, indent it way
> off the left edge of the screen, then add backgrounds to make a good
> image link.
>
> These days I just use <img alt>, but I know that's a real common
> technique touted for its accessibility benefits.
>
> (It also means that text-indent is pretty much poisoned forever in
> terms of the left edge.)

text-indent serves a slightly different purpose though, and is not
affected by the offscreen clipping behaviour described above provided
that it's used carefully.

Specifically, whereas the "off-screen positioning" or the "zeroed box
model+overflow:hidden" methods remove or nullify the margin box from the
layout, the "large negative text-indent" method leaves the margin box in
the layout but removes the text.  (This is useful for buttons etc where
visually you want an image but in the document you want instructional text.)

This technique is itself fairly hacky. (font-size:0 is semantically more
reasonable, for example, but fails to completely nullify the text in
legacy IEs.)  Hacky or not, though, the text-indent technique can be
made to work as specified by CSS instead of relying on vague off-screen
behaviour simply by specifying overflow:hidden on the same box, and so
the text is clipped by its own box rather than by the viewport.


Tab Atkins Jr. wrote:
> I don't know whether or not it's still relevant (I've stopped doing
> it, myself, in favor of practices that more directly lean on
> accessibility features)

(Care to expand on these practices?)


However, as far as text-indent being poisoned goes, when used without
overflow:hidden it's no different from any other technique which relies
on off-screen clipping, including simple negative margins etc, any of
which could theoretically be being used to address more or less the same
issue.  The thing that's poisoned is off-screen clipping itself; alas
it's certainly not realistic to change this curious behaviour now.

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Tuesday, 4 August 2009 15:23:46 UTC