What are the css attribute prefixes?

css attribute prefixes are: 1. "-moz-", which represents the private attributes of the Firefox browser; 2. "-ms-", which represents the private attributes of the IE browser; 3. "-webkit-" , represents the private attributes of Safari and Chrome browsers; 4. "-o-", represents the private attributes of Opera browser.

(Recommended tutorial: CSS video tutorial)

The main popular browser kernels now include:

• Trident kernel: the main representative is IE browser

• Gecko kernel: the main representative is Firefox

• Presto kernel: The main representatives are Opera

• Webkit kernel: The main representatives are Chrome and Safari

And these browsers with different cores, CSS3 Attributes (some attributes that need to be prefixed) need to be added with different prefixes, which are also called private prefixes of the browser. The CSS3 attributes after adding the private prefix can be said to be the private attributes of the corresponding browser:

• Trident kernel: prefixed with -ms-

• Gecko kernel: prefixed with -moz-

• Presto kernel : The prefix is ​​-o-

• Webkit kernel: The prefix is ​​-webkit-

Why do we need a private prefix?

Because the W3C, the organization that formulates HTML and CSS standards, is very slow. Usually, a member of the w3c organization proposes a new attribute, such as rounded border-radius, and everyone thinks it is good, but w3c will not set a standard for this attribute, but will go through a very complicated process and go through a lot of reviews. Browser vendors are not willing to wait that long. If they feel that an attribute is mature enough, they will add support to the browser.

But to avoid changes when w3c announces the standard in the future, a private prefix will be added, such as -webkit-border-radius. In this way, new attributes will be supported in advance. When w3c announces the standard in the future, border- After the standard writing method of radius is established, new browsers will support the writing method of border-radius.

Let’s look at a simple example. To write a rounded border-radius in the early stage, you need to write it like this:

.box { 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-o-border-radius: 5px; 
border-radius: 5px; 
}

Extended information:

The so-called browser kernel is browsing The rendering engine used by the browser determines how the browser displays the content of the web page and the format information of the page. Different browser kernels have different interpretations of web page writing syntax, so the rendering (display) effect of the same web page in browsers with different kernels may also be different. This is why web page writers need to test web pages in browsers with different kernels. The reason for the display effect.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of What are the css attribute prefixes?. For more information, please follow other related articles on the PHP Chinese website!