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 the @supports rule, allows us to write CSS rules within its conditional area, which 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 if the browser supports Display:flex.
@supports (Display:flex) { . foo {display:flex;}}You can also use some operators, such as and and not, and we can create more complex feature queries. For example, we can identify whether a browser supports older versions of the Flexbox syntax.
@supports (Display:flexbox) and (not (Display:flex)) { . foo { display:flexbox; }}Browser support
Expand
Feature queries also supports JavaScript interfaces: Css.supports (), also using the example above to see how to use:
if (Css.supports (' (Display:flex)) } {Console.log (' Support Flex ')} else { console.log (' Flex not Supported ')}if (css.supports (' (Display:flexbox) ')) { Console.log (' Support Flexbox ')} else { console.log (' Flexbox not supported ')}2. Grid layout (raster layouts)
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 Placement
A 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" >The 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
The CSS Raster module describes a new length unit: The FR unit, which represents the remaining portion of the space in the 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 all the space except for the containers on both sides, just write the following code to achieve this effect:
. HG { grid-template-columns:150px 1fr 150px;}Interval between elements
We can specifically define the voids between elements in a raster layout, grid-row-gap, Grid-column-gap, and Grid-gap properties that can do this, and these properties accept a <length-percentage> Percent data type as a value, the percentage corresponding to the size of the content area.
For example, there are 5% voids that can be written like this:
. HG { Display:grid; grid-column-gap:5%;}Browser support
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 Variables
The 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);}This effect was previously implemented using CSS preprocessor, such as sass, but the advantage of CSS variables is that they always exist in the browser. This means that the values of these variables can be modified online. For example, in order to update the--theme-colour property value, you can do this in the following way:
Const ROOTEL = document.documentelement; RootEl.style.setProperty ('--theme-colour ', ' Plum ');"Recommended"
1. Free CSS Online video tutorial
2. CSS Online Manual
3. php.cn Lonely Nine-base (2)-css video tutorial
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
