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

This article mainly explains "what is the meaning of webkit private prefix in CSS3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the meaning of webkit private prefix in CSS3".

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:

Webki private prefix 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.

Considerations for webki private prefixes in CSS3

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}

Thank you for reading, the above is the content of "what is the meaning of webkit private prefix in CSS3". After the study of this article, I believe you have a deeper understanding of what the meaning of webkit private prefix in CSS3 is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.