Vendor Prefixes


Why are we repeating ourselves?

CSS3 is still in development and browsers have experimental support for some features.

Webkit (Safari, Chrome)

-webkit-transition: background 0.3s ease;

Mozilla (Firefox)

-moz-transition: background 0.3s ease;

Opera

-o-transition: background 0.3s ease;

How to order them

Properties that declared last override previous ones. Always be sure to place vendor prefixed properties before the final, real CSS3 property.

.foo { 
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}

Do your research

It's hard to tell what browsers have their own prefixes or how they implemented them. Check the documentation.