As a novice, sometimes hard to tell what attributes need to use a prefix, or what prefix when writing css, following is a summary of some of my usual learning.
Before looking at these prefixes, first tell us about the major mainstream browser kernel:
- IE - trident (many domestic dual-core browser, which is a nuclear trident)
- Opera - Blink (presto obsolete)
- chrome - Blink (before a webkit)
- Firefox——Gecko
- Safari - webkit (Android phone is the most frequently used webkit kernel)
And each core has its own prefix:
- Trident kernel: prefix -ms-
- Gecko-: prefix -moz-
- Presto kernel: the prefix -o-
- Webkit-: prefix -webkit-
and so:
- -moz- firefox browser on behalf of private property
- -ms- private property on behalf of the IE browser
- -webkit- representatives safari, chrome private property
- -o- represents the Opera private property
Prefixed CSS properties required with each browser, here are some common attributes need to add the prefix (new property) :( a specific property, please refer to the link: http: //css.doyoe.com/ which all orange display properties need to prefix)
box-shadow，border-radius，background-origin，background-clip，text-shadow，zoom，transform，transition，animation.....
Actually, the problem of these attributes prefix now not much of a problem, because there will be some tools for us to solve, such as the following this plugin:
After adding Autoprefixe resources to build tools (eg Grunt), you can completely forget about something CSS prefixes, simply follow the latest W3C specifications to write CSS to normal. If your project requires support for older browsers, browsers can modify the parameter settings.
Autoprefixer will not only add a prefix to your property, but also differences in grammar repair, clean up expired prefix. Please refer to the specific use of the article: http://www.bcty365.com/content-146-5024-1.html