Detect support for display: run-in?

[alanhogan]

Currently all the major desktop browsers except FF ≤ 4 support display: run-in. Because I want to only add generated content when run-in is supported by the browsers, I would like to be able to detect this. I don’t see this sort of thing in either the documentation, or the Undetectables wiki page.

Thoughts on my situation or support for this detection would be appreciated.

[alanhogan]

Example:

<h3>Something</h3>
<div>very somethingish</div>

h3 { display: run-in; }
h3:after { content: ', '; }

In good browsers, it renders like

Something, very somethingish

But when :after is supported without run-in as well (Firefox, looking at you) it looks like:

Something,
very somethingish

which is just plain stupid-looking.

[paulirish]

i got halfway done on this.. maybe you could finish it off?

var div = document.createElement('div');
div.style.cssText = 'display:run-in';
div.style.display == 'run-in';

is basically the test. I think.

can you test this around and see if it's true in supporting browsers and false in others?

[alanhogan]

Thanks, Paul. I made a JSFiddle page (ajh.us/run-in-test) for it. Results:

✓ Correctly passes in Webkit, Opera, and IE8
✓ Correctly passs in Firefox
✓ Correctly shows failure in IE6
❢ Erroneously passes in IE8’s IE7 mode
– Untested in genuine IE7 (Does anyone have this lying around!?)

So I made another jsFiddle page (http://ajh.us/run-in-2) and changed the test to use currentStyle and getComputedStyle (and actually add the element to the document). This time:

✓ All browsers' results as expected.

[alanhogan]

(jsfiddle breaks IE9 but tweaking the test to alert() its result yields behavior in IE9 as expected: True, but false when clicking the Broken Page icon).

So, what’s the next step? Could we see this in Modernizr soon, or should I just use this test in my own code?

[paulirish]

We should be good. If you wanna doublecheck support that'd be great but this follows your pattern.

woo!

[alanhogan]

Boom! Great, thanks, Paul!