Some CSS tips that Frontend itself cannot ignore

Tram Ho

My computer is very 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, 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.

front end tips

For other operating systems, you can see the User Preferences section on this link to know how to select 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:

See the Pen @media (prefers-reduced-motion: reduce) by Ha Huu Tin
( @tinhh ) on CodePen .

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.

Read more

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 attributes 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:

See the Pen @keyframes fade-in BEFORE by Ha Huu Tin
( @tinhh ) on CodePen .
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 { ... } .

See the Pen @keyframes fade-in AFTER by Ha Huu Tin
( @tinhh ) on CodePen .

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:

See the Pen @keyframes bgColor-transition BEFORE by Ha Huu Tin
( @tinhh ) on CodePen .
But when I realized the beauty of the animation-direction: alternate attribute, my code reduced the unnecessary lines mà, and the effect was still as expected.

See the Pen @keyframes bgColor-transition AFTER by Ha Huu Tin
( @tinhh ) on CodePen .

Browser Support: GOOD SUPPORT

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

Read more

3. Creating distance for a component with CONDITIONS IS

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

When I built ComponentA, I did not set the margin-top because looking at the overall design, it was usually placed at the top and there was no distance from the top, but in some cases 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 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, what should I do when the other two components are adjacent ( ComponentA is adjacent to ComponentC ) then 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 no need to talk about Browser Support anymore

Share the news now

Source : Techtalk