.ir class no longer works

[barneycarroll]

jsFiddle test case (git blamed to get the latest modification and sourced that revision via rawgithub.com).

The last few iterations of .ir have been implemented without much discussion. Breaking edge cases are reported but the onus is always on proving the new iteration breaks rather than proving it works. Perhaps that should be the other way round, and proposals for new methods should pass a a series of tests before making origin master? Of course, running CI wouldn't be procedural (you'd still need human observation to validate)

[barneycarroll]

Forgot to specify browsers tested:

Chrome v 30.0.1599.101 m

Firefox v 18.0.1

Internet Explorer v 11.0.9600.16384

[necolas]

Feel free to propose an IR method if you think people still need one. I can't remember the last time I need to use IR for anything.

[drublic]

We should remove these classes from HTML5 BP and move them to their own "helpers" repository if we want to keep them. I don't think it is necessary to have them within our code if a lot of people are not using them or rewrite them up to a certain point (as I do).

[necolas]

SGTM. But I'd suggest we don't bother with creating another repo.

[JoshuaJones]

But I'd suggest we don't bother with creating another repo.

👍 Might as well move the helper classes into the documentation.

[barneycarroll]

Feel free to propose an IR method

The negative text indent was bullet proof for all my applications (once I added .ir br { display: none } :P ). The method introduced after Zeldman publicised the bad performance of iPads calculating large box models had a few edge cases, but these weren't deemed to outweigh the performance benefits. This version is less hacky but doesn't work at all as far as I can see. Aside from the ego-bruising from no longer seeing my name in git blame, it's a shame that what we essentially have here is regressions away from the bulletproof perfectionism that HTML5 boilerplate utility classes used to signify in the name of (I assume) perceived elegance.

Reverting to the previous method would work for me.

Might as well move the helper classes into the documentation

The implication here is that non-functional helper classes is a feature rather than a bug… But isn't that a separate issue? 'retire helper classes' might be a better ticket for that, nay?

[faergeek]

ir works. You just didn't set width and height in your test case. This method is easy to understand and it can be used on inline-block elements, where negative text indent won't work by definition. It also doesn't hide text on Android 2.3.6 in some cases for example, if you need to support that.

[necolas]

ir works. You just didn't set width and height in your test case.

This is right. Thanks.

[dustinhorton]

Explicitly setting width & height fixes it in Chrome, but not in Firefox (24).

http://jsfiddle.net/4JhdV/1/

[drublic]

.ir is no longer part of HTML5 Boilerplate.

[dustinhorton]

Pretty certain I recall seeing a few things prematurely dropped, then added back in after discussion.

[fgutz]

Explicitly setting width & height fixes it in Chrome, but not in Firefox (24).
http://jsfiddle.net/4JhdV/1/

I am on FF 25.0.1 (Mac) and I was getting the same issue in your jsfiddle but it seems like it's only related to button or input type="button" tags.

but it works well for other tags: http://jsfiddle.net/4JhdV/4/

• added display block for the span and anchor tag

[dmathisen]

Just curious, if .ir is no longer the standard/best way to do image replacement, what's the accepted best option now?

[arthurgouveia]

@dmathisen whenever I still need to use IR, I try to make use of the Compass mixin hide-text.

So far, so good, but there are (and there will be) issues depending on the case. An example

[dmathisen]

@arthurgouveia Right. I didn't know that the old .ir method had performance issues. Thanks for clarifying. It looks like bootstrap has the same hide-text class too. Good stuff!