CSS details: Selectors, units, functions (methods)

Article Introduction: The best thing about the characteristics of this article is that they solve real-world problems, from trivial and cumbersome selectors to new challenges in building responsive web sites. In fact, I expect every feature to be used in the most mundane projects.

The future of the CSS is so exciting: on the one hand, is a new way of page layout, on the other hand, cool filters, colors and other visual effects. These CSS, popular with developers, are covered by magazines and blog posts.

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

Well, let's take a look at the simple CSS details that work best--these details are far less compelling than the cool CSS effects. Some of them have been around for some time, but they deserve a better understanding and some are just on the way. Although inconspicuous, they can improve our productivity--in a humble manner.

Relative units

Smart and forward-looking developers have used relative units --such as EM or percentages--so developers understand the problem: often because of the inheritance of elements, you need to use a calculator as an auxiliary tool to compute the size. For example, it is now common practice to set global dimensions on the font of the page, and then use relative units to define the other elements in the page. CSS will probably write this:

HTML {font-size:10px;}

p {font-size:1.4em;}

This is no problem until a child element needs to set a different font size, for example, in a label like this:

The cat sat on the mat

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

P span {font-size:0.85714em;}

This question is not limited to EM. If you create a response-style streaming layout web site in percentages, and the percentages are related to the container, if you want to define an element as 40% of its container, its height is 75%, and the width needs to be set to 53.33333%.

Obviously, it's inconvenient.

Root-related length units

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

p {font-size:1.4rem;}

P span {font-size:1.2rem;}

These two CSS rules are relative to the root element's font size, and such code is more elegant and simple, especially when setting simple values such as 10px or 12px. This is similar to the use of PX values, except that REM is extensible.

In the features described throughout the article, REM features are relatively good compatibility, and advanced browsers can support it, including IE9, except opera Mobile.

Window-related length units

Think REM units are cool, and it's even cooler if there's another set 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, that is, relative to the height and width of the window size. Each unit is preceded by a number, representing the number of percentages.

div {HEIGHT:50VH;}

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

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

Accordingly, there is a vmin unit, which is equivalent to the minimum value of VH or VW, and recently announced that Vmax units will be added to the specification document (although not yet available when this article was published).

This feature is now supported by ie9+, Chrome, and Safari 6.

The value of an expression

If you're doing a responsive streaming layout site, you'll often encounter mixed-unit problems--set the grid with a percentage, but set the margin with a fixed pixel width. Such as:

div {

margin:0 20px;

width:33%;

}

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

div {

margin:0 20px;

Width:calc (33%-40px);

}

Not only can it be used to compute the width, but it can also be used to calculate the length--and add calc () to Calc () if necessary.

This feature ie9+ and Firefox support, Firefox needs to add-moz-prefix (in version 16 or 17 may not prefix), Chrome and Safari also support, but need to add-webkit-prefix. However, mobile WebKit is not yet supported.

Load part of Font library fonts

Superior performance is often important, especially for the variety of mobile devices on the market-the difference and uncertainty that leads to connection speed. One way to speed up the page load is to reduce the number of external files, @font a new attribute of-face Unicode-range is born for this.

This property is the Unicode-range (encoding range) that represents the range of parameters for the encoded font. When you load an external file, only those fonts that are used are loaded, not the entire font library. The following code shows how to load only three fonts from the Foo.ttf font library:

@font-face {

font-family:foo;

Src:url (' Foo.ttf ');

unicode-range:u+31-33;

}

This is especially useful for pages that use font icons. I tested, using Unicode-range, the average time to load a font file was reduced by 0.85 seconds, not a small number. Of course, you might not think so.

This property can now be run in ie9+, WebKit browsers such as Chrome and Safari.

New Pseudo-Class

Units and values should be used well, but what makes me more excited is selectors and pseudo classes. Perfect selector mode, even if only a small number of browser support, I am thrilled. Quote jobs: You have to make the inside of the fence as beautiful as the outside, even if they can't see it-because you know it.

The first time I used: Nth-of-type (), it was a breakthrough, just as I rushed out of the shackles of thought. Well, I'm a little exaggerated. But there are some new CSS pseudo classes that really deserve a frenzy.

Negation Pseudo class

You probably don't know: 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 selectors: not (), which indicates that the element that satisfies this parameter is excluded. Sounds a little complicated, doesn't it? But it's actually very simple.

Suppose you want to select odd rows in the list of items, except for the last line. If this is the case before, you need to write this:

Li {color: #00F;}

Li:nth-child (odd) {color: #F00;}

li:last-child {color: #00F;}

Now, by setting: Last-child as a negation of the pseudo class parameters, you can exclude the last element, so less line of code, thus more concise and easy to maintain.

Li {color: #00F;}

Li:nth-child (ODD): not (: last-child) {color: #F00;}

The negation pseudo class doesn't look amazing, you can use it, but it's practical. I used to use it in projects based on WebKit, and the advantages are quite obvious. To tell the truth, it is one of my favorite pseudo classes.

Yes, I have a favorite pseudo class.

Among the features mentioned in this article, the negation pseudo class is the best compatible, and it is supported by ie9+ and advanced browsers (without the need to add a browser-maker prefix). If you're familiar with jquery, you might get used to it--starting with version 1.0 and a similar not () method.

"Apply to" pseudo class

: the matches () pseudo class can be used as a parameter by a common selector, a composite selector, a comma-separated list, or any combination of selectors. That's great! But what can it do?

: The most powerful place for the matches () pseudo class is to aggregate multiline selectors. For example, to select the P element inside several different child containers within the parent container, the code might write this before:

. Home header P,

. Home footer P,

. Home aside p {

color: #F00;

}

With: Matches () Pseudo class, you can extract the common ground, reduce the amount of code. In this example, the selector has the common point of starting at home and ending with P, so you can use: matches () to assemble all the elements in the middle. Is it a little confusing? Just look at the code and see:

. Home:matches (Header,footer,aside) p {color: #F00;}

This is actually part of the CSS4 (specifically, the fourth level of the CSS selector), which also mentions that there will be similar syntax (a comma-separated compound selector) applied to the: not () Pseudo class. Excited ing!

Currently,: Matches () can be run in Chrome and Safari browsers, but prefix-webkit-,firefox is also supported, but follow the old wording: any () and add the-moz-prefix.

Are you in love with these simple CSS details?

The best thing about the characteristics of this article is that they solve real-world problems, from trivial and cumbersome selectors to new challenges in building responsive web sites. In fact, I expect every feature to be used in the most mundane projects.

New features such as filters can be very intuitive and gorgeous, but I prefer to find practical tips hidden in the depths.

In the process of active exploration, each feature can make your career more smooth-think of this, it will not be tedious.

Article from: Learning to love the boring Bits of CSS