Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the private prefixes of CSS3". In daily operation, I believe many people have doubts about the private prefixes of CSS3. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the private prefixes of CSS3?" Next, please follow the editor to study!

As the presentation language of page style, css3 has added a lot of new attributes, but some css3 attributes are still in the experimental stage on some browsers, so in order to effectively display the css3 style, different prefix declarations are required for different browser kernels, such as:

Private prefixes in CSS3

-moz-:Firefox,GEcko engine

-webkit-:Safari and Chrome,Webkit engines

-o-:Opera (early), Presto engine, later changed to Webkit engine

-ms-:InternetExplorer,Trident engine

Use these prefixes to ensure that the properties of css3 take effect under a specific browser rendering engine. Unified engine generally does not recognize the prefixes of other engines. Currently, browsers on mobile devices are relatively uniform, using webkit engines, so if we only need to be compatible with mobile devices, we only need to use the-webkit- prefix.

How to use the css3 prefix

When using new css3 attributes, you generally need to put the prefixed attribute first and the unprefixed version on the last line:

1-webkit-box-shadow:05px5pxrgba (0pr 0pl 0.5)

2-moz-box-shadow:05px5pxrgba (0pr 0pl 0.5)

3-o-box-shadow:05px5pxrgba (0pr 0pl 0.5)

4box-shadow:05px5pxrgba (0pr 0pl 0.5)

With the upgrade of browsers, most new versions of browsers already support writing without prefixes, so prefixes are only for compatibility with lower versions, and those without front ends are standard attributes.

So if you want to remove these prefixes, there are ways to meet compatibility at the same time. We can choose the Autoprefixer tool, a post-processing plug-in that handles browser prefixes in the best way, whether you use webpack, gulp, grunt or fis.

With Autoprefixer you can forget all about the CSS prefix, although you can write your CSS normally according to the latest W3C specification without the need for a browser prefix. Like this:

1a {

2display:flex

3}

Autoprefixer uses a database to provide you with prefixes based on the popularity of the current browser and attribute support, output:

Copy the code

1a {

2display:-webkit-box

3display:-webkit-flex

4display:-ms-flexbox

5display:flex

6}

At this point, the study on "what are the private prefixes of CSS3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.