1. Code
  2. HTML & CSS

Quick Tip: Never Type a Vendor Prefix Again

Scroll to top
Read Time: 2 min

You know the drill quite well. Want to give some section of your website rounded corners with CSS3? Then you'll require nothing short of three vendor prefixes: webkit, moz, and the W3C recommended form. Isn't that a huge waste of time -- not to mention screen space? What if, instead, we could use a class file? Well, we can! I'll show you how today.

The Key

If we use a tool like LESS or SASS, we can create our own class files quite easily. Have no idea what I'm talking about? Well, first, review this quick tip. It'll teach you exactly how to get up and running with Less.

Classes File

Next, we need to create a core classes file that will be used in every project. Feel free to store this file anywhere you wish, though, in the video above, I use our popular (and exclusive) Structurer app.

We'll do the first one together, but be sure to review the screencast for more details.

In terms of naming conventions, I've found that it's smartest to use the officially recommended name for your class name -- in this case, "border-radius." To declare variables with Less, we preface them with an @ symbol. In this case, we're setting a default value of 3px, though, should we need to override that value in our project, it's a cinch!

Some Examples

At this point, simply rinse and repeat for each property that requires multiple vendor prefixes. Here's a handful to get you started:

Box Shadow





I'd love to hear your thoughts on this. If you like the idea, let's turbo-charge this stylesheet.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.