Hello everyone, I am back and continue with part 19 of the series about some CSS tricks that Frontend itself may not even know.

Let’s get started!

1. My computer is weak, I want to turn off animation on the web, what should I do?

On both desktop and mobile operating systems, publishers are improving and providing users with the ability to “turn off the effects (motion, animation)” on the operating system.

And in response to that movement, browsers are also gradually improving and releasing to the web development community a media query called prefers-reduced-motion.

It is not yet common in all the browsers we usually serve, including IE, but because this is an enhancement-style feature, the better it is, the better it will be. there. Because it does not directly affect the user experience, so if the browser does not support, then there is nothing to worry about.

The mechanism of action of this feature is extremely easy to understand, assuming you have 1 CSS code writing the hover effect then the transform box rotates 1 round:

Assuming users here are using MacOS, they tend to tick Reduce Motion to disable the effect.

For other operating systems, you can see the User Preferences section on this link to know how to choose this feature.

Then when they returned to the web, they wanted the hover effect to no longer work (the other .box did not rotate). Now our code will need to use media query prefers-reduced-motion as follows:

If she’s using Chrome or Firefox with the latest versions, then the code above probably works.

And that’s the case I suppose for you to understand (the effect seems to be quite simple, not enough to turn it off), but in reality there will be websites that customers want to have many effects. , and somewhere it is eating up RAM and making your computer feel slower, the experience on the site is no longer smooth, or sometimes jerky if the device is a little weak configuration.

Browser Support: NO MATTER

As explained above, this is a feature that helps to improve the user experience better, so whichever browser supports it the better.

https://caniuse.com/#feat=mdn-css_at-rules_media_prefers-reduced-motion

Read more

• https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

2. Write shorter @keyframes

@keyframes is considered to be the most important thing in the animation attribute, but I am sure that for a long time when you define 1 @keyframes without @keyframes attention to take advantage of the inherent capabilities of the animation ‘s child properties such as animation-fill-mode or animation-direction bring. Here are a few discoveries I have learned:

2.1. animation-fill-mode: forwards

With the fade-in type of motion effect familiar to many developers and commonly used, you will often write in the style:

But in this case, the animation-fill-mode attribute with a value of forwards will @keyframes above @keyframes definition from having to declare the from { ... } .

2.2. animation-direction: alternate

Continuing another motion case, this time I want the background color to move from red to yellow and for continuous motion (infinite)

Previously, I always wrote like this:

But when I learned the beauty of the animation-direction: alternate attribute, my code greatly reduced the unnecessary lines , and the effect is still as expected.

Browser Support: GOOD SUPPORT

The tips above are all animation properties, but animation are already supported on popular browsers (IE10 and above also support).

https://caniuse.com/#feat=css-animation

Read more

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
• https://twitter.com/anatudor/status/1213449962610147330

3. Creating distance for a component with CONDITIONS IS

You can imagine this type of situation, you often divide sections on the page into separate components to be reuse, as well as easy to code, maintain, and read.

When I built ComponentA, I didn’t set the margin-top because I looked at the overall design, it was usually at the top and there was no distance from the top, but there were a few cases when it went under and unfortunately. is when ComponentA is below ComponentC , the 2 components stick together, looks pretty bad interface, now I will have to find a way to create a margin for these 2 components.

This case to handle is not difficult at all, the dev will think of many ways, like:

• Set extra class for componentA , for example a utility class of type mt-30 ( margin-top: 30px ) and attach the class when calling ComponentA under ComponentC .
• If you are working with React or Vue, then maybe you think of marginTop 1 props as a marginTop .

The above way seems to be ok then, but I want it to auto 1 bit, just have to do that when the other 2 components go adjacent ( ComponentA adjacent to ComponentC ), the CSS set margin-top into it.

Speaking of adjacent, I only think of the selector + in CSS !!!

And the code here is:

The above code means that ComponentA can only eat CSS margin-top: 30px when it is placed on the same level and is adjacent to ComponentC .

Browser Support: 100% FEED

The + sign is a selector for CSS 2.1, so there’s nothing to discuss about Browser Support anymore

https://caniuse.com/#feat=css-sel2

summary

Hope everyone adds CSS skills with these 3 tips.