Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use the five latest features of CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Case: create a news feed (Newsfeed)

Take a news feed as an example to explain how the news feed is made in different steps, and how these five CSS features are used in the case.

Step1: HTML template for news feeds

Our case is actually very simple, not using any JavaScript framework, or using the original HTML structure to do the Demo. So we need some simple HTML tags to help us create Demo. Here you use a div named .container, which contains a ul named .feed, and then creates ten li, each li containing a div named .card.

Another li named nested is created between the fifth and sixth li, which contains an unordered list ul and contains three li to create three cards.

Card 1

Card 2

Card 3

Card 4

Card 5

Card A

Card B

Card C

Card 6

Card 7

Card 8

Card 9

Card 10

In the absence of any style, the effect you see is as follows:

Step2: adding styl

Now add some basic styles to the example to make it look more like a news feed:

Body {

Background-color: grey

.container {

Max-width: 800px

Margin: 0 auto

.card {

Background-color: # fff

Padding: 10px

Margin: 10px

Min-height: 300px

Finally, use the Flexbox-related features on .feed to have two cards per row:

.feed {

Display: flex

Flex-wrap: wrap

Li {

Flex: 1 050%

The effect is as follows:

If you have never been exposed to Flexbox-related knowledge, it is strongly recommended that you take some time to read these articles. Because of the development of Flexbox today, it has begun to replace float to layout and become one of the most mainstream layout methods, especially on the mobile side.

Step03: solving layout problems

When you scroll down the list, you will find that the three li (corresponding to CardA ~ CardC) under .nest affect the overall layout effect:

In fact, what we want, or ideally, all the cards are arranged in a stream, but this is not the case. The reason for this is that the Flex container-ul.feed sets display:flex (creates a Flex container), and after creating the Flex container, only its child elements (ul.feed > li.card) will be affected, that is, the child elements will automatically become Flex projects. But it does not affect its descendant child elements, in other words, .nest > li cannot automatically become a Flex project.

Usually the only way to solve this problem is to change the HTML template, but in some cases, such as in a CMS system (assuming you don't have the right to modify the HTML tag), there's nothing you can do about it. Of course, you might want to use JavaScript to deal with it. You might have thought so before, but today, we can solve this problem with a new CSS feature-display:contents.

The W3C specification describes display:contents as follows:

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.

Large enough to mean: "the element itself does not produce any bounding box, but the child and pseudo elements of the element still generate a bounding box, and the element text is displayed as usual." In order to take care of both the bounding box and the layout, when dealing with this element, imagine that the element is not in the element tree structure, but only the content. This includes the child elements of the element in the original document and pseudo elements, such as:: before and:: after. As usual, the former is still generated before the element child elements, and the latter is generated later. "

So the simple code of display: contents actually makes the element behave as if it doesn't exist. But you can still see the descendants of the element, and the element itself does not affect the layout. That is, the child element .card of .nest will also become a Flex project.

First delete the class name of the existing .feed li, and then use display: contents in ul and li:

.feed ul

.feed li {

Display: contents

At this point, all .card under .feed becomes the Flex project (not only the child element li under .feed, but also the li element for future generations):

Five latest CSS features and how to use them

Now all the cards you see are arranged in order, but the size is not right:

You can solve this problem by adding the flex attribute to the .card:

.card {

Flex: 1.040%

At this point, the size of each card is back to normal:

At this point, it's as if ul no longer exists. If you are careful enough, you can find that the value of flex-basis is set to 40%. Although we have set the value of box-sizing for all elements to border-box, we all know that box-sizing can affect the calculation of the box model, but margin is not included, so in order to have enough space for cards, the value of flex-basis is recalculated, which is 40% as you can see.

This example also shows you once again the magic of display:contents. Of course, there is no detailed introduction to display:contents here, but it is enough to show you its power. If you are interested in this feature, or if you want to learn more, it is recommended to read the following articles:

Step04: explore the features of CSS query

Although display:contents has achieved the desired effect, it is still in the W3C working draft state. At present, we can only see the effect in Chrome 65 + and Firefox 59 +.

If you disable display: contents in the browser developer tool, you can see that your layout is starting to get messy again. This only simulates the effect when the browser does not support this property. So what can we do next? This leads to the next new feature of CSS-the CSS query feature.

It works a bit like a media query in CSS (@ media), but it allows you to use CSS expressions alone, similar to if / else in the JavaScript language. If the condition matches the style in the corresponding block. Next, let's take display:contents as a condition for the query feature, and then place the corresponding CSS style in the {...} block. It looks like this:

@ supports (display: contents) {

.feed ul

.feed li {

Display: contents

.card {

Flex: 1.040%

In CSS, the query feature is often called the conditional feature of CSS, which mainly includes @ media, @ supports, and @ viewport.

You may be curious when you are exposed to @ supports () for the first time and don't know the exact use of this attribute.

Step05: the key to using not to make the code clearer

In the world of CSS, @ supports is actually a solution of gradual enhancement and elegant degradation. We can use @ supports to add new styles, but we can also add some of the original styles needed for demotion.

@ supports is well supported if you ignore the IE browser. In fact, you may want to use the CSS query feature instead of a particular operator. It works as you would expect, so we can add styles to browsers that don't support display: contents through the @ supports not keyword. For this reason, we can modify the code of the example to:

/ / A browser that supports display: contents, using this code

@ supports (display: contents) {

.feed ul

.feed li {

Display: contents

.card {

Flex: 1.040%

/ / for browsers that do not support display:contents, use the following code

@ supports not (display: contents) {

.feed li {

Flex: 1 050%

.feed li.nested {

Flex-basis: 100%

.feed li.nested ul {

Display: flex

Flex-wrap: wrap

In browsers that support display:contens, you will see the following effects:

In browsers that do not support display:contents, you will see something like this:

Step06: further optimization

After the above example, it is estimated that you have realized the charm and potential of CSS query features, the above is only used in part of the query features, more powerful is that you can combine and, or and not to make your conditional expressions more powerful. For example, in addition to considering display:contents, your downgrade plan will also say that it is possible that the user's browser does not support display:flex. In this case, we can continue to downgrade to the float layout.

However, we will not consider downgrading to the float layout here. But we can downgrade display: flex and display:contents. The and and not keywords in @ supports are used here. The above code looks like this:

@ supports (display: flex) and (display: contents) {

.feed ul

.feed li {

Display: contents

.card {

Flex: 1.040%

@ supports (display: flex) and (not (display: contents)) {

.feed li {

Flex: 1 050%

.feed li.nested {

Flex-basis: 100%

.feed li.nested ul {

Display: flex

Flex-wrap: wrap

You can even use CSS's custom properties in @ supports, such as the following:

@ supports (--foo: green) {

...

If you are not satisfied with the @ supports or CSS query features, it is recommended that you read the following article to learn more about it:

Case: chat box

Now that we have a beautiful news feed (Newsfeed), let's add a small chat box based on the previous Newsfeed, which is fixed in the lower right corner of the screen.

Step7: add chat box

We need a list of messages and a text field to make it easy for users to enter messages. Then add the HTML tag required for the chat box at the end of the tag:

Message 1

Message 2

Message 3

Message 4

Message 5

Message 6

Message 7

Message 8

Message 9

Message 10

Without adding any style to the chat, the effect we see is:

Step08: add style to chat box

First add some basic styles to the chat box to make it look a bit like a chat box:

.chat {

Background: # fff

Border: 10px solid # 000

Bottom: 0

Font-size: 10px

Position: fixed

Right: 0

Width: 300px

.messages {

Border-bottom: 5px solid # 000

Overflow: auto

Padding: 10px

Max-height: 300px

.message {

Background: # 000

Border-radius: 5px

Color: # fff

Margin: 0 20% 10px 0

Padding: 10px

.messages li:last-child .message {

Margin-bottom: 0

.input {

Border: none

Display: block

Padding: 10px

Width: 100%

The effect looks like this:

Step09: scrolling links

Now you can see the beautified chat box on the page, which has a scrollable list of messages and a text input box, and is located on the Newsfeed that created the child above (if not, you can shrink your browser), as follows:

Doesn't it look good. But have you noticed what happens when you scroll the list of messages in the chat box to the bottom? If you are interested, try it yourself. Let's do two small tests, first scroll through the page body to see the results:

Then scroll through the list of messages in the chat box, all the way to the bottom of the chat box, and see how it works:

Scrolling Newsfeed is no different from what we thought, but when scrolling the message list in the chat box, it is different. When you scroll to the end of the message list, you can see that the page body will start scrolling. This effect is called scrolling links, or Scroll Chaining.

In our example, this may not be a big problem, but in some cases it may be a big problem. For example, Modal pop-up box, it is necessary to solve this phenomenon.

The clumsy solution is to add overflow:hidden to body, but this may affect our operation and even affect you from browsing your page. Fortunately, CSS has a new feature that can be done more perfectly, has a better experience, and is not complicated to use. It only takes a single line of code, and that is CSS's overscroll-behavior, which has three values:

The overscroll-behavior attribute is an abbreviation for overscroll-behavior-x and overscroll-behavior-y. If you only want to control the scrolling behavior in one of these directions, you can use one of these properties.

Going back to our example, add the following line of code to the .messages class:

.messages {

Overscroll-behavior-y: contain

Now you try again, scroll up and down in the list of messages in the chat box. When you scroll to the end of the message list, it no longer affects body scrolling (page scrolling):

This property is very convenient if you want to implement the drop-down refresh effect in PWA, such as refreshing Newsfeed when you drop down. You just need to add overscroll-behavior:contain to the body or html element.

It is worth noting that this attribute is not yet a W3C standard, but rather a recommendation of the Web incubator WICG. One day, however, this feature will enter the W3C working group and become a W3C standard.

For more information on this, it is recommended to read the following articles:

Step10: folding chat box

At present, chat boxes take up a lot of space, and it will be a bit of a distraction if we don't interact with them. Fortunately, we can use CSS's selector feature to solve this problem. This is another new feature of CSS, which once again shows the magic of CSS.

First adjust the existing style. By default, we want the chat box to handle a collapsed state, so reset the max-height value of .message to 0 here, and reset padding to 0 as well. Because this value just folds the chat box without affecting its beauty. In order to have a transitional animation effect when the chat box is folded and expanded, it is realized with the help of the transition property of CSS.

.messages {

...

Max-height: 0

Padding: 0

Transition: max-height 500ms

The effect looks good, as follows:

Step11: when the chat box gets focus, expand the chat box

Now the list of information in our chat box is not visible. Because we folded the information list earlier. What we need to think about now is how to unfold it through CSS. This will use another new feature of CSS -: focus-within.

It's a bit like the focus pseudo-class selector, but unlike focus-within, if any descendant of the element gets focus, it will be matched. This is what makes this attribute special because, contrary to the way CSS usually works, we can only select elements based on their ancestors.

In our example, when anything in the .chat area gets focus, reset the max-height and padding values of .message. Remember that an element must accept keyboard or mouse events or other forms of input in order to receive focus. For example, in our example, clicking on the input box meets this requirement and can achieve the desired results.

. chat:focus-within .messages {

Max-height: 300px

Padding: 10px

You can try the effect now. Click input to get the focus, you can see that the chat box can be expanded, otherwise the chat box will fold up again:

Step12: further highlights: the magic of focus-within

If you only achieve the effect of folding and expanding the chat box, the previous step has actually been completed. But for a front-end who is pursuing, he is always trying a lot of limits. Going back to our example, if PM mentions a new requirement to you, when the text input box gets focus, in addition to opening the chat box, you also want the Newsfeed under the chat box to become blurred. For such an effect, how to achieve it?

It's not complicated to achieve this effect, and if you've ever done a custom radio button or check box (pure CSS, of course), you should come up with a solution. We can easily do this by using the sibling combiner in the CSS selector. One premise to note when using the ~ selector is that the chat box .chat needs to precede the Newsfeed (.container) (referring to the HTML structure, which we have actually done). Only in this way can Newsfeed be blurred in the following ways:

.chat:focus-within ~ .container {

Filter: blur (5px)

Of course, this may not be the best solution, but it's cool to be able to achieve the desired results only through CSS technology. If you are interested, you can experience it for yourself:

Note that Newfeed adds a filter effect, which will change the cascading order of the elements, resulting in chat boxes under the Newsfeed. So you need to explicitly add the value of z-index to .chat. For example, z-index: 1001 is set here. For specific reasons, please refer to @ Zhang Xinxu's "in-depth understanding of cascading context and cascading order in CSS".

Explore: placeholder-shown

First of all, make it clear that: placeholder-shown and:: placeholder are two different things. The amazing thing is that placholder-shown is an attribute of the W3C standard specification, while:: placeholder is not. :: placeholder-shown still affects the style of placeholder text.

Note: placeholder-shown is a pseudo-class selector (it is an element in a specific state);:: placeholder is a pseudo-element (a visible element that does not exist in DOM).

In addition,: placeholder-shown is also one of the new selectors (CSS Selectors Module Level 4 adds many pseudo-class selectors), which can match any input that displays placeholder text. In our example, the text input box (input) does not have any placeholder text, so first add placeholder to the input element in HTML to add placeholder text.

Then add a new element after input to help the user manipulate:

Press enter to send

Now add some styles to the help message. Prompt, which is folded by default.

.prompt {

Line-height: 2em

Max-height: 0

Overflow: hidden

Padding: 0 10px

Text-align: right

Transition: max-height 500ms

From the outside, it seems that there is nothing more than the addition of a placeholder text in the text box:

Although there is not much difference, this has laid a foreshadowing for the follow-up effect. Keep looking down.

Step14: the prompt message is visible

At this point, the message is folded and invisible, and I think you've all figured out how to use it: placeholder-shown to make it visible? Most browsers display placeholder text until the user enters a true value in input. In order to improve the user's experience of using the form, if the placeholder text is not hidden and acts as a prompt after input gets the corresponding focus, isn't it more interesting and more helpful to the user? after all, we don't want the user to send an empty message, so we can associate this behavior and display the prompt message only when the user enters the value (that is, .prompt expansion is visible).

: placeholder-shown represents the state in which the placeholder text character is visible, but when the prompt is visible, the placeholder text character is not visible, that is, input has a real value. In other words, we need to have a reversal of placeholder-shown (placeholder text symbols are not visible), and we can use the: not () selector to help us do this inversion.

.input: not (: placeholder-shown) + .prompt {

Max-height: 2em

Set max-height to twice as much as font-size:10px. 2em is used here, and you can expand the message block at this time. Simple and neat. If this seemingly mundane pseudo-class selector passes the final specification, then we will see some clever uses. When you come to this point, the effect becomes:

Experience for yourself, you can enter a little bit of content in input, even if it is a space, you can see the prompt message is displayed:

Whether: focus-within or: placeholder-shown, they are new pseudo-class selectors to the CSS selector, and if you are interested, it is recommended that you take the time to understand these aspects:

Step15: keep it alive

So far, we have completed the basic architecture of a news feed with chat capabilities through simple HTML and some CSS features, but at present it is inanimate, just a purely static thing. In other words, users don't use it to do anything. This case contains some interesting new features of CSS, but so far you can't modify DOM. If you want to make this case more vivid, you need to use some JavaScript features so that users can add messages through the chat box.

First, you need to add an ID to the child element ul of the class name .messages so that JavaScript can better get the corresponding element. At the same time, add a required attribute to the input element, and the form can be checked automatically when the user has not entered any information.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.