Using modernizr with css classes that use more than one css3 style?

Question

I am using modernizr to create alternative styles for browsers that don't support css3. It works great but i haven't found a solution with css classes that use more than one css3 style.

Example 1:

div.button {
box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
border-radius: 5px; /* second css3 style */
}

/* fallback for browsers that don't support css3 */
.no-borderradius div.button {
background: transparent url(my-button.png) left top;
}

The problem here is if the browser does support box-shadow but doesn't support border-radius you will run into problems. In this case both the button will use the box-shadow, ignore the border-radius and aply the no-borderradius class with the background image. I could solve it by creating two fallbacks.

Example 2:

  div.button {
    box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
    border-radius: 5px; /* second css3 style */
    }

    /* fallback for browsers that don't support css3 */
    .no-borderradius div.button, .no-boxshadow div.button /* no-boxshadow added */  {
    background: transparent url(my-button.png) left top;
    }

The problem here is that if the browser does'nt support border-radius and box-shadow both classes will be used to style the element, i can't help but thinking this can cause problems?

Answer 1

Modernizr adds classes to the html element (see How Modernizr works in the documentation) based on its test results. That means that element has all those classes, and you can simply chain multiple class selectors to narrow down the selection.

Your existing solution applies the rule if the browser doesn't support either one of the rules or both, so it'd be contrary to what you're looking for.

Try this selector instead:

.no-borderradius.no-boxshadow div.button {
    background: transparent url(my-button.png) left top;
}

Regarding your comment, IE6 doesn't support both border-radius and box-shadow properties anyway, so it shouldn't matter. It will still apply the rule as it reads the selector as .no-boxshadow div.button. See my answer to this question for an illustration.

Answer 2

The CSS would work since the browsers that support box-shadow also support border-radius [1].

.no-boxshadow div.button { background:transparent url(btn.png) 0 0; }
.boxshadow div.button { border-radius:5px; box-shadow:inset 1px 1px 2px #ccc; }