How to use fallback values for `display` property in CSS?

Question

I want to use display: inline-table and display: table-cell, but it doesn't work on old browsers like IE7, so I want a display: inline-block fallback.

According to http://afshinm.name/css-fallback-properties-better-cross-browser-compatibility/, with color property it's possible to use

.me {
    color: #ccc;
    color: rgba(0, 0, 0, 0.5);
}

Then, I tried

#wrapper {
    display: inline-block;
    display: inline-table;
}

#wrapper > .child {
    display: inline-block;
    display: table-cell;
}

but IE7 tries to use display: inline-table, display: table-cell instead of display: inline-block, even if they don't work.

Notes

• I don't want to use JS nor another stylesheet inside conditional comments to achieve that
• I want it to be valid CSS

Answer 1

Providing you're just looking for a fallback solution for IE7, this can be done.

Add a new rule which start with *:first-child+html and only IE7 will recognise it.

So in your case add

*:first-child+html #wrapper {
    display: inline-block;
}

*:first-child+html #wrapper > .child {
    display: inline-block;
}

Why *:first-child+html? Well, that translates as an html element that is a following sibling of another element that is the first child of of their common parent. While it possible to create such DOMs in invalid application/xhtml+xml-served XHTML and via JavaScript, in normal HTML the HTML parser rules mean that simply never happens.

But IE7 has a bug, where it matches the *:first-child against the DOCTYPE node, which since that node is a preceding sibling node of the html element, the rule applies.

IE6 did not support :first-child, IE8 and later do not match * against the DOCTYPE node.

Adding *:first-child+html to the same selector has the additional benefit of increasing the specificity of the selector, so it will always take precedence in IE7.

The additional rules are entirely valid CSS.

You can see it in action at http://alohci.net/static/ie7cssfallback.htm