Chapter 4 CSS3 prefix and rem-Water Original

Chapter 4 CSS3 prefix and original learning points of rem-water:

1. CSS3 prefix

2. length unit rem

Lecturer: Li Yanhui

This chapter mainly discusses the standardization of CSS in HTML5 development, and focuses on the new attribute prefix and new unit rem in CSS 3.

I.CSS3Prefix

When many new attributes of CSS3 are introduced, these attributes are still in an unstable stage and may be removed at any time. Browser vendors use the prefix method to implement these attributes. The prefixes of major manufacturers are listed as follows:

Browser	Vendor prefix
Chrome and Safari	-Webkit-
Opera	-O-
Firefox	-Moz-
Internet Explorer	-Ms-

We have learned several new attributes of CSS3, such as box-shadow, border-radius, and opacity. The browser vendor prefix is not added to these attributes. That's because these attributes have become standard in mainstream browsers or versions. The specific evolution steps are as follows:

1. attributes have not been proposed, and all browsers of this attribute are unavailable;

2. Property was proposed but not included in the standard. browser vendors support this property through private prefixes;

3. attributes are included in the standard. You can use a prefix or do not use a prefix to implement attribute features;

4. No prefix is required for attributes. all browsers support this feature stably.

Let's take border-radius as an example. It is the standard attribute of CSS3. In the early stage of the experiment, the vendor prefix is required if the standard is not yet included. The browser support is as follows:

Attribute	Browser	Prefix version	Version without prefix	Standard/Experiment
Border-radius	IE	Not Supported	9.0 +	Standard
	Firefox	3.0-moz-required-	4.0 +
	Safari	3.1-webkit-required-	5.1 +
	Chrome	4.0	5.0 +
	Opera	Not Supported	10.5 +

If mobile phones and other mobile terminals generally use IOS or android systems, the engine is basically webkit. For details, refer to-webkit.

In the CSS3 manual, Chrome supports border-radius 13.0, while some textbooks and articles only need 5.0. Of course, the meanings may be different here. As of January April 2015, the latest Chrome version has reached 41.0. Therefore, both 5.0 and 13.0 are old-fashioned and there is no need to go further. Opera supports border-radius 11.5, and the current version is 28.0, which is also harmless.

The box-shadow and opacity listed in the standard are basically the same as those in the border-radius prefix version.

// Because it is currently in the standard stage, there is no need to write a prefix

p {    border-radius: 50px;}

// Writing in the experiment stage

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

There are three examples in the experiment phase:-webkit-indicates the private property prefix of Chrome and-moz-indicates the private property prefix of Firefox, if the browser is an old version in the experiment stage, border-radius is not supported, and therefore supported by the vendor prefix. If the new version of the browser is already in the standard stage, there are two other arguments: 1. if the browser of the new version discards the prefix, the prefix writing method is not supported. Only standard writing is supported. 2. if the browser of the new version does not discard the prefix, both write methods can be used, but pay attention to the order, and the attribute values must be consistent.

If four prefixes + one standard syntax appear at the same time, the four prefixes allow browser vendors of the four engines to support their own private attributes during the experiment stage, A standard statement indicates that when this attribute is included in the standard, the standard attribute is directly executed when the new browser is running.

// The prefix is written after the standard, and the value is different, the problem may occur.

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

Note: The prefix-ms-of 1.IE and the prefix-o-of Opera do not exist in border-radius; 2. the current Opera Browser also supports-webkit-prefix and-webkit-border-radius. 3. safari for Windows was abandoned by Apple in 2012, with the legacy version 5.1.7.

Note: The W3C official position indicates that the attribute in the experiment stage is only for testing and may be modified or deleted in the future. A large number of developers also believe that prefix should not be used in actual projects, but an elegant degradation is used to ensure a certain user experience, the new advanced browser ensures the maximum effect through gradual increase and decrease.

Ii. Length UnitRem

CSS3 introduces some new size units. Here we recommend one: rem or become (root em ). Currently, mainstream modern browsers provide stable support. Unlike em and percentage, it is not linked to the parent element, but relative to the root element.To better unify the overall page style.

// First, refer to the HTML section

TitleSubtitles
I am a paragraph, I am a paragraphCode

// The next step is CSS.

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

Here are some explanations. In the previous Web design, we used a large number of px units for layout. Because the early fixed layout is more convenient to use px, and gradually develops this habit. The use of em units is actually more flexible, especially when you modify a style, you only need to modify the size of the hook element, without having to modify each element one by one.

But even if it is em, there are still some problems. The default font size of the web page is 16 PX.Set 62.5% and set the webpage benchmark to 10px. Set it to 3em, which is three times the size of itself;

Set to 1.4em, Which is 1.4 times of 10px, that is, 14px.

Now the problem is coming,In the text to set 11px, what should I do? Set 1.1em? No, because the parent element of the hook is notInstead

It is changed to 1.1 times of 14px, and to set 11px, you need to set 0.786 times. However, the calculation is too large. Therefore, W3C has introduced the direct root element unit: rem.

// Directly based onUnit

code {    font-size: 1.1 rem;} 

Browser	Rem Unit
Opera	11.6 +
Firefox	3.6 +
Safari	5.0 +
Chrome	6.0 +
IE	9.0 +