The premise

Zhang Xinxu teacher this book is also just published, the length is very large, a lot of content, so I have not finished reading.

The great thing about reading a CSS book is that you can open a chapter at random and read it without worrying about what you might not understand if you don’t read it from beginning to end. Any chapter you open is a new landscape. All this foreshadowing, just to say, actually, I watched it with a jump.

If I have to say something about the reading experience, it is that the book feels more fluent. Personally, I think it’s much easier to read than CSS World, and it’s much cleaner and smoother to read. There was also a reason why I read that book a few years ago when THE basics of CSS were not very good.

When I read CSS World a couple of years ago, apart from some things I didn’t understand, I had a strong feeling: “Why is that necessary? The research is so detailed that it may not be used, not to mention some compatibility issues. What’s the point of studying it?” .

Until recently, see a movie, now my personal 2021 film of the year “Mr Roman, how are you”, tells a old pedantic lawyer, has been engaged in legal work behind the scenes, after the death of his partner, he had to go to find a new job, in the process of he is looking for a job, although you may not have heard of him in the industry (has been) behind the scenes, However, after the exchange interview, we will find that he is such a profound person in legal research.

One of them is an interview, in an open setting, where other employees besides the interviewer can hear what they are talking about. After Roman finishes talking to the interviewer, he leaves. One of the employees walked up to the interviewer and said, “He’s such a dinosaur.” “You stand on his shoulders. His hard work has made your life what it is.”

In the past, we all said that reading is standing on the shoulders of giants, the default is some long great people, in fact, let us stand on their shoulders of the people have been living with us in the same era, the same sky.

Now read the CSS in the new world, the feeling is still likely to have, after all, it all in the range of book, and in the range of some might not be familiar with some new features, all the details of some knowledge is very, very, some knowledge and inevitably involves many compatibility issues, if we are still holding the “research, also some browsers can’t use so fine, Read with white read the same (listen to your words such as listen to words) “, really calculate some ungrateful. We need to understand that we are actually standing on the shoulders of others.

Here are a few things I didn’t know before

Font-synthesis Text synthesis properties

How to make the English part of a text displayed in italics and the Chinese part displayed upright?

We might set the text to font-style:italic, but that would make the Chinese language slant too. Font-synthesis: None. The Chinese part can be displayed upright.

PS: Currently supported by Safari but not Chrome.

Further understand, you can see me in station B recorded this video tutorial: www.bilibili.com/video/BV1KL…

Why sometimes the border-radius setting does not work and overflow: hidden is added?

Most likely because you have a parent box, which is the same size as the child box; You set border-radius: 10px on the parent element;

Because in the cascading relationship, the child element is on top, so it is not that the rounded corners are not effective, but that the four right angles of the child element cover the rounded corners of the parent element. The four child elements directly belong to the overflow part of the parent element, and add overflow:hidden naturally.

If the border-radius attribute is inherited, the parent element sets border-radius: 10px, and the child element’s border-radius inherits that 10px. Then of course there won’t be a problem.

Of course, the essential solution to this problem is to set border-radius directly to the child element, not to the parent element.

Further understand, you can see me in station B recorded this video tutorial: www.bilibili.com/video/BV1h6…

Opacity properties

It is well known that the value range of opacity is [0, 1], but what happens if the value is not in this range? In fact, if you set the value above 1, the browser will reset it to 1; If the value is less than 0, the browser will end up with 0.

Also: If opacity is set to opacity:0.5 for the parent element and also for the child element, how much opacity will the child element render? The answer is 0.5 * 0.5 = 0.25.

Further understand, you can see me in station B recorded this video tutorial: www.bilibili.com/video/BV1d3…

Conic-gradient Tapered gradient

We all know about linear gradients and radial gradients, but there’s also a taper gradient, and we can use this property to easily achieve the effect of a pie chart with pure CSS.

width: 100px; Height: 100 px; border-radius: 50%; background-image:conic-gradient(yellow 40%, green 0deg 75%, blue 0deg)Copy the code

Further understand, you can see me in station B recorded this video tutorial: www.bilibili.com/video/BV11w…

conclusion

I will gradually record my reading process into videos and put them on site B. We are interested in you can go to pay attention to, my B station user name is: flying ye.

Of course, I recommend buying a paper book.

People who change the world are always changing. People who want to change the world are always thinking.

Actions speak louder than words, dear friends come on!