Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about what are the three new features of CSS that are worth learning, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

1. Property query

Not long ago, I wrote about a CSS feature I really hoped for, which is about feature query, and now it basically exists! It supports mainstream browsers other than Internet Exploer (including Opera Mini).

The feature query, using the @ supports rule, allows us to include CSS in a condition block that checks whether the current user agent supports a CSS attribute key-value pair before the content takes effect if it does. Here is a simple example of using display: flex-only when the browser supports Flexbox

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

In addition, using operators like and and not, we can create even more complex feature queries. For example, we can check whether browsers only support the old Flexbox syntax-

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

two。 Table layout

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

Clear project positioning

The grid consists of a table container (created through display: grid) and table items (subcomponents). In our CSS, we can clearly organize the location and order of table items, regardless of their tags (HTML tags).

For example, I wrote an article on the layout of the Holy Grail using the CSS table, which shows how to create the famous "Holy Grail layout" through this module.

There are only 31 lines of CSS on the back-

.hg _ _ header {grid-area: header;} .hg _ _ footer {grid-area: footer;} .hg _ _ main {grid-area: main;} .hg _ _ left {grid-area: navigation;} .hg _ _ right {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 division of the remaining space in the table container.

It makes it possible for us to assign height and width to table items according to available space in the table container. For example, in the Grail layout (Holy Grail Layout), I want the main partition to occupy all the space except the two sidebars. I wrote a simple piece of code to do this-

.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 of these properties are data types and are percentage of the size of the content area.

For example, if you need a spacing of% 5, you can write-

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

The CSS Grid module was first supported by browsers in March this year.

3. Primary variable

* We are talking about native CSS variables. This module introduces a way for the creator to define a variable that can be assigned like the CSS property.

For example, if we use a theme color in more than one place in our stylesheet, we can abstract it into a variable and reference the variable instead of writing the actual value directly multiple times.

: root {--theme-colour: cornflowerblue;} H2 {color: var (--theme-colour);} a {color: var (--theme-colour);} strong {color: var (--theme-colour);}

These things can already be done in CSS preprocessors such as SASS, but the CSS variable is active in the browser. That is, their values can be updated in real time. For example, to change the value of the theme-color property in the above example, we just need to do this-

Const rootEl = document.documentElement; rootEl.style.setProperty ('--theme-colour', 'plum'); after reading the above, do you have any further understanding of the three new features of CSS that are worth learning? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.