background

---

Recently I saw it.Chrome Dev Summit 2019Conference video, I learned a lot of new features of CSS that I didn’t know before, which is very interesting.

Here are a few exciting features.

text

Features overview:

1. Sticky

   1. Stickey Stack
   2. Sticy Slide
   3. Sticky Desperado
2. Focus-within
3. prefers-reduced-motion

4. Scroll Snap

   1. Scroll Snap Horizontal
   2. Scroll Snap Vertical
   3. Scroll Snap Matrix
5. Backdrop-filter
6. Gap
7. Paint API

1. Stickey Stack

We’ve probably heard of the sticky property, which is commonly found inSuction topDemand.

Official description:

The position CSS property sets how an element is positioned in a document.
The top, right, bottom, and left properties determine the final location of positioned elements.

Official example:

When we scroll through the container, the sticky element breaks away from the document flow, as shown in the figure above.

With this property, we canEasy responseDaily ceiling demand:

Sketch Map:

Core attributes:

 position: sticky;
 top: 0;

Full sample code:

// html
dl.sticky-stack
  dt A
  dd Aceyalone
  dd Aesop Rock
  dd Angel Haze
  dd Atmosphere

  dt B
  dd Babbletron
  dd Bike For Three
  dd Binary Star
  dd Blackalicious
  dd Black Sheep
  dd Blueprint
  dd Blue Scholars

  dt C
  dd Cecil Otter
  dd Chali 2na
  dd Chance The Rapper
  dd Common Market
  dd Cool Calm Pete
  dd Czarface

  dt D
  dd Danger Doom
  dd Darc Mind
  dd Dem Atlas
  dd Dessa

//css

@use postcss-nested;

.sticky-stack {
  background: hsl(265 100% 47%);
  color: white;
  margin: 0;
  
  height: 80vh;
  max-height: 40ex;
  border-radius: 1rem;
  overflow-y: auto;

  & dt {
    position: sticky;
    top: 0;

    font-weight: bold;
    background: hsl(265 100% 27%);
    color: hsl(265 100% 80%);
    padding: .25rem 1rem;
  }

  & dd {
    margin: 0;
    padding: .75rem 1rem;

    & + dt {
      margin-top: 1rem;
    }
  }
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: system-ui;
}

Switching different attribute values can achieve different ceiling effect:

For example: sticky slide

Sticky Slide

Online demo:

https://codepen.io/argyleink/pen/abbJOjP

Sticky Desperado

Online demo: https://codepen.io/argyleink/pen/qbbrbyx

Official document: https://developer.mozilla.org/en-us/docs/web/css/position

2. Focus-within

It’s also an interesting feature that applies to an elementitselfOr itsProgeny elementReceivefocusAt the time of the incident.

for instance:

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
</form>


// css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: yellow;
  color: black;
}

form:focus-within  input{
  color: red;
}

When we focus on input and type two words:

In the past, the JS control class was used to add styles for its ancestor nodes. Now, the:focus-withinIt can be realized. It’s beautiful.

With this feature, we can implement a simpleTab page switch：

Online demo address:

https://codepen.io/una/pen/RMmogp

3. prefers-reduced-motion

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.

That is, this feature is used to detect whether the user wants to minimize the animation.

Example Demo:

Online address: https://codepen.io/argyleink/pen/rwwzmkm

<div class="animation">animated box</div>

.animation {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

Official example: https://developer.mozilla.org/en-us/docs/web/css/ @ media / preferences reduced motion

4. Scroll Snap

This is a very interesting feature.

In the past, in a sliding list, we always wanted to see a complete sub item after the sliding.

For example, after a row of pictures is sliding, what you see is just a complete image in the view area. This can be achieved by using JS to handle the sliding event and dynamically calculate the X coordinate.

Now CSS is also supported. This feature isScroll Snap.

This attribute has three forms:

1. Scroll snap horizontal
2. Scroll snap vertical
3. Scroll snap matrix

Take the first scroll snap horizontal as an example:

Sketch Map:

Official example:

Slide here, after sending, rebound to the complete 1:

Example code:

// html
<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>X Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

//css
.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

Online experience address: https://developer.mozilla.org/en-us/docs/web/css/scroll-snap-type

The other two are vertical scrolling and two-way scrolling, not to mention, which can be experienced in the official example.

5. Backdrop-filter

This feature is still in the experimental stage.

As the attribute name describes, this feature applies a graphic effect, such as blur, or color conversion, to the back of an element.

Because it’s applied to the back of an element, make sure that the element, or its background, is at least partially transparent.

Example:

Code:

// html

<main>
  <h1>Hello, World</h1>
  <img>
</main>

// css
h1 {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px dashed;
  padding: 1em;
  backdrop-filter: blur(10px);
  color: white;
  font-family: monospace;
  font-weight: 100;
}

Official documents:

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

6. Gap

Gap allows us to visually set the spacing between rows and columns. It isrow-gapandcolumn-gapShort form of.

In the past, when we were making lists, we used margin to control the spacing between elements and other elements. We used the feature of overlapping outer margins, which is shown in the figureextra spacing, and now with gap, we have a more elegant solution:

Look at two diagrams:

This way, whether it is single column or multi column. They all performed very well:

Online demo: https://codepen.io/argyleink/pen/abbvqev

Official document: https://developer.mozilla.org/en-us/docs/web/css/gap

7. Paint API

Paint API provides a painting mechanism closer to the bottom layer of the browser. Currently, this API is still in the level 1 stage.

Take a look at the demo:

// html
<script>
  if ('paintWorklet' in CSS) {
    // load this CodePen's JS file as the paint worklet
    CSS.paintWorklet.addModule('/una/pen/RMVjaQ.js');
  } else {
    document.querySelector('html').classList.add('no-support');
  }
</script>

<h1 class="speech">Hello World!</h1>
<h2 class="speech">What a Wonderful Life! I Can Keep Going!</h2>

// css
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-size: 20px;
  font-family: monospace;
  text-align: center;
}

.speech{
  background-image: paint(rainbowtize);
  padding: 1em;
  display: inline-block;
  border-radius: 20px;
}

Online demo: https://codepen.io/una/pen/vxzrxp

The above features are very interesting. I’d like to introduce them to you briefly, hoping to give you some inspiration.

Just a few features. Last night, I watched the video. Today, I spent an afternoon sorting out the data and moving pictures,Very time consuming。

If the content is enlightening to you, pleaseGive a praise. Encourage me.。

Thank you.

Ending

Attached conference video link:

Last

If you think the content is helpful, you can focus on my official account, “front-end e”, learn together and grow together!