Automatically add CSS Prefix (moz, webkit, etc.)

I have a list of CSS prefixes in bold (using 'transform' style as example):

• transform:/* W3C */
• -webkit-transform: /* Safari and Chrome */
• -moz-transform:  /* Firefox */
• -ms-transform: /* IE 9 */
• -o-transform: /* Opera */

Is there a magic code that will automatically include prefixes for all CSS?

Figure there must be a smarter way – It just seems super complicated and time consuming to go through my entire stylesheet and duplicate every line 5 times over?

Thanks all 🙂

I usually use this tool, just enter your CSS in left, the tool will add prefix on right

https://autoprefixer.github.io/

@melaniejaane @tuanphan slightly off topic, but do you use this for all css? I thought most browsers support standard css. Or are these to support very specific cases that you need?

8 hours ago, melody495 said:

@melaniejaane @tuanphan slightly off topic, but do you use this for all css? I thought most browsers support standard css. Or are these to support very specific cases that you need?

@melody495 I would love to know that as well @tuanphan if you have the answer?

I've always just used standard CSS but now I'm making much larger changes, I'm worried that the websites will look completely messed up if something isn't supported on a different browser.

Are there any basic rules of thumb for types of CSS that need prefixes, and some that don't?

I usually use standard CSS, only some CSS I use prefixes for

You can see some opinions here

https://stackoverflow.com/questions/22860775/should-i-use-prefixes-in-css-in-these-cases