Browsers & Vendor Prefixes - The Correct Prefixes Made Easy!

If you write your code for the best browser support or are just trying your hand at this,
I'm going to show you a few tools that will make the tedious task of hand writing these super simple and easy.

Ok, so maybe your wondering "what the hell is a vendor prefix"?

If you've ever peaked into some css stylesheets or looked at a websites coding with Firebug, you've might have seen something like this:

Code:

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

Writing this by hand is prone to errors and a huge pain in the backside.

So, let's make this easier, faster, and ensure our vendor prefixes are updated.

Here's a cool list of tools that will create the prefixes for you, or at the very least aid you in getting the job done accurately and fast!

1. CSSPlease
2. Useful CSS 3 LESS Mixins
3. Nettuts Prefixr
4. Compass Mixins
5. CSSPrefixer
6. CSS 3 Generator
7. Tranforms Tool
8. Modernizr - Really nice
9. Browser Support Charts

I hope you find one of these useful. They will save you a lot of time!