New Technique To text-indent:-9999px Hack

There is a very well known technique in web design to hide text on the page by adding a text-indent CSS property of -9999px.

This moves the text off the page out of the view of the visitor, you will hear that this can be harmful to your SEO as you are trying to hide content from the visitor of the site.

But if you are using an image as your logo on your website you would need to add an image to the page by using the image tag.

<img src="logo.png" />

The problem with this is that you don't have the keywords of your website title on the page, you can add your website title to the alt attribute but it doesn't add as much weight to having your website title in a h1 tag on the page.

But if you use a h1 tag you can't add an image as your website logo, the only way to achieve this is to add your image as a background image to your h1 tag and have your text inside the h1 tag. This brings another problem that now you will have both your logo and text of your website title.

This is where the text-indent:-9999px technique came in, if you add this to your CSS file then you can have both your website logo and text inside the h1.

<h1>Website Title</h1>

h1 {
    text-indent:-9999px;
    margin:0 auto;
    width:300px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
}

This technique worked fine, but the downside to this technique is that it has a performance hit as the browser will draw a giant 9999px box offscreen.

New Technique Hide Text Off Page

There is a article on Zeldman which explains a new technique of hiding text off the page.

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

This places the text off the page, it doesn't matter on the size of page. We add the nowrap so the text will always continue to flow off the page and we make sure that any overflow of the text will continue to be hidden from the page.

The best part about this technique is that performance is increased because there is less things for the browser to do.

Has anyone used this new technique? Have you found any drawbacks to using it?

Advertise here

Comment