Quick Tip: Never Type a Vendor Prefix Again

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.

.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;		
}

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!

#someElement {
   .border-radius(10px);
}

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

.box-shadow( 
	@x : 2px, 
	@y : 2px, 
	@blur : 5px, 
	@spread : 0, 
	@color : rgba(0,0,0,.6) 
) {
	-webkit-box-shadow: @x @y @blur @spread @color;
	   -moz-box-shadow: @x @y @blur @spread @color;	
			box-shadow: @x @y @blur @spread @color;	
}

Transition

.transition(
	@what : all,
	@length : 1s,
	@easing : ease-in-out
) {
	-webkit-transition: @what @length @easing;
	   -moz-transition: @what @length @easing;
	     -o-transition: @what @length @easing;
		  	transition: @what @length @easing;			
}

Box

.box(
	@orient : horizontal,
	@pack : center,
	@align : center
) {
	display: -webkit-box;
	   display: -moz-box;	
	        display: box;

	-webkit-box-orient: @orient;
	   -moz-box-orient: @orient;
	   		box-orient: @orient;
	   		
	-webkit-box-pack: @pack;
	   -moz-box-pack: @pack;
	        box-pack: @pack;		
	        
	-webkit-box-align: @align;
	   -moz-box-align: @align;
			box-align: @align;		
}

Flex

.flex( @val : 1 ) {
	-webkit-box-flex: @val;
	   -moz-box-flex: @val;
	        box-flex: @val;
}

Conclusion

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