Author: Born

CSS is no stranger to every front-end engineer, and a rich variety of Web sites, most of which use it.

Even though CSS has been on the Web for 24 years, we still can’t fully understand its mind.

CSS is like a veiled girl, sometimes lovely, sometimes mysterious, like a heavy burden, still trying to find a better life.

Unlike most programming languages, CSS is a cellar of wine that needs to be savoured and digested.

Today let’s take a look at some common misconceptions about CSS

The name comes from

CSS, or Cascading Style Sheets, is a Style sheet language used to describe the layout and layout of document content such as HTML or XML.

Its “cascading” nature, as the name suggests, is one of the reasons why it has outlived other stylesheets.

CSS’s main creator, Haakon Wim Lay, whose mother worked in the publishing industry, which she loved, and had extensive experience in document layout. This led Hakan Wim Lay to introduce a number of features from the publishing world to CSS, including the “cascading” feature.

CSS was invented to solve the problem that IN the early days of the Internet, HTML could not perfectly display the content of documents like traditional printed materials.

Hakan Wim Lay points out that traditional print is post-binding, in which content creators provide content and publishing companies are responsible for typesetting.

In the Web world, THE HTML carries the content, arrives in each user’s browser, and is presented in combination at the end. This is late binding (which is later than late binding).

Thus, the layout style of a Web page can be interpreted many times: the default browser style, the developer-provided style, and the user-defined style.

This is also the priority of CSS coverage in modern browsers, which takes advantage of the cascading nature of CSS to achieve.

Historical baggage

CSS was born out of a reference to printing industry standards, and introduced a lot of features that today seem strange, such as float and margin folding.

float

Float was added to CSS to allow images to blend with text, much as we do in Word, by wrapping text around images.

As you can see, float is designed as a “typographical property,” not for layout.

But before CSS3 was widely used, and before IE was alive, we had to use float to do layout work.

Using float causes the current element to depart from the regular document flow, and considering the additional cost to the developer of how the parent element clears floats, we could have done it more gracefully.

Fortunately, flex is now ubiquitous, and we can actually use “layout properties” to do layout work, returning float to its roots.

Margin margin folds

Margin represents the example from the border to the outermost layer in a box model, called margin.

Margin folding is a nightmare every front-end beginner must experience.

As we’ve mentioned repeatedly before, CSS was designed to allow typography to be displayed on the Web, whereas traditional printing is more about text typography, such as adjusting text size, paragraph indentation, line spacing, etc.

In traditional printing and typesetting, margin can be understood as the gap size between two adjacent paragraphs, namely the pre-paragraph/post-paragraph spacing in Word.

So why do vertical margins need to fold?

Suppose we want to restore the design in a Web page, we can measure the height between two paragraphs of the design and assign it to margin-top/margin-bottom. If there is no fold, then we need to halve the margin value and then fill it in, which is not intuitive.

So why only vertical direction margin folds, horizontal direction does not fold?

According to the standard, this is better looking and more in line with the designer’s needs. ┏ ┓ (´ ∀ `)

vertical-align

When it comes to typography, vertical-align text alignment has to be mentioned. There have been too many articles to explain the rules of this article.

However, from the perspective of attribute classification, vertical-align is still a typesetting attribute, rather than layout. Art industry has specialized, take it to do text typesetting outside the work, of course, is not suitable (such as text and text mix in the center).

Overlooked details

In addition to confusing developers with historical baggage, there are some details of the CSS standard that are easily overlooked, leading to strange bugs.

Pseudo elements

False elements are, as the name suggests, “false elements.”

Pseudo-elements were created to satisfy developers who wanted to insert nodes into the DOM for decorative purposes (they didn’t) but didn’t want to break the HTML code.

Because the pseudo-element is display-dependent and does not exist in the DOM, when the parent of the pseudo-element is set to display: None, the pseudo-element is also absent. The parent element is still visible through Chrome’s DevTools, but not ::before or ::after.

However, with the development of front-end technology, there are many new uses for pseudo-elements, such as assigning DOM attribute values directly to content. With this feature, we can implement a custom placeholder for any element.

height: 100%

This code, which we use a lot on projects, does it always work?

Literally, setting 100% means that the height of the current element is the same as the parent element.

But using percentages assumes that the height of the parent element is computable. For example, the parent element height: 100px or height: 50%. The height of the parent element is independent of the child element only if the value or percentage is fixed. Otherwise, the parent element depends on the child element to determine the height, and the child element height is equal to the parent element, trapped in an endless loop.

Therefore, when using percentages in CSS, the rule restricts that at least one of them can be calculated independently in any scenario that may create an infinite loop, otherwise it falls back to the default, height: auto.

Reference path

Let’s start with a little question:

b.js requests the interface at runtime./c/c.get.json, What is the full path to c.get.json?

I think most of the friends all can answer is http://a.com/a/c/c.get.json, so often used in our project.

If it is:

Through http://a.com/a/index.html, < link href = “http://b.com/b/b.css” > < / script >, biggest ss cited a picture again. / c/SAN Antonio pg, could you tell me what is the full path to the SAN Antonio pg?

As you can see from a simple demo, the full path of the image is http://b.com/b/c/c.jpg.

Thus, the XHR content of JS requests introduced by external links is relative to the URL of the current page. The imported CSS file is relative to the URL of the current CSS file.

The wrong pronunciation

CSS properties and values are mostly short and not difficult to read, but a few can be misread.

conclusion

Web standardization has always been the direction of the efforts of major manufacturers and scientific research institutions in the whole Internet field. Because standardization is now widespread, it gives developers more time to create web pages that will live on all users’ browsers.

CSS is the colorant of the Web world, and rich pages need it.

We should cherish the progress brought by standardization to the Web ecosystem, try to comply with standards, eliminate ambiguities and bugs, and bring users a more unified Web experience.

reference

1. Hakan Wim Lay: Cascading style sheets; cncuckoo.github.io/cssthesis

2. The history of the CSS language; zhuanlan.zhihu.com/p/21740082

3. Mizuho ShiJun; www.zhihu.com/question/25…

4. MDN; Developer.mozilla.org/zh-CN/docs/…