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

@tuanphan every time I try to use autoprefixers or even codepen I get hit with countless Syntax Errors. Is Squarespace code a different type of CSS like SCSS or SASS or something else?

They seem to hate the use of custom variables like :

@white: ~"hsla(var(--white-hsl),1)";  
@h5: ~"italic 1.2em/2 "Fira Sans", sans-serif";

// <- ALSO anything with a double slash in front
// font-weight:500; font-size:18px; <- OR multiple declarations on one line hidden by “//“

Sorry I’ve learned coding through Squarespace so not sure of proper terminology. 

3 hours ago, melaniejaane said:

@tuanphan every time I try to use autoprefixers or even codepen I get hit with countless Syntax Errors. Is Squarespace code a different type of CSS like SCSS or SASS or something else?

They seem to hate the use of custom variables like :

@white: ~"hsla(var(--white-hsl),1)";  
@h5: ~"italic 1.2em/2 "Fira Sans", sans-serif";

// <- ALSO anything with a double slash in front
// font-weight:500; font-size:18px; <- OR multiple declarations on one line hidden by “//“

Sorry I’ve learned coding through Squarespace so not sure of proper terminology. 

SS support CSS + LESS only, if you use SCSS or SASS, you need to convert it to CSS or LESS