CSS Vendor Prefixes

They allow to use some of the features which browsers don’t yet have access to.

Most commonly used within css styles like – transitions. Where the same bit of code may work differenly in various browsers.

Prefix Types:

  • -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
  • -moz- (Firefox)
  • -ms- (Edge, Internet Explorer)
  • -o- (Opera, Opera Mini)

Example use:

.testTransitionClass {
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

 

 

Libraries:

Additionally a library can help sort out the trouble with prefixes: prefixfree.js

JavaScript popular library jQuery’s .css() method also does some of prefixing.

Online tool such as Prefixr does cross-browser live

Pre-processors:

Less

Sass , and its tools set Bourbon

Open-source css framework Compass

 

 

Additional help:

Time to update CSS3

Was this article helpful?

Related Articles

Leave A Comment?