3 Things (Almost) No One Knows About CSS

CSS Tips Test: Do you really understand CSS?

Review of key points

• The best way to set double line height is to use unitless numbers (e.g. 2), so that child elements with different font sizes can inherit the correct line height ratio.
• Although the general misconception that z-index itself causes overlap, HTML elements can actually be overlapped by the margin attribute (especially setting negative margins).
• Pseudo-elements and pseudo-classes are very different features in CSS: pseudo-classes are applied to actual HTML elements under specific conditions, and pseudo-elements allow styling of parts of a document that are not actual HTML elements.
• W3C attempts to distinguish between pseudo-elements and pseudo-classes in the CSS3 selector specification by using two colons (::first-line) for pseudo-element selectors and one colon (:hover) for pseudo-element selectors, but in order to Backcompatibility, the browser must support both versions.

Do you think you are proficient in CSS? If the free CSS test results I've provided online for the past six months are of any reference, many experienced developers don't know as much about CSS as they think. Of the more than 3,000 people who have participated in the test so far, the average score is only 55%.

However, the average itself is not that interesting. I want to know more about where people are wrong. To write this article, I analyzed the data and focused on three issues where people scored particularly low. I will explain each question one by one, show you the answers most people choose, and explain the correct answers.

It is safe to say that if you take the test yourself after reading this article, you will have an unfair advantage!

Problem 1: The best way to set line-height

The first question should be easy for people who work on text styles regularly:

You want the text on the website to be double-line high by default. Which of the following line-height values ​​is the best way to achieve this?

• 200%
• 2em
• 2
• double

There are four answers to choose from, and you expect 25% of people will answer correctly by luck, but only 31% will answer this question correctly! Take some time to choose an answer for yourself and continue reading.

First of all, double is a distraction. line-height The only accepted keyword value is normal. I'm happy to say that only 9% of people chose this option. The other three answers are very popular.

The answer most people chose is 2em (39% chose this answer). In fact, 2em will certainly provide double line heights for the elements that apply it; but 200% will, too, and only 21% of people like this answer! Either em is more popular than percentages or people don't really understand them.

However, the correct answer is 2.

I was instilled with this lesson long ago when I first learned CSS. Always specify line-height as a unitless number; this way, specifying child elements of different font sizes will inherit the number instead of a fixed line height.

Suppose the page has a default font size of 12pt, but it also contains a title with a font size of 24pt. If you set the line-height of the body to 2em (or 200%) then you will get exactly 24pt (twice the size of the body font) line height throughout the document - even in that title . So the title will be a double line height instead of a double line height!

Instead, setting line-height to 2 will tell the browser to maintain the font size/line ratio even if the font size changes. The line height of the body will be 24pt, but for the 24pt font of the title, the line height will automatically increase to 48pt.

Question 2: How to make elements overlap

This question is a bit tricky. It requires some "skill" experience that CSS layout often requires:

Which of the following CSS attributes can cause HTML elements to overlap?

• z-index
• margin
• overflow
• background

Have you chosen the answer? OK, let's go into the deeper.

Again, there is an option that is easy to rule out: background. Everyone except 2% of the testers avoided it because they knew it controlled the background color and image.

Unfortunately, most people choose z-index directly. Up to 46% chose this answer. I guess it's because no one really understands how z-index works. In fact, setting the z-index attribute alone has no effect; you also need to set the position attribute of the element to make z-index work. In short, z-index allows you to control the stacking order of elements that do overlap, but they need to overlap first. MDN has a very good article titled “Understanding CSS z-index”, which is worth reading for more details.

If you have ever used overflow, it should also be easy to rule out. It controls the behavior of content that is not suitable for the size of the box: whether it is truncated, whether it flows out of the box's edge, etc. Again, this depends on whether the box size is constrained by other properties; it does not cause overlap by itself. Still, 22% think it might.

This leaves us with only margin, which is the correct answer. Only 30% of people answered correctly. You may be curious how an attribute that creates distances between elements can cause them to overlap. If you've done any actual CSS layout, the answer should be obvious: Negative margins will cause elements to overlap.

