News CSS August, 2020 nothing new

Tram Ho

Preface

Frontend in general and CSS in particular is still being developed continuously. In addition to the basic knowledge, you should also update the latest techniques / news to avoid being behind the market. If you are someone who wants to keep up to date with the latest CSS techniques and news, then this article is for you.

In this article, let’s take a look at some of the new CSS techniques being developed . Note that these techniques are being developed , meaning they are only in beta (experimental) so they are not supported by current browsers.

1. Flexbox Gaps

Is this strange for you? To me, it was really strange but not surprising. So far, CSS has always had so-called “tricks” handed down to help satisfy designs from designers, and CSS has always tried to create native properties to replace those tricks. . “Gap” is one of them.

What is “Gap”? Actually it is simply a blank area between the elements only, nothing special is not it.

Gap is the space between elements

However, in the old days, and in the present, to create such gaps, we used margin . You may wonder “margin is called trick”, then you are right, margin is not a trick. However, if you use margin (for example, each item will have margin-right and margin-bottom ), you will usually have to clear the margin of the last item, if you do not want to have a redundant margin area at the end (there are many other ways to processing margin of last item). And for now, it would be nice if I had an attribute that defines the distance between items.

Gap uses margin

As you can see in the image above, there is an extra margin at the end.

And CSS Grid was born to solve the problems of grid generation with only CSS, accompanied by the properties of gap , column-gap , row-gap . The attribute name is very clear, isn’t it, I won’t say more about it, because it has been around for a while, not new.

But, those are the properties of CSS Grid, and not with Flexbox, you still have to use margin (or other ways) to create gaps. The good news is that the gap attribute will be applied to Flexbox in the near future. Refer to the list of browsers that support the Flexbox gap here: https://caniuse.com/#search=flexbox gap

The gap attribute

As shown above, the remaining margin is no longer available, simply because no margin has been declared.

2. Aspect Ratio Unit

A small question for you is this: create a div tag of 100×100 px. Simple is not it:

Let’s upgrade the above question a bit harder: with the above 100×100 px div tag, turn it to 200×200 px, but only change the width without changing the height. In other words, regardless of width, make its height equal to width. It’s harder then right.

To do that, we often use a trick that is always padding hack.

And the aspect-ratio attribute was born to solve this problem.

Aspect ratio

This property is not currently officially supported by the browser, so please be careful before using it for production. To test it out (like your screenshot above), you can turn on the Chrome “Experimental Web Platform features” flag to try out new features.

3. Native Masonry

Pinterest Masonry layout

Have you ever built a layout like this? It is called the Masonry layout. With pure CSS, it will be very difficult for you to build a layout like this, but not necessarily impossible, just you will take quite a bit of effort, you refer to the following ways:

  • Divide the web page into 3 columns, then calculate to divide the photos into each column
  • Calculate in advance the backend (or hardcode) of the size of the photos according to your rules. Then use position absolute + a little javascript
  • Self-written pure javascript to calculate and organize the images
  • Use the support library like https://masonry.desandro.com/

With the introduction of CSS Grid, creating a Masonry layout was simpler, but it was not a “native” solution. CSS Grid is essentially created grid, not Masonry layout.

However, the Firefox team is testing the ability to create an official Masonry layout with CSS Grid. You can experiment with Firefox Nightly, turn on the layout.css.grid-template-masonry-value.enabled flag .

 

4. prefers-reduced-data

This is a new (at-rule CSS) feature that is not yet implemented in browsers: https://caniuse.com/#search=prefers-reduced-data

With it, you can check whether the user has enabled data saving features when browsing the web, from which you will provide users with data saving more. In the above example, instead of returning the user an image that could weigh several hundred KB, we replaced it with a placeholder image of around 10KB.

5. :: marker

What is a marker

Have you ever received the color changing task for a marker? If you use color , you will change the color for both the marker and the text inside.

The task is also quite simple, and there are many tricks to do it such as creating a fake marker with ::before for example. Or use icon and position: absolute

Now you can style the marker more easily with ::marker

The marker can now be targeted with the CSS selector

End

Source: Commitstrip

CSS is constantly growing, new features are constantly being updated (and thrown into the trash). So be careful before you decide to use it.

In addition, a headboard website for any frontend developer is https://caniuse.com/ . If you do not know this page, bookmark it right away.

Share the news now

Source : Viblo