Some details of CSS styles

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

If these features are the ornate side of CSS, let's look at its earthy side: something very obscure, such as selectors, units, functions (methods). I often say that this is a tedious thing, but I mean they are capable of beautiful work, and this is what I want to share.

Let's take a look at these best-in-the-way CSS details-these details are far less compelling than the cool CSS effects. Some of them have been around for some time, but they are worth a better understanding and others are just on the way. It's not very noticeable, but they can improve our productivity--in a humble gesture.

Relative units

Smart and forward-looking developers have already used relative units -such as EM or percentages-so developers understand the problem: often, because of the inheritance of elements, the calculator is used as a helper to calculate the size. For example, it is common practice to set a global dimension to the font of a page, and then use relative units to define other elements in the page. CSS will probably write this:

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

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

The cat sat on the <span>mat</span>

If you want to set the font size of span to 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 problem is not limited to EM. If you create a responsive streaming layout site with percentages, and the percentages are container-related, 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, this is inconvenient.

Root-related length units

In order 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, which is the font size of the root element of the document (in the HTML file, the HTML element). Suppose the same as the previous example, the same set of 10px font size is the size of the root element, then the CSS is OK to write this:

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

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

In the features described throughout this article, REM features are relatively good compatibility and are supported by advanced browsers, including IE9, in addition to opera Mobile.

Window-related length units

Think the REM unit is cool, and if there's another set of units that can solve the problem of percentages, it's even cooler. It is similar to REM, except that it is relative to the size of the device window itself, rather than the root element of the document.

These two units are VH and VW, that is, relative to the window size of the height and width. Each unit is preceded by a number, which represents how many percentages.

div {HEIGHT:50VH;}

In the example above, the height is set to half the height of the window. 1VH corresponds 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 benefit 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 are vmin units, which are the minimum values of VH or VW, and recently announced that Vmax units will be added to the specification document (although not yet at the time 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 in percentages, 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 the box-sizing to solve it, but there is nothing to do with margin. A better, 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);}

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

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

Loading some fonts in the font library

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

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 will be loaded, not the entire font library. The following code demonstrates 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 that using Unicode-range, the time to load font files was reduced by an average of 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

The units and values should be used well, but what makes me more excited is the selector and pseudo class. Perfect selector mode, even if only a few browser support, it makes me excited. Quote Steve Jobs: You have to make the inside of the fence as beautiful as the outside, even if others can't see it-because you know it.

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

Negation pseudo-Class

You probably don't know that the 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 means that elements that satisfy this parameter are excluded. Sounds a little complicated, doesn't it? But it's actually very simple.

Assume that you want to select an odd row of the list of items, except for the last line. If this is the case, you need to write:

Li {color: #00F;} li:nth-child (Odd) {color: #F00;} li:last-child {color: #00F;}

Now, by setting: Last-child as the parameter of the negation pseudo-class, the last element can be excluded, so that there is less one line of code, so it is more concise and easy to maintain.

Li {color: #00F;} li:nth-child (odd): not (: last-child) {color: #F00;}

The negation pseudo-class does not seem surprising, you can use it, but it is quite practical. I used to use it in WebKit-based projects, and the advantages were quite obvious. To tell you the truth, it's one of my favorite pseudo-classes.

Yes, I have my favorite pseudo-class.

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

"Applies to" pseudo-class

: Matches () pseudo-class can be used as an argument with a normal 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 to matches () pseudo-class is to aggregate a multiline selector. For example, to select the P element inside a few different sub-containers within the parent container, the code might be written like this:

. Home Header p,.home Footer P,.home aside p {color: #F00;}

With: Matches () pseudo-class, you can extract the common denominator, reduce the amount of code. In this example, the common denominator of the selector is to start with home and P as the end point, 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), and this specification document also mentions that there will be a similar syntax (a comma-separated compound selector) applied to: not () pseudo-class. Excitement ing!

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

Are you in love with these simple CSS details?

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

New features such as filters may be very intuitive and gorgeous, but I'd rather find practical tips hidden in the depths.

In the process of active exploration, every feature can make your career smoother--it's not a chore to think about it.

Some details of CSS styles