20th Chapter CSS3 prefix and REM

Learning Essentials:

1.CSS3 Prefix

2. Length Unit REM

Keynote Teacher: Li Tinghui

This chapter mainly discusses some problems about the standardization of CSS in the development of HTML5, and focuses on the new attribute prefix problem and the new unit rem in CSS3.

A. CSS3 prefix

When many of the new properties of CSS3 are introduced, these properties are still in a less stable phase and may be rejected at any time. In order to implement these properties, the browser vendor uses the prefix method. The list of major vendor prefixes is as follows:

Browser	Vendor prefix
Chrome, Safari	-webkit-
Opera	-o-
Firefox	-moz-
Internet Explorer	-ms-

We have learned several new properties of CSS3, such as Box-shadow, Border-radius, opacity and so on. These several properties we used in the previous, and did not add the so-called browser vendor prefix. That's because these attributes have become standard in mainstream browsers or versions. The specific evolutionary steps are as follows:

1. Property has not been raised, this property is not available for all browsers;

2. The attribute is presented, but not included in the standard, and the browser vendor supports the property through a private prefix;

3. Attribute is included in the standard, you can use the prefix or do not use the prefix to achieve attribute characteristics;

4. Attributes do not need to be prefixed, and all browsers are supported stably.

Let's take Border-radius for example, which is the standard attribute of CSS3. Early in the experimental phase, when not included in the standard, you need to use the vendor prefix. The specific browser support level is as follows:

Property	Browser	With prefix version	Version without prefix	Standards/Experiments
Border-radius	Ie	Not supported	9.0+	Standard
	Firefox	3.0 need to take-moz-	4.0+
	Safari	3.1 Need to take-webkit-	5.1+
	Chrome	4.0	5.0+
	Opera	Not supported	10.5+

If the mobile phone, such as the general use of IOS or Android system, then basically its engine is WebKit, direct reference-webkit-can be.

In the CSS3 manual, Chrome supports Border-radius version 13.0, while some textbooks and articles write as long as 5.0. Of course, the meaning may be different here. As of April 2015, the latest version of Chrome has reached 41.0, so whether it's 5.0 or 13.0 is a relic, and there's no need to delve into it. Opera supports the Border-radius version of 11.5, and the current version is 28.0, which is harmless.

The standard Box-shadow and opacity are basically the same as the Border-radius prefix version.

Because at the standard stage, there is no need to write a prefix.

{    Border-radius: 50px;}

The writing of the experimental stage

{    -webkit-border-radius: 50px;     -moz-border-radius: 50px;     Border-radius: 50px;}

The experimental phase of the writing has three sentences, explained separately:-webkit-represents the Chrome browser private property prefix,-moz-represents the Firefox private property prefix, if it is in the experimental stage of the old version of the browser, then does not support Border-radius, This is supported by the vendor prefix. If it is a new version of the browser, is already in the standard stage, then there are two ways: 1. If the new browser deprecated the prefix, then the prefix notation is not supported, only support standard notation; 2. If the new version of the browser does not discard the prefix, both are possible, but note the order and the property values are consistent.

If there are four prefixes + a standard notation, four prefixes are used when the experimental phase allows the browser vendor of the four engines to support its own private properties, a standard notation indicates that when this attribute is included in the standard, the standard properties are executed directly using the new version of the browser runtime.

A problem occurs when the prefix is written behind the standard and the values are different

{    Border-radius: 50px;     -webkit-border-radius: 100px;}

Special Note: 1. IE prefix-ms-, and Opera prefix-o-, does not exist in Border-radius; 2. The current Opera browser also supports-webkit-prefix,-webkit-border-radius can support; 3. Safari for Windows was abandoned by Apple in 2012 and the legacy version is 5.1.7.

Last note: The official position of the website indicates that the properties of the experimental phase are only for testing and may be modified or deleted in the future. A large number of developers also think that in the actual project should not use the prefix, and the use of an elegant downgrade to ensure a certain user experience, and by gradual increase or decrease in the way the new advanced browser to ensure the highest effect.

two. Length Unit rem

CSS3 introduced some new dimension units, which are here to recommend one: Rem or become (Root em). The current mainstream of modern browsers are very stable support. Unlike EM and percentages, it is not linked to the parent element, but rather to the text size of the root element

First, take a piece of HTML

<H1>Title<em>Small title</em></H1><P>I was a paragraph, and I was a<Code>Code</Code></P>

followed by a section of CSS

{    font-size: 62.5%;}  {    font-size: 3em;}  {    font-size: 1.4em;}

Here are a few explanations, and we used a lot of PX units for layout in our previous Web design. Because the early fixed layout using PX is more convenient, gradually developed this habit. The use of EM units is actually more flexible, especially when modifying the style, only need to modify the hook element of the size can be, no need to modify each element.

But even if it is em, there is a certain problem. The default font size for the Web page is 16px, and the page datum is set to 10px with

Now the problem is,<code> inside the text want to set 11px, how to do? Set 1.1em? No, because the parent element of the hook is not

Units directly based on

{    font-size: 1.1 rem;}  

Browser	REM units
Opera	11.6+
Firefox	3.6+
Safari	5.0+
Chrome	6.0+
Ie	9.0+

20th Chapter CSS3 prefix and REM