Overview of Browser engine prefix

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Browser Engine prefix

preface

There was a question to choose the corresponding browser prefix in the written test before. Although the development of CSS used to use the browser prefix, but are all added, did not pay attention to the prefix and browser corresponding relationship. This article is mainly a brief introduction.

What is a browser engine prefix?

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 
Copy the code

This must be familiar to everyone, for some relatively new CSS properties, often add such prefixed properties to do compatibility processing. This is one of the browser engine prefixes.

An explanation of browser engine prefixes on MDN

Browser vendors sometimes prefix experimental or non-standard CSS properties and JavaScript apis so that developers can experiment with these new features and (in theory) prevent their experimental code from being relied upon to break web developers’ code during the standardization process. Developers should wait until browser behavior is standardized before using unprefixed attributes.

Browser vendors are trying to stop using prefixes to denote experimental code. Web developers have been using this experimental code on their sites in production environments, making it harder for browser vendors to ensure browser compatibility and handle new features; It also hurts more niche browsers, which are forced to add other browser prefixes to load popular sites.

The trend is to add experimental features where users need to set their own preferences or flags, while writing a smaller specification to reach a stable state more quickly.

Why do we need a Vendor Prefix?

Vendor Prefix – Browser engine prefix, which is a set of small strings placed in front of CSS properties to ensure that the properties are recognized and effective only under the specific browser rendering engine. One browser engine generally does not implement the CSS attributes identified by other engine prefixes, but due to the popularity of webKit-powered mobile browsers, firefox and other browsers also implement some of the WebKit engine prefixes in their mobile versions.

Three, browser engine prefix classification

1. CSS prefix

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 
Copy the code

Special note: Put the unprefixed version on the last line:

2. API prefix

• Interface prefix
• Property and method prefixes

var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame;
Copy the code

4. Browser engine mapping

CSS prefix

API prefix

1. Interface prefix

2. Property and method prefixes

You can see that the prefix and browser mapping is the same. It’s just that different types of prefixes are written differently. You need to prefix the CSS class name with -x-. You need to prefix the interface name with uppercase. You need to prefix the attributes or methods with lowercase case

The CSS3 attribute of the browser engine prefix is required

1. @keyframes
2. Move and transform properties (transition-property, transition-duration, transition-timing-function, transition-delay)
3. Animation properties (animation-name, animation-duration, animation-timing-function, animation-delay)
4. border-radius
5. box-shadow
6. backface-visibility
7. The column attribute
8. Flex properties
9. The grid properties
10. The perspective properties
11. …(更多的)

The full list goes beyond that and will grow.

These attributes are not specific, and as the attributes become more stable or mature, you may not need to add browser engine prefixes (such as border-radius)

Browser – kernel – prefix shorthand

There are a lot of claims about Opera’s kernel on the Internet, so check this out.

Technology continues to grow, if there are mistakes in the article welcome to exchange correction!

Reference article:

Vendor Prefix: Why do you need a Vendor Prefix for each browser kernel and Prefix