Should we expect browsers to drop support for space separation any time soon?

Joshua said on February 25, 2011

I have always been told to set the element to display: none;.
Does this not work?

Paul Irish said on February 25, 2011

This clip technique is also what's provided in the .visuallyhidden helper class in HTML5 Boilerplate.

Jonathan Snook said on February 25, 2011

@Thierry: Only IE recognizes the syntax without commas.

@Paul: It's nice to see implementations elsewhere. I hadn't seen documentation on this technique until it was shown to me by a co-worker.

Thierry Koblentz said on February 25, 2011

Sorry for the spam, but your post got me thinking :)

If this variation is a patch for the "clip property" method, then why not dropping that technique altogether since it fails in some browsers?

Why not going with a rule in which each declaration is used for what it's supposed to do rather than used to "fix" another declaration within the same rule (does that make sense?).

It is this:

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); /* this kind of fail in Webkit and Opera */
  height: 1px; /* since clip is not reliable we need that */
  width: 1px; /* since clip is not reliable we need that too */
  overflow: hidden; /* since clip is not reliable we also need that */

Versus this for example:

.element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden; /* we make the box 1x1 pixel and prevent overflow */
  filter:alpha(opacity=0); /* that one we could drop,  we're really taking about one single pixel after all */
  opacity:0; /* we make that single box transparent */

@Paul - I like the class name Boilerplate is using

Thierry Koblentz said on February 25, 2011

@Jonathan: I believe it is the other way around. All browsers recognize the syntax without commas, but IE 6 and 7 that do not recognize the "comma" separated syntax.

Kevin Potts said on February 26, 2011

Great article. I've been using the "Position Absolute and Offscreen", but this is far better. Thanks.

Taimar said on February 26, 2011

Add a€?text-align: lefta€? to the Text Indent example, fixes the RTL pitfall.

askthebigo said on February 26, 2011

I use a variety of methods - for skip navigation items, I style up the :focus and bring the content onto the screen (if you are physically impaired and use TAB to get around the screen - you still want to see these). In the non-focussed state I use:

margin: 0;
padding: 0;
position: absolute;
top: -99999px;
left: -99999px;

Haven't had any issues with that.

I also use a similar technique for hiding additional text (for users with screen readers).

For example:

<h3>An article on Bees</h3>

This is some text representing a summary for an article that you could find on many websites.

Read more<span class="hidden"> from the article on Bees</span>

and then use the same CSS as in the non-focussed skip link, but change the class name to .hidden

I haven't had reports of any issues with this.

Arieh said on February 27, 2011

I have been using the text-indent method for quite some time now, and has no real issues with it - and I'm an RTL user.
The only thing I noticed is that for safari I also need to add 'overflow:hidden'.
Can you tell me what you mean when you say it doesn't work?

Ido said on February 27, 2011

Been using the text-indent method for years now, and except for extreme cases with a mixture of relative and absolute positioning, it works great.
Would also like to know the issues you where talking about?
accept for the RTL issue you where referring to, isn't this the best and easiest way to use ?

Tom Bigelajzen said on February 27, 2011

Text Indent issues with RTL are easily solved with setting direction:ltr;text-align:left on the element you wish to hide.

Tom Bigelajzen said on February 27, 2011

btw - a thread exactly about this issue in html5boilerplate issues -

Mike Cherim said on March 01, 2011

When using the Position Absolute and Offscreen method I have found it is better to move the element to the left rather than to the top -- in the interest of keyboard users. The reason is it lessens the occurrence of the user being/feeling bounced around (going to top, then back again). When the element is moved off screen to the left the user doesn't get bounced when tabbing and the whole use feels more natural.

Neil Osman said on March 01, 2011

Hi Jonathan,
Haven't encountered any issues in RTL pages while using:
.skip {
left: -1000px;
position: fixed;
speak: normal;
top: -1000px;
voice-family: female;

Thanks for your thoughts

Ahmad Alfy said on March 02, 2011

I work most of the time on RTL website... Hiding contents is really an issue and a pain in the ass
I try to set that particular element to { direction:ltr; } to get it to work correctly

Browser vendors should really do something about it

Aaron Gustafson said on March 03, 2011

I'm still a big fan of

.hidden {
  position: absolute;

It's short, sweet and hasn't caused any issues in my experience.

Brent Lagerman said on March 03, 2011

I've been using the same method as Aaron Gustafson above for years and have never had an issue either... Are there any drawbacks that you know of ?

Jonathan Snook said on March 03, 2011

Aaron/Brent: The problem with left:-999em is in RTL interfaces. It forces a horizontal scrollbar. Which means that you'd actually have to swap it for right:-999em;. If you don't have to worry about RTL interfaces, then you'll be fine.

Aaron Gustafson said on March 04, 2011

Right. When I've had to deal with RTL (like on, I've usually set an "rtl" or "ltr" class on the html element or gone with the value of dir and then swapped out left for right depending on the situation. One thing worth noting to anyone doing that: if you set a default of left, make sure you set left: auto in the RTL version.

jelumalai said on March 06, 2011

I trying to hide the "Browse" (file) button for file attachment. Its working well in all browsers, but if I switch to other language OS like Chinese/Japanese, browse button area is not clickable.

Anybody face & fix this same problem?

Thomas Sabo Charm Club said on March 09, 2011

This is a good article. Just Keep it up! Thanks!

Thomas Sabo Watches said on March 16, 2011

This is a good article. Just Keep it up! Thanks!

Thomas Sabo Chains said on March 17, 2011

This is a good article. Just Keep it up! Thanks!

Janice Schwarz said on March 17, 2011

Like Joshua up there, I too would just use display:none. I've been using that for accessibility for years. Any particular reason it wasn't considered for this project either?

Mike Gifford said on March 18, 2011

As someone who was heavily involved in this discussion for Drupal 7 I'd like to just quickly pipe in to say that I don't think we've had any reports of problems with this approach that I am aware of since the launch in January. They would appear here.

I'm not suggesting that Drupal has the perfect solution, but a great many issues were considered in this thread. And it seems to be working for most users so far.

Ultimately the problem lies with Assistive Technology & the lack of an agreement on standards. If we could get them all to agree on a common behaviour for any set of code, we'd be so much further ahead. As it is there's a lot of guessing & endless testing involved.

Glad to hear that there are examples with simpler left: -1000px; based solutions working in RTL environments. I don't know how universally this would be.

Joshua & Janice - Most screen readers respect display:none and won't read out the content. This is certainly the case in VoiceOver. However, you can always test it with free tools like VoiceOver, NVDA or Orca & let me know if I'm wrong.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.