How do you remove all vendor-prefixes from entire file quickly?

Question

I got a CSS file which has so many vendor-prefixes (-webkit -moz etc).

And those vendor-prefixes makes the file much bigger.

I cannot remove vendor prefix one by one, Because it can take a lot of time. Is there any tools or tricks to remove vendor-prefixes from entire with one click?

Find and Replace in your text editor? But how much bigger are we talking about? It probably will make little to no difference. — Chris Burton, Jan 17 '14 at 06:38
Before removing you should know why it is there :) [Browser Compatibility] — swapnesh, Jan 17 '14 at 06:39
I sure know why it is there. Using prefixfree.js will make css much more maintainable. By the way a part of visitor of my website are still using 4 mbps speed network. — Jackwin tung, Jan 17 '14 at 06:50
@Jackwintung : what if someone disables the `js` in browser.... *just a thought*!! ?? — NoobEditor, Jan 17 '14 at 06:54
@NoobEditor Yeah. You are right. I guess it's better to keeps vendor-prefixes there. — Jackwin tung, Jan 17 '14 at 06:58

score 8 · Answer 1 · edited Aug 07 '19 at 08:21

8

A nice feature of Autoprefixer is that it also removes unneeded prefixes from your CSS. You can try it online here:

http://autoprefixer.github.io/

To remove all prefixes, leave the "Filter" textbox at the bottom empty.

edited Aug 07 '19 at 08:21

Richie Bendall

7,738
4
38
58

answered Apr 11 '16 at 16:27

Sphinxxx

12,484
4
54
84

8

To remove ALL prefixes you can leave the "Filter" textbox blank. – Kevinleary.net Jan 17 '18 at 15:46
it adds the prefixes. but how do you clean the prefixes? – Norbert Kardos Jan 06 '21 at 14:11
@NorbertKardos - In addition to adding needed prefixes, it also *removes unneeded prefixes*. Try the link in the answer: Paste your CSS, clear the "Browserslist" text box and hit "Apply". – Sphinxxx Jan 06 '21 at 17:45

Rafe Goldberg · Answer 2 · 2018-12-06T15:16:08.907

8

@Sphinxxx's last 1 version answer is, as stated, only “almost” correct. To remove all vendor prefixes, set the Autoprefixer filter to >100% instead.

edited Dec 06 '18 at 15:16

answered Sep 23 '16 at 22:11

Rafe Goldberg

156
2
10

Mohammad Ayoub Khan · Answer 3 · 2019-10-11T21:49:04.040

I was facing the same problem,
I was trying to remove all browser vendor prefixes from entire file at a time. I found an awesome tool postcss-remove-prefixes. Which did my work easily in just seconds.

You can find this tool here postcss-remove-prefix

I assume that you have installed NodeJs and NPM on your system.

Here is the process to use this tool
npm i -g postcss-remove-prefixes

Then use this tool from CMD as
remove-prefixes input.css
This will remove Vendor prefixes from your file

remove-prefixes input.css output.css
This will remove Vendor prefixes from your file and generates output as new file.

:) Enjoy

score -1 · Answer 4 · answered May 04 '14 at 06:10

This javascript function I hosted on github does what you're looking for.
var t = DeVendorCSS("transform") returns, for example, in a webkit browser without "transform" support, but with prefixed support, an array ["webkit", "webkitTransform", "-webkit-transform"] for use in inline CSS rules, such as e.style[t[1]]="translateY(5px)". The actual value "translateY" has to be compatible cross-vendor for this to work in this example (though, if not, get funky with the vendor id given as t[0]).

How do you remove all vendor-prefixes from entire file quickly?

4 Answers4