3 new CSS features worth learning in 2017 (recommended)

Height:1.76em; " > Among the many new features of CSS, 3 new features introduced this year have kept me from getting excited.

1. Feature Query

Not long ago, I wrote a CSS feature I really expected, that is, about feature queries, and now basically it already exists! It supports mainstream browsers (including Opera Mini) other than Internet exploer.

feature queries, which use @supports rules, allow us to include CSS in a conditional block, which checks whether the current user agent supports a CSS property key value pair, in which case the content will take effect. Here is a simple example that applies display:flex only when the browser supports Flexbox-

@supports (Display:flex) {  . foo {display:flex;}}

In addition, with operators like and and not, we can even create more complex feature queries. For example, we can detect if the browser supports only the old Flexbox syntax-

@supports (Display:flexbox)           and           (not (Display:flex)) {  . foo {display:flexbox;}}

Support situation

2. Table layout

The system defined by the CSS table layout module is used to create a table-based layout. It is similar to the Elastic box layout module, but it is more specifically designed for page layouts, and there are many different features between them.

Clear Project Positioning

The grid is made up of table containers (created by Display:grid) and table items (subcomponents). In our CSS, we can clearly organize the position and order of the table items, regardless of their markup (meaning HTML tags).

For example, I wrote an article using a CSS table for the sacred bosom layout, and this article shows you how to create a famous "Grail layout" through this module.

The CSS behind it is only 31 lines-

. hgheader {grid-area:header;}. Hgfooter {grid-area:footer;}. Hgmain {grid-area:main;}. hgleft {grid-area:navigation;}. hgright {grid-area:ads;}. HG {    Display:grid;    Grid-template-areas: "Header header Header"                         "Navigation main ads"                         "footer footer footer";    grid-template-columns:150px 1FR 150px;    grid-template-rows:100px                         1fr                        30px;    MIN-HEIGHT:100VH;} @media screen and (max-width:600px) {    . hg {        Grid-template-areas: "Header"                             "Navigation" "                             main" "                             Ads"                             "footer";        grid-template-columns:100%;        grid-template-rows:100px                             50px                             1fr                            50px                             30px;    }}

Flexible length

The CSS Grid module introduces a new unit of length, FR, which represents an equal to the remaining space in the table container.

It makes it possible to assign heights and widths to table items based on the available space in the table container. For example, in the Holy Grail layout (Holy Grail layouts), I want the main partition to occupy all the space beyond the two sidebar. I wrote a simple code to do this thing--

. HG {    grid-template-columns:150px 1fr 150px;}

Spacing

We can use the Grid-row-gap, Grid-column-gap, and Grid-gap properties to clearly define the spacing. The values for these properties are <length-percentage (percent of length) > data type, which is the percentage of the content area size.

For example, the spacing required for%5 can be written like this-

. HG {    Display:grid;    grid-column-gap:5%;}

Support situation

CSS Grid modules were first supported by browsers in March this year.

3. Native variables

The final word is the native CSS variable. This module introduces a method for creating a variable defined by the author, which can be assigned the same value as a CSS property.

For example, if we use a theme color in our stylesheet, we can abstract it out and save it in a variable, and then reference the variable, instead of writing the actual value many times.

: root {  --theme-colour:cornflowerblue;} H1 {Color:var (--theme-colour);}  A {Color:var (--theme-colour);}  Strong {Color:var (--theme-colour);}

These things can already be done in a CSS preprocessor like SASS, but CSS variables are active in the browser. In other words, their values can be updated in real time. For example, to change the value of the--theme-color property in the previous example, we only need to do this-

Const ROOTEL = document.documentelement;  RootEl.style.setProperty ('--theme-colour ', ' Plum ');

Support situation

What is the support situation?

As you can see, no feature is currently supported by all browsers, so what should we do to make it easy to use for production? The answer is: progressive enhancement! Last year I spoke in the Front end development Conference (Fronteers Conference) about how to make CSS-related progressive enhancements. Now I'm going to put it here-