To demonstrate this, create a page with two div elements. Set the margin-top of the second div to a negative value, such as -100px. Bang! The second div now covers the bottom one hundred pixels of the first div.

In practice, you hardly intentionally overlap blocks like this, but negative margins are very useful for squeezing HTML elements into places they usually don't go. I often use them to push elements that float left or right into the fill area of ​​their parent box.

For web design history enthusiasts, the use of negative margin overlap elements in 2005 made three column page layouts, including the so-called One True Layout (and later Holy Grail layout).

Problem 3: Pseudo-elements and pseudo-classes

I admit, the last question is a bit despicable. But only 23% of the testers were able to answer this question correctly (this is worse than luck!), and it obviously touched a confusing point:

Which of the following effects is most suitable for using pseudo-elements to implement?

• Add a shadow to the user when he hovers over the hyperlink.
• When the check box is selected, the labels of the check box are displayed in different colors.
• Assign different background colors to odd and even rows of the table.
• In a flexible page layout, display the first line of the paragraph as bold text.

These three choices are all effects implemented using pseudo-classes; only one involves pseudo-elements. Can you distinguish them?

Pseudo-classes are specific states that the actual HTML element may be in. Think of it as a virtual class that the browser will automatically apply to elements under certain conditions.

The pseudo-element is part of the document, and even if it is not an actual HTML element, CSS allows you to style it. It's like a virtual HTML element - you can style it even if there is no actual HTML tag around it.

With this difference, let's take a look at these options:

Add a shadow to the user when he hovers over the hyperlink.

The hyperlink is an actual HTML element. Applying styles to it only in specific cases (when the mouse is hovering over it) means we are using pseudo-classes. In this case, the pseudo-class you will use is :hover.

22% of the testers considered this to be a pseudo-element.

When the check box is selected, the labels of the check box are displayed in different colors.

Similarly, a tag is an actual HTML element, not a virtual element. When the check box is selected, the browser applies the :checked pseudo-class to it. You can then use it in your selector to style the checkbox, or even style the label next to it (for example, using the adjacent sibling selector ).

20% of the testers considered this to be a pseudo-element.

Assign different background colors to odd and even rows of the table.

This is a question that really fools people, but again, we're talking about applying styles to actual HTML elements (in this case tr elements). tr Is it odd or even in the set of child elements of its parent element, which is just another case where you can match with pseudo-classes.

In this case, the pseudo-class is :nth-child(even) (or :nth-child(2n)) for even elements and :nth-child(odd) (or :nth-child(2n 1)) for odd elements.

I guess this is simply because :nth-child and pseudo-elements usually sound like very obscure CSS features, but 36% of testers chose this as a pseudo-element.

In a flexible page layout, display the first line of the paragraph as bold text.

Of course, this is the correct answer. So far, hopefully the difference has been clear. In a flexible page layout, you can't view the HTML code of the page and say "the elements there contain only the first line of the paragraph text". The browser wraps the line according to the width of the paragraph, which you can't control in a flexible page layout.

:first-line is a pseudo-element that allows you to apply styles to the first line of text in a block, regardless of where the first line is broken to the second line.

If you're thinking "Okay, that sounds reasonable, but no one knows the difference between pseudo-elements and pseudo-classes", then W3C agrees with you. In the CSS3 selector specification, in order to distinguish between the two, it changed the syntax so that the pseudo-element selector uses two colons (::first-line), while the pseudo-class still uses one colon (:hover). Of course, for backward compatibility, the browser must support both versions.

So yes, like I said: mean question. But hey, if you're a CSS geek like me, I think you'll know the difference between your pseudo-element and pseudo-class.

How are your scores?

It's like this: three puzzles in the test. If you answer one of these questions confidently, you're doing a good job. Did you answer two correctly? not bad. If you answered all three correctly, I would love to hear what you think! Especially after I've given these answers, I really need some more tricky CSS questions. Please post them in the comments!

If you like these questions, maybe you'd like to try the rest of the tests. Rest assured, other questions are much easier than these…most of them!

The above is the detailed content of 3 Things (Almost) No One Knows About CSS. For more information, please follow other related articles on the PHP Chinese website!