HTML & Script
REPLACING THE -9999PX HACK (NEW IMAGE REPLACEMENT)
duraboys
2012. 3. 31. 15:46
-9999PX
So popular was this method, we made a tee shirt out of it, and it sold, baby, it sold.
But despite its enduring popularity, Phark has drawbacks of its own: chiefly, a performance hit caused by the need to draw a giant 9999px box offscreen. (Yes, the browser really does this.)
My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
- Really long strings of text will never flow into the container because they always flow away from the container.
- Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1