Performance and DOM Loading using vendor specific prefixes for CSS3

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.

Answer 2

As always with this kind of question, the answer is - it depends. It depends on which prefixes you're using, how often they occur in the HTML, which browser you're testing against, etc.

The solution is to write the code, profile it, and find out. Very often, you will find that the performance is acceptable either way.

Answer 3

I use option 2 - add all the browser prefixes (as well as the non-prefixed version) to the CSS:

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

Browsers will skip declarations they don't understand without any problems (although your CSS won't validate) while still applying the styles. It's probably best to use a CSS generator to avoid having to type out every prefix.

You should avoid using Javscript to detect CSS features since this breaks separation of concerns - CSS is for presentation and Javascript is for behaviour.