CSS Browser engine prefix

Vendor prefix-browser engine prefix, which is a small string placed before CSS properties, is used to ensure that this property is only recognized and effective under a particular browser rendering engine. Google Chrome and Safari are using the WebKit rendering engine, Firefox uses the Gecko engine, Internet Explorer uses the Trident engine, and opera used the Presto engine, then changed to WebKit engine. A CSS property in a browser engine that does not typically implement other engine prefix identifiers, but because of the popularity of WebKit-based mobile browsers, browsers such as Firefox have implemented some CSS properties for WebKit engine prefixes in their mobile versions.

What are the browser engine prefixes (Vendor Prefix)?

-moz-     /* Firefox uses Mozilla browser engine browser */-webkit-  /* Safari, Google Chrome, etc. using WebKit engine browser */-o-       /* Opera browser ( Early)      */-ms-    

Why do I need a browser engine prefix (Vendor Prefix)?

These browser engine prefixes (Vendor Prefix) are primarily used by various browsers to experiment with or test new CSS3 attribute characteristics. Can be summed up as the following 3 points:

• Experiment with some CSS properties that have not yet become standard--perhaps never to be standard
• An experimental implementation of the CSS3 attribute characteristics of the newly emerged standard
• The realization of the equivalent semantics of some new attributes in CSS3

Not all of these prefixes are required, but usually you add these prefixes without any harm-just remember one and put the non-prefixed version on the last line:

-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; 

Some of the new CSS3 properties have been tested for a long time and some browsers have no longer used prefixes for these properties. Border-radiusproperty is a very typical example. The latest version of the browser supports the non-prefixed Border-radius attribute notation.

You need to use the CSS3 property of vendor prefixes

The main attributes that need to be added to the browser engine prefix (vendor-prefix) include:

• @keyframes
• Move and Transform attributes (Transition-property, transition-duration, Transition-timing-function, Transition-delay)
• Animated properties (Animation-name, Animation-duration, Animation-timing-function, Animation-delay)
• Border-radius
• Box-shadow
• Backface-visibility
• Column Property
• Flex Properties
• Perspective Property

The complete list is not just these, but it also increases.

Browser engine prefix (vendor-prefix) usage

When you need to use the browser engine prefix (vendor-prefix), it is best to put the notation with the various prefixes in front, and then put the standard without the prefix of the wording to the last. Like what:

/* Simple Properties */. myClass{-webkit-animation-name: FadeIn;-moz-animation-name: FadeIn;-o-animation-name: FadeIn;-ms-animation-name: FadeIn;Animation-name: FadeIn;/* Put to the last without the prefix */}/* Complex attribute keyframes */@-webkit-keyframes FadeIn{0%{Opacity: 0;}100%{Opacity: 0;}}@-moz-keyframes FadeIn{0%{Opacity: 0;}100%{Opacity: 0;}}@-o-keyframes FadeIn{0%{Opacity: 0;}100%{Opacity: 0;}}@-ms-keyframes FadeIn{0%{Opacity: 0;}100% { opacity: 0; }}/* Not prefixed with the last */@keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; }}< /c3> 

Internet Explorer

Internet Explorer 9 began to support many, but not all, new attributes in the CSS3. For example, you can also use the Border-radius attribute without the browser engine prefix (vendor-prefix) in IE.

IE6 to IE8 do not support CSS3, unfortunately, there are many users who use these low-version browsers. So, make sure your website is designed to display properly without supporting CSS3. For some properties: border-radius , linear-gradient , and box-shadow , you can use Css3pie, which is a very small file, put it in the root directory of your site, you can make your page in IE6,IE8 also support these properties.

CSS Browser engine prefix