Should I Use Vendor Prefixes in CSS?

HTML-CSS
1

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!

2

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 https://caniuse.com/ to check the support of the css properties.

1 Like
3

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.

2 Likes
4

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

5

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
6

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?

7

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
8

Thanks very much @lasjorg! It works perfectly!

1 Like