As IE8 gradually exits the stage, many advanced CSS features have been natively supported by the browser and will not be obsolete.
Use
: Empty
Distinguishing between empty elements
Compatibility: IE8 not supported
Demo
If we have the above list:
<p class= "Item" >a</p>
<p class= "Item" >b</p>
<p class= "Item" ></p>
We want to be able to distinguish between empty elements and non-empty elements, so there are two scenarios.
Use
: Empty
Select an empty element:
. item:empty {
Display:none;
}
or with
: Not (: Empty)
Select non-empty elements:
. Item:not (: Empty) {
border:1px solid #ccc;
/* ... */
}
Use
:*-of-type
Select element
Compatibility: IE8 not supported
An example is described.
Add a bold paragraph to the first P:
P:first-of-type {
Font-weight:bold;
}
Add a border to the last img:
Img:last-of-type {
border:10px solid #ccc;
}
To add a blockquote to a non-connected style:
Blockquote:only-of-type {
border-left:5px solid #ccc;
Padding-left:2em;
}
Let the odd sequence of P-paragraph first die red:
P:nth-of-type (even) {
color:red;
}
In addition
: Nth-of-type
You can also have other types of parameters:
*/Even number of * *
: Nth-of-type (even)
/* Only a third */
: Nth-of-type (3)
/* Every third */
: Nth-of-type (3n)
/* Every fourth plus three, i.e. 3, 7, 11, ... */
: Nth-of-type (4n+3)
Use
Calc
Do a flow-style layout
Compatibility: IE8 not supported
Demo
Flow layout in left-right:
Nav {
position:fixed;
left:0;
top:0;
Width:5rem;
height:100%;
}
aside {
position:fixed;
right:0;
top:0;
Width:20rem;
height:100%;
}
Main {
Margin-left:5rem;
Width:calc (100%-25rem);
}
Use
vw
And
Vh
Do a full-screen scrolling effect
Compatibility: IE8 not supported
Demo
vw
And
Vh
is relative to viewport, so it does not change with the content and layout.
Section {
WIDTH:100VW;
HEIGHT:100VH;
Display:flex;
Align-items:center;
Justify-content:center;
Text-align:center;
Background-size:cover;
Background-repeat:no-repeat;
background-attachment:fixed;
}
Section:nth-of-type (1) {
Background-image:url (' https://unsplash.it/1024/683?image=1068 ');
}
Section:nth-of-type (2) {
Background-image:url (' https://unsplash.it/1024/683?image=1073 ');
}
Section:nth-of-type (3) {
Background-image:url (' https://unsplash.it/1024/683?image=1047 ');
}
Section:nth-of-type (4) {
Background-image:url (' https://unsplash.it/1024/683?image=1032 ');
}
Body {
margin:0;
}
p {
Color: #fff;
font-size:100px;
Font-family:monospace;
}
Use
unset
Do CSS Reset
Compatibility: IE not supported
Demo
Body {
color:red;
}
button {
Color:white;
border:1px solid #ccc;
}
/* Cancel the Color setting for button in section */
Section button {
Color:unset;
}
Use
Column
Do a responsive column layout
Compatibility: IE9 not supported
Demo
Nav {
Column-count:4;
column-width:150px;
Column-gap:3rem;
column-rule:1px dashed #ccc;
Column-fill:auto;
}
H2 {
Column-span:all;
}
Finish