Home > Article > Web Front-end > Share three examples of new CSS features
Share three examples of new CSS features
- 零下一度Original
- 2017-05-12 14:16:041158browse
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; }
}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;
}
}Browser support
Extension
Feature Queries also supports JavascriptInterface: CSS.supports(), also used Take the above example to see how to use it:
if ( CSS.supports( '(display: flex)') ) {
console.log('支持flex')
} else {
console.log('不支持flex')
}
if ( CSS.supports( '(display: flexbox)' ) ) {
console.log('支持flexbox')
} else {
console.log('不支持flexbox')
}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.
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>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;
}
}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;
}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
For example, with a 5% gap, you could write:
.hg {
display: grid;
grid-column-gap: 5%;
}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 andreference# 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); } 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
--theme-colour attribute value, you can use the following method: const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');
[Related recommendations]
1.
Free css online video tutorial css online manualphp.cnDugujiujian(2)-css video tutorialThe 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!