Jump to content

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

Recommended Posts

Posted

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 🙂

Posted

@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?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Posted
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?

  • 11 months later...
Posted

@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. 

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.