From adecc5da035d6d76b77e3fa95c6abde841073da2 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 21 Aug 2012 23:16:50 +0100
Subject: [PATCH] New image replacement approach

This approach uses a pseudo-element to force the element's content
downwards without covering the background of the element. The overflow
is hidden. For IE 6/7, fallback to the cruder `text-indent` method.

Known advantages:

* Works in IE6+ (although better in IE8+).

* Replaces any content in IE8+, including inner HTML.

* Nothing new for people to learn. Works just like all "traditional" IR
  techniques (unlike NIR, which needs you to add the image using a
  pseudo-element's `content` and relies margins for sprite positioning).

* Doesn't draw a large out-of-element box in modern browsers. You can
  even mix in something like `font: 10px/1 a` to reduce ce the size of
  the "off-screen" box, if you really need to.

* Doesn't have any potential SEO problems from `font-size:0`.

* Doesn't care about any minimum font-size that a browser might have.

* Doesn't have any potential failed-IR problems from inherited styles,
  like text being positioned within the element's visible box (i.e., if
  you use other properties like `text-stroke`).

Known issues:

* Doesn't work when images are off or fail to load (same as every other
  IR technique apart from NIR).

* If the IR'ed element has bottom-padding, then either it needs to be
  removed or the height of the pseudo-element needs to be bumped up
  (e.g., set to 200%).

* Doesn't avoid the `inline-block` bug in IE 6/7 due to the text-indent
  fallback for those browsers.

* Doesn't work on input elements (but they shouldn't be the subject of
  IR anyway).

* There is the potential for some final-result differences between
  IE 6/7 and modern browsers, but this is already the case with other IR
  techniques.

Fix gh-1149
---
 CHANGELOG.md |  2 +-
 css/main.css | 15 +++++++++++----
 doc/css.md   |  7 ++++---
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5dad4dbe35..f949ea959a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@
 * Separate Normalize.css from the rest of the CSS (#1160).
 * Improve `console.log` protection (#1107).
 * Replace hot pink text selection color with a neutral color.
-* Change image replacement technique.
+* Change image replacement technique (#1149).
 * Code format and consistency changes (#1112).
 * Rename CSS file and rename JS files and subdirectories.
 * Update to jQuery 1.8 (#1161).
diff --git a/css/main.css b/css/main.css
index 22a7f358f5..34d6e85271 100644
--- a/css/main.css
+++ b/css/main.css
@@ -130,11 +130,18 @@ textarea {
  */
 
 .ir {
-    border: 0;
-    font: 0/0 a;
-    text-shadow: none;
-    color: transparent;
     background-color: transparent;
+    border: 0;
+    overflow: hidden;
+    /* IE 6/7 fallback */
+    *text-indent: -9999px;
+}
+
+.ir:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 100%;
 }
 
 /*
diff --git a/doc/css.md b/doc/css.md
index b56e9ca3c0..d8437e46aa 100644
--- a/doc/css.md
+++ b/doc/css.md
@@ -40,9 +40,10 @@ You are free to modify or add to these base styles as your project requires.
 
 #### `.ir`
 
-Add the `.ir` class to any element you are applying image-replacement to. Be
-sure to include `background-image: url(pathtoimage.png);` for that specific
-element so that image replacement can occur.
+Add the `.ir` class to any element you are applying image-replacement to. When
+replacing an element's content with an image, make sure to also set a specific
+`background-image: url(pathtoimage.png);`, `width`, and `height` so that your
+replacement image appears.
 
 #### `.hidden`