Vendor prefixes—what happens next?

So, we’ve all been using CSS3 in our designs for a while now, right? Right. And most likely we’ve been using a series of vendor prefixes to get these working, right? Right. There has been plenty of debate on whether vendor prefixes are a good idea, or whether they encourage disparities and less consistent code. I’m not wanting to talk about that in this article. I use vendor prefixes, the rest of the dev team do, and you probably do too.

A vendor prefix is a small piece of code that prepends a CSS declaration to make that particular declaration work in a certain browser/rendering engine, and that one only. A vendor prefix might look like -moz-, and this, unsurprisingly, will target any browsers running a Mozilla/Gecko rendering engine. A more complete example being -moz-border-radius.

Now, if you’ve been doing things right, your CSS(3) will look something like this:

a{
  -moz-border-radius:2px; /* Get it working in Moz browsers */
  -webkit-border-radius:2px; /* Get it working in Webkit browsers */
  border-radius:2px; /* Future proofing, for when the prefix-less CSS becomes standard */
}

What we have here are three declarations, one for Mozilla, one for Webkit and the final one for use when the CSS3 spec becomes standard, and we no longer need the prefixes.

A regular expression, often called a pattern, is an expression that describes a set of strings.

The only problem we have is that when it does become standard, the vendor prefixed CSS becomes redundant but is still in the stylesheet. What we need is a way of removing any vendor prefixed CSS in one move, and we have a regular expression which does just that!

Take the following code example:

a{
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  box-shadow:5px;
  -moz-box-shadow:5px;
  -webkit-box-shadow:5px;
  border-radius:5px;
}

N.B. I am aware that box-shadow has been dropped from the CSS3 spec, but this is just an example. Thanks to Laz, I am now aware that box-shadow has been re-added!

So there we have a series of CSS3 declarations applied to one element. We are doing two things here, but using six lines. Imagine now that the CSS3 spec has been made standard, and all browsers use prefix-less CSS, all we’d need here are box-shadow:5px; and border-radius:5px;. The solution here is simple, just delete the vendor specific lines. Job done.

However, now imagine you have much much more code. Imagine what’s going to happen to every stylesheet you’ve written using vendor prefixes… it wouldn’t be feasible to manually delete all the vendor specific code in there, so enter our regular expression. In your text editor (I use Notepad++) open up your find and replace and make sure it’s in regular expressions mode.

The regex

a{
  -moz-border-radius:5px; /* \-moz\-border\-radius[a-z0-9\-:]+; AND \-moz\-[a-z0-9\-:]+; */
  -webkit-border-radius:5px; /* \-webkit\-border\-radius[a-z0-9\-:]+; AND \-webkit\-[a-z0-9\-:]+; */
  border-radius:5px;
  -moz-box-shadow:5px; /* \-moz\-box\-shadow[a-z0-9\-:]+; AND \-moz\-[a-z0-9\-:]+; */
  -webkit-box-shadow:5px; /* \-webkit\-box\-shadow[a-z0-9\-:]+; AND \-webkit\-[a-z0-9\-:]+; */
  box-shadow:5px;
}

The above code won’t make much sense, but the comments show which regular expressions will target the CSS declarations they’re written next to. So by that token, \-moz\-border\-radius[a-z0-9\-:]+; and \-moz\-[a-z0-9\-:]+; will both target -moz-border-radius:5px;

The first regular expression will find any vendor prefixed code for the chosen vendor. For example, if you wanted to remove all -moz- CSS but leave -webkit- CSS in there, simply find this: \-moz\-[a-z0-9\-:]+; and replace it with nothing. Conversely, if you want to remove all -webkit- CSS and preserve the -moz- stuff, find \-webkit\-[a-z0-9\-:]+; and replace it with nothing.

The second regex is to target specific CSS3 declarations, say for example you wanted to remove all -moz-border-radius and that only, find this \-moz\-border\-radius[a-z0-9\-:]+; and replace it with nothing.

To remove all CSS by a specific vendor

To remove all -nameOfVendor- code from your stylesheets, use the following:

\-nameOfVendor\-[a-z0-9\-:]+;

To remove specific CSS by a specific vendor

To remove specific (in this example, border-radius) -nameOfVendor- code from your stylesheets, use the following:

\-nameOfVendor\-border\-radius[a-z0-9\-:]+;

And there you have it, two regular expressions to use in order to remove all CSS by vendor prefix, and then specific CSS by vendor prefix.

How it works

The regex works by:

• \-moz\- find content beginning with -moz- (note, hyphens are escaped).
• [a-z0-9\-:] define the characters making up the rest of the declaration containing only lowercase letters, numbers, hyphens (again, escaped) and a colons after -moz-.
• + find one or more of the characters matching the pattern defined above.
• Finally, we end the regex with a semi-colon, which will always be used at the end of any CSS declarations.

The specific CSS regex works in much the same way, but instead of the first part looking for just -moz-, it looks for -moz-border-radius etc.

There is however the small matter of post-regex formatting. With there being so many ways of formatting CSS (single vs. multi-line, tab vs. 4 spaces indenting etc) it is going to be pretty tricky writing a rexeg that will honour your document as well as everybody else’s. Running these regular expressions on a multi-line document will leave you with empty lines in your code, however you can simply run another find and replace for any whitespace and remove that too.

July 13th, 2010 by Harry Roberts in Web Development.

CSS CSS3 Regular Expressions Text Editors