diff --git a/css.html b/css.html
index 36bf1bf522..0d3fc11efd 100644
--- a/css.html
+++ b/css.html
@@ -2294,14 +2294,14 @@ For example, <section>
should be wrapped as inline.
Image replacement
- Utilize the .hide-text
mixin or .text-hide
class to help replace an element's text content with a background image.
+ Utilize the .text-hide
class or mixin to help replace an element's text content with a background image.
{% highlight html %}
Custom heading
{% endhighlight %}
{% highlight css %}
// Usage as a Mixin
.heading {
- .hide-text();
+ .text-hide();
}
{% endhighlight %}
diff --git a/less/mixins.less b/less/mixins.less
index c18e7c49b4..d4c8e01156 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -69,8 +69,15 @@
}
// CSS image replacement
+//
+// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-.hide-text() {
+
+.hide-text(),
+.text-hide() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
diff --git a/less/utilities.less b/less/utilities.less
index 3d310e6515..a2807cc794 100644
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -30,7 +30,7 @@
visibility: hidden;
}
.text-hide {
- .hide-text();
+ .text-hide();
}