What are the css3 style prefixes?-Front-end Q&A-php.cn

What are the css3 style prefixes?

青灯夜游

Release： 2022-03-18 18:15:23

Original

2293 people have browsed it

css3 style prefixes are: 1. "-moz-", which represents the private properties of the firefox browser; 2. "-ms-", which represents the private properties of the IE browser; 3. "-webkit-", which represents Safari and chrome private properties; 4. "-o-" represents Opera private properties.

What are the css3 style prefixes?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Prefix problem in CSS3 style

As a novice, sometimes I can’t tell which attributes need to be prefixed when writing css, or What prefix to use? Here is some summary of my usual learning.

Before understanding these prefixes, let’s first introduce the cores of major mainstream browsers:

IE——trident (one of the cores of many domestic dual-core browsers is trident)
Opera——Blink (presto is obsolete)
chrome——Blink (formerly webkit)
Firefox——Gecko
Safari——webkit (the most frequently used webkit kernel on Android phones)

And Each kernel has its own prefix:

Trident kernel: prefix is -ms-
## Gecko kernel: prefix is -moz-
Presto kernel: The prefix is -o-
Webkit kernel: The prefix is -webkit-

So:

-moz- represents the private properties of the firefox browser
-ms- represents the private properties of the IE browser
-webkit- represents safari and chrome private properties
-o- represents Opera private properties

Example: write A rounded border-radius needs to be written like this:

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

Copy after login

So 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.

(Learning video sharing:

css video tutorial, web front-end)

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