HTML and CSS Reference
In-Depth Information
1. REPLACED TEXT
This is probably the easiest use case, occurring when we have an
html
element at our disposal that can be given a fixed dimension (in order to
ensure we can hide the unwanted parts of the sprite). We'll also be hiding
the text inside the
html
element, replacing it with an image from our sprite.
Typical examples of this use case are action links (think delete icons, print
links, RSS icons, etc.) and headings (although CSS3 and Web fonts are
quickly making this technique obsolete).
.hideText{
text-indent: -999em;
letter-spacing: -999em;
overflow: hidden;
}
.spriteReplace(@x, @y) {
.sprite(@x, @y);
.hideText;
}
.spriteReplace (@x, @y, @width, @height) {
.sprite(@x, @y);
.hideText;
width: @width;
height: @height;
}
The
spriteReplace
mixin simply wraps our former sprite mixin and adds a
small helper mixin to hide the text from view. It's pretty basic, but it does
save us the trouble of adding the
.hideText
mixin manually for every
instance of this use case.
Using sprites for replaced elements.
