With IE8 on its way out, many advanced CSS features are already natively supported by browsers and will become obsolete.

with:emptyDistinguishing empty elements

Compatibility: Internet Explorer 8 is not supported

Demo

Suppose we have the list above:


      

       a
      


      

       b
      


      
Copy the code

We want to treat empty elements differently from non-empty elements, so there are two options.

Select an empty element with :empty:

.item:empty {
  display: none;
}Copy the code

Or select non-empty elements with :not(:empty) :

.item:not(:empty) {
  border: 1px solid #ccc;
  /* ... */
}Copy the code

with:*-Of-TypeSelect elements

Compatibility: Internet Explorer 8 is not supported

Give an example.

Bold the first p paragraph:

p:first-of-type {
  font-weight: bold;
}Copy the code

Add a border to the last img:

img:last-of-type {
  border: 10px solid #ccc;
}Copy the code

Style disconnected blockQuote:

blockquote:only-of-type {
  border-left: 5px solid #ccc;
  padding-left: 2em;
}Copy the code

Let the odd column p paragraph die red first:

p:nth-of-type(even) {
  color: red;
}Copy the code

In addition, :nth-of-type can have other types of arguments:

An even number of * / / * : the NTH - of - type (even) / * only * / third: NTH - of - type (3) every third / * * / : the NTH - of - type (3 n) / * every fourth plus three, namely 3, 7, 11,... */ :nth-of-type(4n+3)Copy the code

withcalcDo streaming layout

Compatibility: Internet Explorer 8 is not supported

Demo

Left, middle and right streaming layout:

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

withvw 和 vhDo full screen scrolling effect

Compatibility: Internet Explorer 8 is not supported

Demo

Vw and VH are relative to viewport, so they don’t change with 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; }Copy the code

withunsetDo the CSS Reset

Compatibility: Internet Explorer is not supported

Demo

body { color: red; } button { color: white; border: 1px solid #ccc; } /* Unset section button color */ section button {color: unset; }Copy the code

withcolumnDo reactive column layouts

Compatibility: Internet Explorer 9 is 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;
}Copy the code

(after)