Skip to content

Update hide-text mixin to use a simpler technique with better performance. #96

Closed
wants to merge 1 commit into from

3 participants

@javasteve99

Based on the following article I'm recommending a change to the Phark image replacement technique:
http://www.css-101.org/articles/image-replacement/the_new_new_image-replacement_techniques.php

Most people are familiar with using text-indent: -9999px; but this practice has been called into question because it draws a 9999px wide box that extends off screen, which can adversely affect performance. By going back to the original method which includes overflow: hidden; we can avoid the performance hit by preventing the box from being drawn at a size larger than the visible area of the element in question.

The article does a great job of summarizing the pros and cons of the various methods available.

@plapier
plapier commented May 9, 2012

I wonder if this would be better as a separate mixin? Keeping the current hide-text mixin as-is, while adding an additional text-indent mixin? That way we provide an the option to use whichever mixin?

Though, is a text-indent mixin necessary when only two CSS declarations are used in the mixin?

@mixin text-indent {
    text-indent: -9999px;
    overflow: hidden;
}
@javasteve99

Honestly, the mixin doesn't even feel like part of the stated purpose of Bourbon. But I saw it in here already and I think this method is better, so I figured it was worth a pull request.

@plapier
plapier commented May 10, 2012

I think it would be best to leave the mixin as is for now. I dont believe the alternative technique requires a mixin due to the simplicity of it. Thanks for generating the discussion and the pull request, Steve!

@plapier plapier closed this May 10, 2012
@heeton
heeton commented Feb 1, 2013

Given that the boilerplate method has been reverted, perhaps this should be removed?

h5bp/html5-boilerplate#1108

@plapier
plapier commented Feb 19, 2013

Given I cannot reopen this issue. I created a new one: #192

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.