Home > Developer > Web Develop
This is a translation of an article, the original is: 3 New CSS Features to learn in 2017, translation is not very good, if in doubt welcome to point out.
The new year, we have a series of new things to learn. Although CSS has a lot of new features, there are three features that make me the most exciting and learning.
1. Feature Queries (feature query)Before that, I wrote an article about feature queries, the one CSS feature I really want. Now, it's already here! Feature queries (including opera Mini) are currently supported by all major browsers, except for Internet Explorer.
Feature Queries, using @supports rules that allow us to write CSS rules within its conditional area, will only take effect if the current user browser supports a CSS property-value pair.
To give a simple example, the following code applies the Flexbox style only when display: flex the browser supports it.
@supports ( display: flex ) { .foo { display: flex; }}
Alternatively, you can use some operators, such as and with not , to create more complex feature queries. For example, we can identify whether a browser supports older versions of the Flexbox syntax.
Browser support Extension@supports ( display: flexbox ) and ( not ( display: flex ) ) { .foo { display: flexbox; }}
Feature queries also supports JavaScript interfaces: CSS.supports() Use the example above to see how to use:
if (Css.Supports' (Display:flex) ')){Console.Log' Flex support ')}else { Console. log ( "Flex not supported") }< Span class= "Hljs-keyword" >if (css. Supports ( ' (Display:flexbox) ') {< Span class= "hljs-built_in" >console. log ( ' support Flexbox ') } else { Console. log ( ' do not support Flexbox ') } The CSS Raster layout module defines a grid-based layout system. This is similar to the Flex box layout module, but the grid layout is designed specifically for page layouts, so there are many different features.
Explicit Item PlacementA raster system consists of a raster container (grid Containe, created by display: grid ), and a grid item (grid item). In our CSS, we can easily and unambiguously organize the layout and the order of the grid items, independent of the layout in the markup.
For example, I use the raster layout module to create a Grail layout in the article using the CSS grid for the Holy Grail layout.
The main HTML code:
<Body class="HG"><Header class="Hg__header">title</Header><Main class="Hg__main">content</Main><Aside class="Hg__left">menu</Aside><aside class= "Hg__right" >ads</aside> <footer class=< Span class= "hljs-string" > "Hg__footer" >footer</footer></BODY> The main CSS code:
. 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:150px1fr150px;Grid-template-rows:100px1fr30px;Min-height:100vh;}@MediaScreen and (max-width:600px) {.hg {grid-template-areas: " header " "navigation" "main" " ads "" footer "grid-template-columns: 100%grid-template-rows: 100px 50px span class= "DT" >1FR 50px 30px}} /span> The CSS Raster module describes a new unit of length: a fr unit that represents the remaining portion of space in a raster container.
We can allocate the height and width of the grid item through the free space of the raster container. For example, in the Grail layout, I want the main container to fill up all the space except for the containers on both sides, in order to achieve this effect, just write the following code:
Interval between elements.hg { grid-template-columns: 150px 1fr 150px;}
We can specifically define the voids between elements in a raster layout, grid-row-gap and grid-column-gap grid-gap properties can do this by accepting a <length-percentage> percentage data type as the value, which corresponds to the size of the content area.
For example, there are 5% voids that can be written like this:
Browser support.hg { display: grid; grid-column-gap: 5%;}
The CSS grid module will be available in the browser as early as this March (with default support).
What do you want to experience now?Refer to my record: how each browser opens CSS Grid layout.
3, Native VariablesThe last one is the local CSS variable. This module describes how to create a user-defined variable, and you can assign a variable to a CSS property.
For example, if I have a theme color, this theme color is used in several places, this time, you can abstract the theme color into a variable, and in the use of reference to this variable, which is more than the color to write in many places easier to maintain.
:root {--theme-colour:cornflowerblue;} h1 {color: var (--theme-colour) a { Color: var (--theme-colour) strong {color: var (--theme-colour) /span> This effect was previously implemented using a CSS preprocessor, such as sass, but there is an advantage to CSS variables 一直存在于浏览器中 . This means that the values of these variables can be modified online. For example, in order to update --theme-colour a property value, you can do this in the following way:
Browser supportconst rootEl = document.documentElement; rootEl.style.setProperty(‘--theme-colour‘, ‘plum‘);
Reproduced2017 what CSS features are most exciting to you?
Three new CSS features to learn in 2017
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
