Share three examples of new CSS features-CSS Tutorial-php.cn

Share three examples of new CSS features

零下一度

Release： 2017-05-12 14:16:04

Original

1243 people have browsed it

This is a translated article. The original text is: 3 New CSS Features to Learn in 2017. The translation is not very good. If you have any questions, please point out.

In the new year, we have a series of new things to learn. Although there are many new features in CSS, there are three features that I am most excited to learn.

1. Feature Queries (feature query)

Before this I wrote an article about Feature Queries the one CSS feature I really want. Now, it's here! Currently, all major browsers support feature query (including Opera Mini), except IE browser.

Feature Queries, using @supports rules, allows us to write CSS rules in its conditional area, only when the current user's browser supports a certain CSSproperty-value pair , the CSS code block will take effect.

To give a simple example, in the following code, only when the browser supports display: Flexbox styles are only applied when flexing.

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

Copy after login

In addition, we can also use some operators, such as and and not, so that we can create more complex feature queries. For example, we can identify whether a browser supports older versions of Flexbox syntax.

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

Copy after login

Browser support

Extension

Feature Queries also supports Javascript Interface: CSS.supports(), also used Take the above example to see how to use it:

if ( CSS.supports( &#39;(display: flex)&#39;) ) {
    console.log(&#39;支持flex&#39;)
} else {
    console.log(&#39;不支持flex&#39;)
}

if ( CSS.supports( &#39;(display: flexbox)&#39; ) ) {
    console.log(&#39;支持flexbox&#39;)
} else {
    console.log(&#39;不支持flexbox&#39;)
}

Copy after login

2. Grid Layout

The CSS grid layout module defines a system for creating a grid-based layout. This is similar to the flexbox layout module, but the grid layout is specifically designed for page layout and therefore has many different features.

Explicit Item Placement

A grid system is composed of a grid container (Grid Containe, represented by display: grid creation) and grid items (Grid Item). In our CSS, we can easily and explicitly organize the layout and order of the grid items, independently of the layout in the markup.

For example, I used the Grid Layout module to create a Holy Grail layout in the article Holy Grail Layout with CSS Grid.

Share three examples of new CSS features

Main HTML code:

<body class="hg">
    <header class="hgheader">Title</header>
    <main class="hgmain">Content</main>
    <aside class="hgleft">Menu</aside>
    <aside class="hgright">Ads</aside>
    <footer class="hgfooter">Footer</footer>
</body>

Copy after login

Main CSS code:

.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;
    }
}

Copy after login

Flexible length

CSS Gate The grid module introduces a new length unit: the fr unit, which represents the portion of space remaining in the grid container.

We can allocate the height and width of the grid items through the available space of the grid container. For example, in the Holy Grail layout, I want the main container to occupy all the space except the containers on both sides. To achieve this effect, just write the following code:

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

Copy after login

Space between elements

We can specifically define the gaps between elements in the grid layout. The grid-row-gap, grid-column-gap and grid-gap properties can do this. These properties accept a percentage Data type as value, the percentage corresponding to the size of the content area.

For example, with a 5% gap, you could write:

.hg {
    display: grid;
    grid-column-gap: 5%;
}

Copy after login

Browser support

The CSS grid module will be available in browsers as early as March of this year ( Provides default support).

What should I do if I want to experience it now?

Refer to my record: How to enable CSS Grid Layout in each browser.

3. Native Variables

The last one is local CSSVariables. This module introduces the method of creating user-defined variables, which can assign a variable to a CSS property.

For example, if I have a theme color that is used in several places, then I can abstract the theme color into a variable and

reference# when using it. ##This variable is easier to maintain than writing this color in multiple places.

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); }

Copy after login

In the past, we usually used CSS preprocessors to achieve this effect, such as SASS, but CSS variables have the advantage of always existing in the browser. This means that these variable values can be modified online. For example, in order to

update the

--theme-colour attribute value, you can use the following method:

const rootEl = document.documentElement;  
rootEl.style.setProperty(&#39;--theme-colour&#39;, &#39;plum&#39;);

Copy after login

[Related recommendations]

Free css online video tutorial

css online manual

php.cnDugujiujian(2)-css video tutorial

The above is the detailed content of Share three examples of new CSS features. For more information, please follow other related articles on the PHP Chinese website!