CSS is too exciting future: on the one hand, is a new page layout; On the other hand, it is cool in the filter, color and other visual effects. These CSS, developers, magazine and blog posts with introduction.
if these features are CSS side, that is simple: let's take a look at it very small things, such as selectors, units and functions (methods). I often say this is trival things, but I mean they can do beautiful to live, that's what I want to share.
how to say, let's take a look at the effect of the best simple CSS details – – These details is far from those cool CSS so dramatic effect. Some they have existed for some time, but it is worth we know each other better, and some are just available. Although small, but they can improve our work efficiency – – With modest attitude. Relative unit

code is as follows:


HTML {the font - size: 10 px; P {} the font - size: 1.4 em; }

it is no problem, until you have a child you need to set up a different font size, for example, in this kind of tag:
The cat sat>

  code is as follows:  


p span {The font - size: 0.85714 em; }

the problem is not limited to em. If the percentage is used to create responsive streaming site layout, and the percentage is associated with the container, so, if you want to define a element for 40% of its container, its high is 75%, and wide you need to set to 53.33333%.
it is clear that this is not very convenient.

root length unit related
code is as follows:


p {the font - size: 1.4 rem; P span {to} the font - size: 1.2 rem; }

the two CSS rules are relative to the root element's font size, so that the code is more elegant and easy, especially in setting up simple values, such as 10 px or 12 px. That is similar to use px values, differences in rem is extensible.
in features of the whole article, rem features are relatively better compatibility, can support advanced browsers, including Internet explorer 9, in addition to the Opera Mobile.

the length of the window related units
code is as follows:


div {height: 50 vh; }

in the example above, the height is set to half of the window height. 1 the vh is equivalent to a percentage of the window height, so 50 vh is 50% of the window height.
if the window size has changed, then the value has changed. Relative percentage, the benefit is that you don't need to worry about the parent container, regardless of its parent container, 10 elements with vw will window size has been 10%.
accordingly, vmin unit, equivalent to the minimum value of the vh or vw, also recently announced the vmax units will be added into the specification document (although the time has not yet released in this article).
support this feature now have Internet explorer 9 + 6, Chrome and Safari.

operation the value of the
code is as follows:


div {margin: 0 px; 20 Width: 33%; }

if layout is used only to the border and padding, you can use a box - sizing to solve, but the margin is powerless. Better, more flexible approach is to use calc () function, set up the mathematical equation between different units, such as:

  code is as follows:  


div {margin: 0 px; 20 Width: calc 40 px (33%); }

it not only can be used to calculate the width, length can also be used to calculate – – If necessary, also can be in calc () to add calc ().
this feature IE9 + and Firefox support, Firefox need plus - moz - prefix (in version 16 or 17 May not add prefix), Chrome and Safari also support, but need to add webkit -- prefix. However, mobile Webkit doesn't support.

load font library part of the font
code is as follows:


@ the font - face {the font-family: foo; SRC: url (" foo. The vera.ttf "); Unicode - range: U + 31-33; }

this is especially useful to use the fonts icon pages. I've tested, the use of unicode - range, load font file time dropped an average of 0.85 seconds, also is not a small sum of money. Of course, you may not think so.
this property, can currently in IE9 +, Webkit browser (such as Chrome and Safari) run.

a new pseudo class
code is as follows:


li {color: # 00 f; Child (odd) {} li: NTH - color: # F00; Child {} li: last - color: # 00 f; }

now, by setting: the last - the child as negative pseudo-class parameters, you can exclude the last element, the less a line of code, which is more concise and easy maintenance.

  code is as follows:  


li {color: # 00 f; } li: NTH - child (odd) : not (: last - child) {color: # F00; }

no pseudo class didn't seem to be what amazing place, you can use it, but it is quite practical. I used to use it on based on the Webkit project, the advantages are obvious. To be honest, it is one of my favorite pseudo-class.
b: yes, I have a favorite pseudo-class.
among the features mentioned in this paper, negative pseudo-classes are the best compatibility, it is Internet explorer 9 + and advanced browser support (no need to add a browser makers prefix). If you are familiar with jQuery, you can use it – – Version 1.0 has had, and similar the not () method.

&other; Apply to &throughout; Pseudo-classes

code is as follows:


home header, p. Home footer, p. Home value p {color: # F00; }

a: matches () pseudo class that can be extracted from the common ground, reduce code size. The cases selectors have in common is that the home as the starting point, p as an end, so you can use: matches () in the middle of all the elements together. Some confusion? Look at code will understand:

  code is as follows:  


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

this is actually part of CSS4 (specifically, is the fourth grade in CSS selectors), the specification document mentioned there will be similar to the syntax of the compound selector (separated with a comma) applied in: the not () pseudo class. Ing excited!
currently, : matches () can be run in Chrome and Safari, but with the prefix -- webkit, Firefox support also, but should according to the old way: any (), at the same time to add moz -- prefix.

are you in love with these simple CSS details?# 0 - #


This concludes the body part