CODEWITHSUNDEEP
htmlcss
Mr.K
Mr.K

Reputation: 67

How do I use CSS2 spec if browser support is not detected for CSS3?

I'm busy developing a site in HTML5 and CSS3, but I need it to support older browsers as well. It makes use of the Modernizr library but this does not allow me to replace certain CSS3 elements with CSS2.

eg: I have a div that makes use of border-radius as well as box-shadow. If CSS3 is NOT detected I want to serve an alternative style which has a background image made up of the rounded corners and faded borders.

Maybe something like adding an extension to the class name:

CSS3 Class - .mainContent
CSS2 Class - .mainContentFlat

Upvotes: 0

Views: 685

Answers (2)

methodofaction
methodofaction

Reputation: 72405

You must think of the css2 rules as your "base" rules and the css3 as your "prettifying" rules. In case they are in conflict, you negate the effect through css inheritance. So in the case you're mentioning you would have something like

.mainContent {
  background: #fff url(image-with-shadow-and-rounded-corners.png) top left no repeat;
}

.boxshadow.borderradius .mainContent {
  background-image: none; /*take out the background image if support for css3 exists*/
  -moz-border-radius: 5px;
  -wekbkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 5px #000;
  -wekbkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55210

I have a div that makes use of border-radius as well as box-shadow

Doesn't modernizr.js natively support this?

Suppose you have a div which you wanna style with id="test"

<div id="test">
    Hello HTML5 CSS3
</div>

You can give CSS like this.

div#test{
    height: 50px;
    width: 200px;
    border: 1px solid #CCC;
}

.borderradius div#test {
   border-radius: 4px 4px 0 0;
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
}
.no-borderradius div#test {
    /*add style rules for css2 here*/
}
.boxshadow div#test {
   box-shadow: #666 1px 1px 1px;
   -moz-box-shadow: #666 1px 1px 1px;
   -webkit-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow div#test {
 /*add style rules for css2 here*/   
}

Upvotes: 1

Related Questions