Automatically convert css to mozilla specific css

If my css is:

border-bottom-right-radius: 20px;

is there a JavaScript library that will convert it to

-moz-border-radius-bottomright: 20px;
开发者_StackOverflow社区

automatically if it detects a user agent that is a mozilla browser, example: Firefox?

With Sass and Compass you can use mixins which set browser specific rules automatically. This is what you probably need.

There is also another similar library - Less, but I haven't tried it yet.

Give Modernizr a look.

This is isn't a JavaScript solution, but LESS CSS can achieve this through use of 'functions'. LESS CSS works using either Ruby, ASP or PHP.

Soon, you will be able to use LESS with JavaScript. See less.js for info. Apparently this will form LESS 2.0

First define your function:

@border-radius(@radius:10px) {
  -webkit-border-radius: @radius;
  border-radius: @radius;
  -moz-border-radius: @radius;
}

Then reference it:

E.g.

#some-id {
  @border-radius;
}

or

#some-id {
  @border-radius(210px);
}

Why not just add all webkit and mozilla border declarations and be done with it.

-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;

http://border-radius.com/