Css weight vs browser Rendering

Yesterday, a bug suddenly occurred, which was very annoying.

Basic scenarios

You can select multiple calendars for multiple days (connected or not connected) by yourself. The requirement of "your company" is really a little complicated. There is no such kind of stuff on the "market ".

Bug scenarios

When you hover your mouse over day, it will show dark gray. Then, when you click day, the background will become pale blue, and the problem will appear here. When the mouse is suspended, the background color will be dark gray, however, after clicking it, it is still dark gray. The background color is changed only when you move the mouse away from this day.

That is to say, it has actually taken effect, but css has not actually taken effect.

Error Correction history

1. The first thing that comes to mind at first is the css weight issue.

   First, this parameter indicates the inline style, for example, style = ", and the weight is 1000.

   Second: ID selector, for example, # content. The weight is 100.

   Third: indicates the class, pseudo class, and attribute selector, such as. content. The weight is 10.

   Fourth: indicates the type selector and pseudo element selector, such as div p. The weight is 1.

   
   

   This issue was also discussed with Zeng Cheng, founder of ITFriend, last night. Zeng Cheng also thought it should be the issue of css weight. But when I try again this morning, I will. the weight of the active node is increased to a very high level, but it still does not work.

   
   

2. Every day, there will be one in datepicker.css. the modification of the display attribute in the datepicker selector will solve this bug no matter whether I modify or delete it, but the premise is that it must be modified in the browser online, this may cause the browser to re-render, but it also shows that the weight problem is not particularly true, because at this time, I did not modify the css weight in this place.

3. In a hurry, we can only make it simple and rude (because we thought it was solved by mistake yesterday, and told Leader that we have fixed this bug). Then we can only dynamically change the background through js, readers may still think about the issue of css weight in this place. After all, is the css weight of the line style the highest? But why can't we modify this problem in the class. This is indeed a problem.

Conclusion

Although the bug is solved, this solution is not very elegant after all, and the force control will also feel that this writing method has an impact on efficiency. After all, css rendering is faster than js (haha, what is the current situation of the pc? Can we ignore it ).

The root cause is that we are not very clear about the problem of browser rendering, and the issue of css rendering in different browsers is not particularly the same.

About this article

For this blog, readers may see that I am dizzy and the bloggers have not solved this problem positively. Why should I write this article?

In this way, there is not only one way to solve the problem. After all, there is a great road to Rome.

On the other hand, most front-end engineers may easily ignore the issue of css weights. Therefore, this article also hopes to raise the issue of css weights to a position that can be emphasized by readers.

This article is over.