New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Detect support for `display: run-in`? #198

Closed
alanhogan opened this Issue Feb 18, 2011 · 6 comments

Comments

Projects
None yet
2 participants
@alanhogan

alanhogan commented Feb 18, 2011

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

This comment has been minimized.

alanhogan commented Feb 18, 2011

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

This comment has been minimized.

Member

paulirish commented Feb 18, 2011

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

This comment has been minimized.

alanhogan commented Feb 19, 2011

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

This comment has been minimized.

alanhogan commented Feb 19, 2011

(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 paulirish closed this in e8cc0f6 Dec 12, 2011

@paulirish

This comment has been minimized.

Member

paulirish commented Dec 12, 2011

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

woo!

@alanhogan

This comment has been minimized.

alanhogan commented Dec 12, 2011

Boom! Great, thanks, Paul!

patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment