Bitsofco. De / 3-new-CSS-F…

@ Ire Aderinokun

I plan to learn some new things in the New Year, and I am very interested in the following three.

CSS Feature Queries

Not long ago, I wrote a separate article called The One CSS feature I really want to mention that I’m looking forward to CSS features. It is now supported by most browsers except Internet Explorer. For feature queries you only need to use @support, which allows us to embed CSS representations for conditional judgment, and if supported browsers will execute the included statements. One that often comes to mind is judging support for Flex.

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

In addition, we can implement more complex query statements using AND and not. For example, we can determine if the browser only supports the Boss Flex syntax.

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

Grid Layout

CSS grid layout is the first system for creating cell layouts. Similar to Flex layout, but more specifically for page layout, it has very syntactic properties.

Grid layout is made up of (display:grid) containers. Using grid layout, we can explicitly set the placement and order of these cell elements.

For example, we can implement simple Holy GrailLayout, which is roughly a contour layout. I wrote a special article The Holy Grail Layout with CSS Grid to introduce The specific implementation.

.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; }}Copy the code

Retractable length

The layout of the CSS Grid brings in a new unit, FR., for how much space is left. It allows us to specify the width and height of the element, depending on how much space is left. For example, in Holy Grail Layout, I want the.main selection to take up the remaining space on both sides.

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

Blank space

We can use grid-row-gap grid-column-gap, and grid-gap to achieve spacing control for grid layout. It takes a percentage unit that represents the specific length of the grid area.

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

CSS variable

New draft on CSS custom variables You can use custom variables to assign CSS values.

For example, if we want to set the theme color, we need to use this color in many places in the style sheet. Instead of assigning directly, we can set these colors as variables and reference them elsewhere. (Those of you who have written less Sass will appreciate its benefits.)

:root {
  --theme-colour: cornflowerblue;

}

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

Of course, this feature has been supported by LESS and Sass for a long time, but CSS implementation of this support also has certain advantages, such as we can achieve color through JS worth uniform update.

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum');  
Copy the code