Question

I’ve been curious for a while with this now.

The css3 properties are not yet standardized, yet can be implemented by browsers, using a prefix for the particular browser.
For example, border-radius can be used, and it works fine on modern browsers. However, for previous versions of the browser vendors, we can use the vendor specific properties like -moz, -webkit, etc. prefixes to work.

Now, for my page, I have used gradients and border-radius, made a couple of classes that use them and applied these classes throught.

Which of the following is better to do?

1. Using javascript to find whether the support is there, and use the properties if they are supported, if above is false, check the user agent and apply vendor specific properties accordingly.

2. Using all the browser prefixes in the classes and let the browser use whichever suits it.

What I am curious and concerned about, is the performance and time for DOM loading.

Answer 1

Which of the following is better to do?

1. Using javascript to find whether the support is there, and use the properties if they are supported, if above is false, check the user agent and apply vendor specific properties accordingly.

2. Using all the browser prefixes in the classes and let the browser use whichever suits it.

Option 1 consists of using JavaScript to detect support, then conditionally writing out the CSS code with or without the prefixes and letting the browser apply the styles.

Option 2 consists of simply using CSS and relying on the browser to ignore prefixes/declarations it doesn’t understand.

As you can see, option 1 introduces an extra layer (JavaScript) which is not necessary if you just want to use some CSS3 features where possible. Option 2 will be the most performant solution.