Should I Use Vendor Prefixes in CSS?

Hello there!
I was creating my tech doc project. I completed writing HTML markup and is starting with the CSS part.
My question is, should I use CSS vendor prefixes in my code? I mean, I have seen many code that has -ms- and -webkit-, etc. I have also heard that it improves browser compatibility. So, should I use this? Thanks!

It depends on what property you are using. If it is well supported by all major browsers you dont need to use prefixes but if its a fairly new CSS property using prefixes is a safer option. You can use to check the support of the css properties.

1 Like

If you can get it auto-generated (e.g. Autoprefixer) sure why not.

But I would not do it by hand and I would keep it out of the dev CSS and only have it in the outputted (transformed) CSS file.

1 Like

I know about Autoprefixer. They have an extension in VS Code. But, for some reason, it’s not working in my VS Code installation!

There is a GitHub issue with a comment about adding some common settings

If that doesn’t work the Live Sass Compiler extension has a setting (liveSassCompile.settings.autoprefix) for doing autoprefix. You would need to write your CSS in a .scss file, but at least you would get an output file and not have the vendor prefixes in the dev CSS which is just messy.

1 Like

Hi @lasjorg. Thanks for the reply. I have the Live Sass Compiler already installed in my VS Code and knows how to write Sass code. But, how can I enable that autoprefix setting for that extension? Should I need to edit any files? Please guide me.
Also, writing Sass code for this project doesn’t violate the project guidelines, right?

Go to VS Code settings, search for “autoprefix”, click the “Edit in settings.json” under the Live Sass Compile › Settings: Autoprefix entry, add the settings to the array.

This is the example from the settings page I linked to:

"liveSassCompile.settings.autoprefix": [
  "> 1%",
  "last 2 versions"

If you want to tweak the settings you can look at the browserslist options.

You are allowed to use SASS/SCSS.

1 Like

Thanks very much @lasjorg! It works perfectly!

1 Like