Short step, no thousands of miles; Not small streams, beyond into rivers and seas.

— Xun Zi “Exhortation”

currentColor

CurrentColor is a variable that CSS gave us very early on that is equal to the color property value of the current element.

Like this one down here

.foo {
    color: red;
    box-shadow: 0 0 2px currentColor;
}
Copy the code

The default text color in.foo is set to red, and currentColor is specified when box-shadow is set, which means that the current element’s shadow color is also red.

Of course, if the current element does not specify a color attribute, currentColor is the color value inherited from the ancestor element.

Compatibility: IE9+ and all other modern browsers.

:placeholder-shown

The :placeholder-shown pseudo-class is used for and

Appropriately enough, this pseudo-class will work when elements have placeholder attributes and we don’t have input in /

input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}
Copy the code

Placeholder text is displayed in silver. The placeholder text is not displayed in :placeholder-shown, and the input box will be black by default. In the same way, after I delete the input box text clean, the placeholder text will be displayed again, then :placeholder-shown will work, and the input box border will return to silver.

Compatible with Chrome 47+, Firefox 51+, Safair 9+.

:focus-within

When does the :focus-within pseudo-class work when applied to an element? The answer is when the element itself or internally has an element :focus.

Here’s an example:

The form above contains two input fields. When either field is focused, the form background turns yellow and the label text turns black from gray.

The code is simple:

form:focus-within {
  background: #ff8;
  color: black;
}
Copy the code

This attribute can be used to control the style of the parent element when the child element focus is used.

Compatible with Chrome 60+, Firefox 52+, Safair 10.1+.

overscroll-behavior

The overscroll behavior is used to disable chain scrolling.

Have you ever encountered the following situation?

Scroll the contents of the small dialog box in the bottom right corner of the page to the bottom. When we continue to scroll down the mouse wheel, we find that the main page behind also scrolls up.

This is the default behavior of the browser, but sometimes we don’t want this effect. We want the main page not to scroll after the content of the dialog box is finished.

This is easy to do, just specify the overscroll behavior property of the dialog box and set it to contain.

.messages {
    overscroll-behavior: contain;
}
Copy the code

Mdn.github. IO /css-example…

Overscroll behavior is a compound property, so if we set overscroll behavior: contain; Is equivalent to setting the behavior along the X and Y axes, that is to say:

.messages {
    overscroll-behavior: contain;
}

/* is the same as */
.messages {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: contain;
}
Copy the code

In the case of the above example, if we just want to control the chain scrolling effect along the vertical axis, the Y axis, we just use

.messages {
    overscroll-behavior-y: contain;
}
Copy the code

It is enough

Compatible with Chrome 63+, Firefox 59+.

(after)