Posted in css

back to articles

say good bye to -9999px

I just read an article on Jeffery Zeldman’s site all about this very topic. You can read it over on his site or just read below and save yourself a click.

The reason I wanted to write about this change is mainly because it reminds me to use it in the future, and I believe in sharing the wealth.

Let’s get on with it.

Previously, If I have text that I wanted to hide for some reason I would use the -9999px, or -9999em method. Which would send the text so far off the page the user couldn’t see it. This was extremely effective if you had a logo that was a link and you wanted to put text in there. What I didn’t know is that the browser actually draws out every one of those pixels even though you don’t see it. That’s a bit crazy. So here’s a fix provided by Scott Kellum.


.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Use this instead of the -9999px and you are set. These are the advantages mentioned by Jeffery Zelman.

  1. Really long strings of text will never flow into the container because they always flow away from the container.
  2. Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.

Thanks for reading,
Matthew

* I have rid this site of comments. To be honest I never got enough to satisfy my bloated ego.
Write me on twitter, i'm always there. No captchas I promise.