Let's see what it looks like.
Here are my few points:
We use motion-offset to set the position of the plane on this whatsapp number data path, and the best thing is that it can be animated and as a result we get something like this.
As you can see, the position changes beautifully and, what's more, this airplane not only follows the path, but also turns. This is done using motion-rotation: auto, but we can set some specific value and even make it fly backwards.
Naturally, we can write all this in one line, without breaking it down into many properties, and thus make some interesting landing page or advertising block.
Only Chromium is supported so far, but it is quite possible to use it as a progressive solution. You can read more in the corresponding specification.
Object-fit
As for images, are you sure you know how to handle them properly? I mean, who of you uses object-fit in your work?
Let's say we have a wonderful bear. Let me clarify right away that this is not just a bear, but an image element.
And if we resize it, it will become thinner, and who likes thin bears anyway? With object-fit: cover we can do what we can do with background-size. In this case, make the image fill the entire space without distortion.
The default behavior of image is object-fit: fill. There are several other options for contain, for example.
If you're working with user-generated content that needs to be integrated into an existing design, this is a great help. It eliminates a couple of extra wrappers and a fair amount of headaches. It's supported everywhere except Internet Explorer, but we have Polyfill for it. It can and should be used right now.
Typography
Now let's talk about typography. Do you know what kind of perversions with hyphens can be seen on many websites?
We can specify how the hyphenation will look using the hyphenate-character property. (It is worth mentioning right away that not every Unicode character can be used).
With hyphenate-limit-zone we specify how much text should be left before hyphenation occurs.
With the hyphenate-limit-chars property we will set how the hyphenation will work. In the picture below we set the following algorithm: words of at least 5 characters will be hyphenated, and there must be 2 or more characters before and after the hyphenation.
And most importantly, the limit-lines property is very useful, it allows you to set the maximum number of line breaks in a row.
Well, limit-last sets the value that allows or does not allow the text to wrap to a new page. By default, the value is "not allowed", but in practice it is possible to make it so that the line always wraps to a new page (although, from a typographic point of view, this should not be done). This is described in more detail here.
The last thing I would like to note is the new fifth-level media queries, in particular the new light-level function.
It is no news that mobile Internet traffic accounts for half of all traffic, and in the near future, it is quite possible, it will become the overwhelming leader.
The light-level function allows you to do the unthinkable. It does not detect the screen width or device type, which we are used to, but the environment in which a person is currently located. More precisely, this is auto-brightness for your site. Let's assume that we have an online store with a personal account where the user can track the status of their order or a news block. How can we make sure that a person does not spoil their eyes because our site has a bright design, a light background, etc.? The light-level function will check whether the device from which they visit our site has ambient light sensors and, based on their data, will apply properties to the site, making it less bright in the dark and, conversely, brighter on a sunny day.