CSS Tip: Hiding Content with Clip

In our themes on WordPress.com we often hide text from screen display but still want it to remain for screen readers. Typical techniques like text-indent and absolute positioning work fine until you try to add RTL support to the theme. After adding RTL styles those techniques cause layout issues; most commonly a huge horizontal scrollbar in certain flavors of IE.

Here’s a technique I came across on Adaptive Themes (Professional Drupal themes and design services) that works really well for this situation.

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

In our testing it seems to work great across all our target browsers.

See the full post on the Adaptive Themes site: Using CSS clip as an Accessible Method of Hiding Content.

Author: Lance Willett

My name is Lance, I am a blogger, product manager, software developer, and business executive creating high-quality, engaging, and customer-centered experiences for people online. México-born. Chief Product and Technology Officer at Tumblr (Automattic).

6 thoughts on “CSS Tip: Hiding Content with Clip”

  1. Good trick. Thanks for sharing! And the linked write-up is very informative.

    It is interesting how having to account for both LTR and RTL helps you learn new things and understand better how user agents work.

    1. Agreed. Accounting for RTL and proper internationalization not only make your work better for everyone, but as you say, teaches you a lot about how CSS and browsers work.

  2. Pingback: WordPress Community Links: talk about WordPress from Tumblr edition | WPCandy
  4. Pingback: Blog.ShawnSandy.com- IF IT IS CREATIVE I AM IN- CSS Tip: Hiding Content with Clip | ThemeShaper

Comments are closed.