CSS you don’t know: Next Generation Web styling

Time:2020-3-12

CSS you don't know: Next Generation Web styling

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:

CSS you don't know: Next Generation Web styling

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:

CSS you don't know: Next Generation Web styling

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

CSS you don't know: Next Generation Web styling

Sticky Desperado

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

CSS you don't know: Next Generation Web styling

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;
}

CSS you don't know: Next Generation Web styling

When we focus on input and type two words:

CSS you don't know: Next Generation Web styling

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

CSS you don't know: Next Generation Web styling

CSS you don't know: Next Generation Web styling

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:

CSS you don't know: Next Generation Web styling

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:

CSS you don't know: Next Generation Web styling

Official example:

CSS you don't know: Next Generation Web styling

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

CSS you don't know: Next Generation Web styling

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:

CSS you don't know: Next Generation Web styling

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.

CSS you don't know: Next Generation Web styling

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:

CSS you don't know: Next Generation Web styling

Look at two diagrams:

CSS you don't know: Next Generation Web styling

CSS you don't know: Next Generation Web styling

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

CSS you don't know: Next Generation Web styling

CSS you don't know: Next Generation Web styling

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

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

7. Paint API

CSS you don't know: Next Generation Web styling

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:

CSS you don't know: Next Generation Web styling

// 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!

CSS you don't know: Next Generation Web styling

Recommended Today

Summary of recent use of gin

Recently, a new project is developed by using gin. Some problems are encountered in the process. To sum up, as a note, I hope it can help you. Cross domain problems Middleware: func Cors() gin.HandlerFunc { return func(c *gin.Context) { //Here you can use * or the domain name you specify c.Header(“Access-Control-Allow-Origin”, “*”) //Allow header […]