Question

I’ve studied css styles of Google Docs, and I have noticed there such a thing:

.goog-inline-block {
    position        : relative;
    display         : -moz-inline-box;
    display         : inline-block
}

* html .goog-inline-block {
    display         : inline
}

*:first-child + html .goog-inline-block {
    display         : inline
}

html>body .goog-inline-block {
    display         : -moz-inline-box;
    display         : inline-block
}

I understand what this .goog-inline-block class should mean, but this code arose questions for me:

• Why are there so much declarations for a simple class?
• Why does simple .class-name declaration differ from * html .class-name declaration?
• What is this crafty construction *:first-child + html .class-name doing?

Answer 1

This rule:

* html .goog-inline-block {
    display         : inline
}

defines a style for IE6. In IE6’s document model, there’s a mysterious root element that contains html, so this selector takes advantage of that fact using the * html hack.

This rule:

*:first-child + html .goog-inline-block {
    display         : inline
}

defines a style for IE7. In IE7’s document model, there’s no more root element above html, but there’s another one before it, which is what’s targeted by the *:first-child + html selector.

This rule:

html>body .goog-inline-block {
    display         : -moz-inline-box;
    display         : inline-block
}

defines styles for IE7+ and other browsers. The child selector > isn’t supported by IE6, so it never sees this rule. -moz-inline-box is actually the same as inline-block, but meant for Firefox 2 and older as those versions don’t support inline-block.

There are so many declarations for that class because different browsers have problems with the display: inline-block style, so hacks and workarounds are needed for these browsers.