Automatically convert css to mozilla specific css

Question

If my css is:

border-bottom-right-radius: 20px;

is there a JavaScript library that will convert it to

-moz-border-radius-bottomright: 20px;

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

Answer 1

Give Modernizr a look.

Answer 2

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.

Answer 3

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/

Answer 4

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);
}