Write CSS3 without Worrying about Prefixes

Using CSS3 properties can give your websites a huge boost in appeal and interactivity. 3D transformations, keyframe animations, background gradients, and columns are great tools, but they require extra work on the developer’s part. Various browsers support them experimentally and require vendor-specific prefixes for these properties. Here’s an example of what I mean:

[code language="css"] .rotated-element { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } [/code]

In order to use this transform property across modern browsers (that is, anything after IE8), two additional copies of the rule are needed: -webkit- (for Safari, Mobile Safari, and recent Chrome) and -ms- (for IE9). Firefox (16+) and Chrome (36+) read the unprefixed property correctly.

A site that uses lots of CSS3 properties therefore needs lots of prefixes. That raises two problems. First, how do you know which prefixes to use? Sometimes you’ll see a site that uses everything (-webkit-, -o-, -moz-, -ms-, and unprefixed). That’s just bloat. You could look up every property on Can I Use, but that’s time-consuming. The second problem is simply that nobody wants to write all those prefixes.

We need to automate this. Let’s look at some tools that help us automate vendor prefixes.

Continue reading %Write CSS3 without Worrying about Prefixes%

by James Steinbach via SitePoint