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

In this issue, the editor will bring you all the details about CSS. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

If these features are the gorgeous side of CSS, let's take a look at its simple side: obscure things, such as selectors, units, functions (methods). I often say it's tedious, but I mean they can do beautiful work, and that's what I want to share.

I don't know, let's take a look at the CSS details of these effects; these details are not nearly as compelling as the cool CSS effects. Some of them have been around for some time, but they deserve to be known better, while others have just come out. Although inconspicuous, they can improve our work efficiency.

Relative unit

Smart and forward-looking developers already use relative units-- such as em or percentages-- so developers understand the problem: calculators are often needed as an auxiliary tool to calculate sizes because of element inheritance. For example, it is now common practice to set the global size of the font on the page, and then define other elements of the page in relative units. CSS would probably write:

Html {font-size: 10px;}

It's okay to write this until there is a child element that needs to be set to a different font size, for example, in a tag like this:

The cat sat on the mat.

If you want to set the font size of span to 1.2em, what do you need to do? Take out the calculator and calculate what 1.2 divided by 1.4 is. The result is as follows:

P span {font-size: 0.85714em;}

This problem is not limited to em. If you use a percentage to create a responsive streaming layout site, and the percentage is related to the container, so if you want to define an element as 40% of its container, its height is 75% and its width needs to be set to 53.33333%. Obviously, this is very inconvenient.

Root-related unit of length

To fix the problem with font size definition, you can now use units rem (root em). Rem is also a relative unit, but it corresponds to a fixed base value, which is the font size of the root element of the document (in the HTML file, the html element). Assuming that, as in the previous example, the font size of 10px is also set to the size of the root element, CSS writes OK like this:

P {font-size: 1.4 rem.}

Both CSS rules are relative to the font size of the root element, which makes the code more elegant and simple, especially when setting simple values such as 10px or 12px. This is similar to using PX values, except that rem is extensible.

Among the features introduced throughout this article, the rem feature is relatively compatible and can be supported by advanced browsers, including IE9, except Opera Mobile.

Window-related unit of length

Think rem units are cool, but it would be even cooler if there is another group of units that can solve the percentage problem. It is similar to rem except that it is relative not to the root element of the document, but to the size of the device window itself.

These two units are vh and vw, which are the height and width relative to the size of the window. Each unit is preceded by a number, which represents the percentage.

Div {height: 50vh;}

In the above example, the height is set to half the height of the window. 1vh equals a percentage of the window height, so 50vh is 50% of the window height.

If the window size changes, so does this value. The advantage of this relative percentage is that there is no need to worry about the parent container, and the element of the 10vw will always be 10% window size, regardless of its parent container.

Accordingly, there are vmin units, which are equivalent to the minimum value of vh or vw, and recently announced that vmax units will be added to the specification document (although not at the time of publication of this article).

IE9+, Chrome, and Safari 6 now support this feature.

The value of an expression

If you are doing a responsive streaming layout site, you will often encounter the problem of mixed units-setting the grid with a percentage, but setting the margin with a fixed pixel width. Such as:

Div {

If the layout only uses padding and border, you can use box-sizing to solve it, but there is nothing you can do about margin. A better and more flexible approach is to use the calc () function to set mathematical equations between different units, such as:

Div {

It can be used not only to calculate width, but also to calculate length-- if necessary, add calc () to calc ().

This feature is supported by both IE9+ and Firefox, Firefox needs to be prefixed with-moz- (it may not be prefixed on version 16 or 17), Chrome and Safari also support, but need to be prefixed with-webkit-. However, Mobile Webkit is not supported yet.

Load some fonts of the font library

Superior performance is often important, especially in the variety of mobile devices in the market-which lead to differences and uncertainties in connection speeds. One of the ways to speed up page loading is to reduce the number of external files, which is why a new attribute of @ font-face, unicode-range, is created.

This property is unicode-range (Encoding range), which represents the parameter range of the encoded font. When loading external files, only those fonts that are used are loaded, not the entire font library. The following code demonstrates how to load only three fonts from the foo.ttf font library:

@ font-face {

This is especially useful for pages that use font icons. I have tested that with unicode-range, the time to load font files has been reduced by an average of 0.85 seconds, which is not a small number. Of course, you may not think so.

This property can currently be run in IE9+ and Webkit browsers such as Chrome and Safari.

New pseudo class

Both units and values should be made good use of, but what excites me more are selectors and pseudo classes. The perfect selector mode, even if only a few browsers support it, excites me. To quote Jobs: you have to make the inside of the fence as beautiful as the outside, even if no one else can see it-because you know it.

When I used nth-of-type () for many times, it was a breakthrough, just like I broke out of the shackles of my mind. Okay, I'm exaggerating. But there are some new CSS pseudo-classes that are really worth the frenzy.

Negative pseudo-class

You probably don't know: the not () pseudo class is good unless you practice it yourself. With parameters: not () is actually a normal selector-- not a composite selector. A set of elements plus a selector: not () indicates that elements that satisfy this parameter will be excluded. Doesn't that sound a little complicated? But it's actually very simple.

Suppose: you want to select odd rows of the project list, except for one line. If it was before, you need to write like this:

Li {color: # 00F;}

Now, by setting: last-child as the parameter that negates the pseudo class, you can exclude an element, which is less than one line of code, making it more concise and easy to maintain.

Li {color: # 00F;}

Denying pseudo-classes doesn't seem to be surprising, you can use it, but it's still quite practical. I have used it in Webkit-based projects, and the advantages are quite obvious. To be honest, it is one of my favorite pseudo-classes.

Yes, I have my favorite pseudo class.

Among the features mentioned in this article, negative pseudo classes are compatible and are supported by IE9+ and advanced browsers (no browser vendor prefix is required). If you are familiar with jQuery, you may be used to using it-it has been available since version 1.0, as well as the similar not () method.

"apply to" pseudo class

The matches () pseudo class can take a normal selector, composite selector, comma-separated list, or any combination of selectors as arguments. great! But what can it do?

The big part of the matches () pseudo class is the aggregate multiline selector. For example, to select the p element in several different child containers in the parent container, the code might be written like this:

.home header p

With the matches () pseudo class, you can extract the common ground and reduce the amount of code. In this example, what the selector has in common is that it starts with home and ends with p, so you can use: matches () to aggregate all the elements in the middle. Are you a little confused? Just look at the code and see:

.home: matches (header,footer,aside) p {color: # F00;}

This is actually part of CSS4 (level 4 of CSS selectors, to be exact), and the specification document also mentions that there will be similar syntax (comma-separated composite selectors) applied to: not () pseudo-classes. Excited, ing!

Currently,: matches () can be run in Chrome and Safari browsers, but with a prefix-webkit-,Firefox is also supported, but it should be written in the old way: any (), with the-moz- prefix.

These are the details of the CSS that the editor shared for you. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.