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

This article introduces the knowledge of "do you want to add webkit before Css3 attributes?". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In css, in order to be compatible with the attribute support of different browsers, browser vendors will add a private prefix to the attribute to support the new attribute; the attribute with the prefix "- webkit-" can be used normally in browsers with webkit as the core, such as "safari" and "chrome" browsers.

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

Why add webkit before Css3 attribute

Some new properties have been added to CSS3, such as box-reduis, box-orient, text-overflow, and so on, which did not exist or were not supported in previous versions, so the kernel name is specified for different browsers so that they can parse these new attributes. This seems like a reasonable explanation that-moz- is for firefox and-webkit- is for safari and chrome.

-moz represents the private properties of the firefox browser

-ms represents the private properties of the ie browser

-webkit represents the private attributes of safari and chrome

Before the standard is determined, some browsers have already implemented some functions according to the initial draft. In order to be compatible with the later standard, each browser uses its own private prefix to distinguish from the standard. When the standard is established, the major browsers will gradually support the new css3 attributes without prefixes.

Examples are as follows:

Div {width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px # 888888; / * Old Firefox * / box-shadow: 10px 10px 5px # 888888;}

Why should there be a private prefix? Because the W3C, the organization that sets HTML and CSS standards, is slow. Usually, W3C members propose a new attribute, such as fillet border-radius, which everyone thinks is good, but W3C will not set a standard for this attribute, but will have to go through a very complicated process and go through a lot of reviews.

Browser vendors are not willing to wait that long, they think that an attribute is mature enough, so they will add support to the browser. However, to avoid any changes when the W3C publishes the standard in the future, a private prefix, such as-webkit-border-radius, will be added to support the new attributes in advance. When the W3C publishes the standard and the standard writing method of border-radius is established, the new version of the browser will support border-radius.

For example, Chrome 10 does not recognize border-radius. It can only be written in webkit-border-radius, and Chrome12 can recognize it. So when writing CSS, writing like this ensures that both Chrome10 and Chrome12 can be displayed correctly when browsing the web.

At present, there are many private prefixes that can not be written, but in order to be compatible with older browsers, we can still use private prefixes and standard methods to gradually transition.

This is the end of the introduction of "do you want to add webkit before the Css3 attribute"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.