From aa0396eae757c9e03dda4e463fb0d4db5a5f82d7 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 5 Mar 2012 23:36:27 +0000 Subject: [PATCH] Update CSS image replacement technique The new technique avoids various problems with any text-indent method. The benefits are: * No box of any kind is drawn offscreen, so there is no risk of related performance problems in old iOS devices. * No need to specify a text-alignment and hide overflow since the text is crushed to take up no space. * No need to hide `br` or make all fallback HTML `display:inline` because unlike the text-indent approaches, this method is not affected by those scenarios. * Fewer styles are needed as a result of these improvements. The function of the new CSS is as follows: * `font: 0/0 a` is a shorthand property that reduces the font-size and line-height to 0. The `a` value acts as a font-family. The CSS validator complains that using `0/0` in the shorthand `font` property is not valid, but every browser accepts it. * `text-shadow: none` makes sure than any inherited text shadow is removed, otherwise it will show over the image. * `color: transparent` is only really needed in browsers than don't completely crush the text to the point of being invisible. Safari 4 is such a browser (but extremely rare). Leaving it in for now in case there are any mobile browsers that require it. Upon further testing, it may be possible to remove this declaration. Some parts of the pre-existing image replacement technique have been retained. The border and background resets are useful when using IR on form submit inputs or buttons, as well as when links use default borders or backgrounds Close #1005 --- css/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index bf0f5bdd5d..7be1de84e7 100644 --- a/css/style.css +++ b/css/style.css @@ -250,8 +250,7 @@ td { vertical-align: top; } ========================================================================== */ /* For image replacement */ -.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } -.ir br { display: none; } +.ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; }