How can I have different CSS code for browsers that do not support border-radius`_问答_开发者

How can I have different CSS code for browsers that do not support border-radius`

开发者 https://www.devze.com 2023-02-22 13:42 出处：网络

I would like to make use of border-radius and the different variations on my web pages. I\'d also like to have alter开发者_运维技巧nate CSS for the browsers that don\'t support this. I am using MVC3.

I would like to make use of border-radius and the different variations on my web pages. I'd also like to have alter开发者_运维技巧nate CSS for the browsers that don't support this. I am using MVC3.

Is there a simple way that I could have different CSS presented depending on if the browser does or does not support border-radius and just have ONE CSS file. In other words I would prefer to not have to have an additional CSS file to manage different variations of browser.

I read about BrowserCaps. Is anyone using this with MVC3 for CSS switching?

Use the excellent jQuery round corner plugin.

http://jquery.malsup.com/corner/

It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.

Here's How to use it

You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Check working example at http://jsfiddle.net/VLPpk/1

UPDATE

If you want a cross browser Solution using only CSS, then use the following

.curved {
  behavior: url("border-radius.htc");
  -moz-border-radius: 20px; /* Firefox */
  -webkit-border-radius: 20px; /* Safari and Chrome */
  -khtml-border-radius: 20px; /* Linux browsers */
  border-radius: 20px; /* Opera 10.50, IE and CSS3 */
}

Download the htc file from http://code.google.com/p/curved-corner to make this work in IE browsers. jQuery plugin mentioned above remains the easiest way to do this where you don't have to modify so many CSS properties everytime you want to issue a radius.

Modernizr might be helpful for you. It would add either borderradius or no-borderradius to your markup using javascript and you can then style based on that:

http://www.modernizr.com/docs/#borderradius