Hiding Content using CSS Clip

CSS clip is the new and the best CSS method used for hiding content. This method is used if you want to 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(Right to Left languages) support. After adding RTL styles those techniques cause layout issues; most commonly a huge horizontal scrollbar in certain flavors of IE. But this CSS clip method for hiding the content work great across all our target browsers.

You can simply add this in your stylesheet file and use the class=”element-invisible” to hide it.

Hiding Content using CSS Clip: CSS Code

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

CSS Clip:

The CSS clip property is like a mask. It allows you to mask the content of an element in a rectangle shape. To clip an element: you must specify the position to absolute. Then, specify the top, right, bottom, and left value relative to the element.
Syntax for clip:

clip: rect(<top>, <right>, <bottom>, <left>)   /* standard syntax */
rect(<top> <right> <bottom> <left>)      /* backwards compatible syntax for IE6 and IE7 */

Further reading on the Adaptive Themes site: Using CSS clip as an Accessible Method of Hiding Content

1 thought on “Hiding Content using CSS Clip”

Leave a Reply

Your email address will not be published. Required fields are marked *