Find and remove vendor prefixes in your CSS using Regex

I recently set out to remove all of the vendor prefixes from the CSS for all of our clients at work. This is because we use Gulp with Autoprefixer - which means we have up-to-date prefixes and cleaner SCSS.

One way of doing this would be to open every CSS file, search for -moz, then search for -webkit etc. Some of the CSS I was searching through is well over 5 years old and is rife with vendor prefixes.

Regex to the rescue!

\-(moz|o|webkit|ms|khtml)\-(?!font-smoothing|osx|print|backface).+?;

This is the regular expression I came up with. Using Atom’s built in “Find in Project” tool, with the regex button checked, I was quickly able to find and eliminate the prefixes.

There are some instances that might not be catered for with this - use it at your own risk!

Regex breakdown

For those interested, I’ve broken down the expression below:

  • \- This is a literal dash (so far matching: -)
  • (moz|o|webkit|ms|khtml) The pipe and brackets act as an or statement (so far matching: -moz OR -o OR -webkit OR -ms OR -khtml)
  • \- Another literal dash - (so far matching: Everything before, but with an extra dash e.g. -moz-)
  • (?!font-smoothing|osx|print) Similar to the or statement before, the interrobang means not. (so far matching: Everything beggining with the previous or statements, unless they are followed by font-smoothing OR osx OR print OR backfire. This means stamens such as -webkit-font-smoothing: antialiased; and -moz-osx-font-smoothing: grayscale; are ignored)
  • .+? This selects anything following the previously selected selected, until the final ; (at the end of the regex) - this means the whole line is selected.

See the Regex in action!

Deleting the lines

For those interested in how I quickly deleted the lines, I installed the delete-lines plugin and passed the same regex into the field when I had the file open.

Regex in Atom

You might also enjoy

  • Useful command line MySQL commands

    Posted on 5th July 2020.

    It seems I have been doing a lot of command line work on Debian with MySQL recently and have been having to search the internet (or my bash history) every time I need to do something. Here is a collection of commands I have been using…

  • The Git Commit Hash

    Posted on 28th May 2020.

    The magic 40 character string that is attached to every commit you do. What is it, where does it come from and will understanding it help you with Git in the future?…

  • Why should you consider Cloudflare for your website?

    Posted on 20th April 2020. Written For Liquid Light

    Cloudflare is a service which, among other things, provides a CDN (Content Delivery Network), firewall, and performance layer for your website. It has plenty of paid upgrades and features and is a developer’s dream, but what advantage does it have for you to put your website “behind” Cloudflare and how…

    Web
Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.