Detailed explanation of CSS principle in front end development

Detailed explanation of CSS principle in front-end development

People who are engaged in Web front-end development have a lot to do with CSS. Some people may not know how CSS works and how to parse the written CSS browser. When this becomes a bottleneck for us to improve the level of CSS, should we know more about it?

1. Browser Development and CSS

Web browsers access Web pages mainly through HTTP protocol, while HTTP allows Web browsers to send data to Web servers and access Web pages. The most commonly used HTTP is HTTP/1. 1, which is fully defined in RFC2616. HTTP/1. 1 has a set of standards that Internet Explorer does not fully support, whereas many other contemporary web browsers fully support these standards. The location of the web page is indicated by URL (Uniform 1 Resource Locator), which is the address of the web page; Start with http: Login through HTTP protocol. Many browsers also support other types of URL and protocols, such as ftp: FTP (File Transfer Protocol), gopher: Gopher and https: HTTPS (HTTP encrypted with SSL).

Early web browsers only supported a simple version of HTML. The rapid development of proprietary software browsers has led to the generation of non-standard HTML code. However, with the growth of HTML, in order to meet the requirements of designers, HTML has obtained many display functions. With the increase of these functions, foreign languages that define styles become more and more meaningless.

In 1994, Hakunli put forward the initial proposal of CSS. Bert Perth (BertBos) was designing a browser called Argo at that time, and they decided to cooperate in designing CSS.

There were already some suggestions for a style sheet language, but CSS was the first to include the idea of "cascading". In CSS, the style of a file can be inherited from other style sheets. Readers can use their own preferred styles in some places, and inherit or "cascade" the author's styles in other places. This cascading method gives both authors and readers the flexibility to add their own designs and mix their hobbies.

At the beginning of 1997, a working group specializing in CSS was organized in W3C, and its head was Chris Riley. This working group began to discuss issues not covered in the first edition, which resulted in the second edition requirements published in May 1998. As of 2007, the third edition is not complete.

2. How does the browser render and load the page

Why do some websites load slowly when they open, and the whole page is displayed at the same time, while some websites are displayed step by step from top to bottom? To understand this, you can start with the following routine process:

1. The order of browser downloading is from top to bottom, and the order of rendering is also from top to bottom. Downloading and rendering are carried out at the same time.
2. When you render to a part 1 of the page, all the parts above it have been downloaded (not all the associated elements have been downloaded).
3. If you encounter a semantically interpretive tag-embedded file (JS script, CSS style), then the download process of IE will enable a separate connection for download.
4. Parse after downloading. During the parsing process, stop downloading all the downward elements of the page.
5. After the style sheet is downloaded, it will be parsed from all the previously downloaded style sheets. After the parsing is completed, all the previous elements (including those that have been rendered before) will be rendered again.
6. If there is redefinition in JS and CSS, the post-defined function will override the pre-defined function.

The key here are the three points 2-5. Rendering efficiency is related to the following three points:

1. Query location efficiency of CSS selector
2. Rendering mode and algorithm of browser
3. The size of the content to render

3. What are the advantages of CSS and CSS

What is CSS?

CSS is short for Cascading Style Sheets (Cascading Style Sheet). CSS is a markup language, it does not need to compile, can be directly interpreted by the browser to execute (belongs to the browser interpretation language). In standard web design, CSS is responsible for the presentation of web content (XHTML). The CSS file can also be said to be a text file, it contains a number of CSS tags, CSS file must use css as the file name suffix. We can simply change the CSS file and change the overall presentation of the web page, which can reduce our workload, so it is a compulsory course for every one web designer. CSS is generated and maintained by the CSS Working Group of W3C.

Compared with the traditional TABLE web page layout, CSS+DIV has the following three significant advantages:

1. Separation of expression and content. The design part is stripped out and placed in a separate style file, and only text information is stored in HTML file. Such pages are more friendly to search engines.

2. Improve page browsing speed. For the same page visual effect, the page capacity reconstructed by CSS+DIV is much smaller than that encoded by TABLE, and the former is only 1/2 of the latter. Browsers don't have to compile a lot of lengthy tags.

3. Easy maintenance and revision. You can simply modify a few CSS files to redesign the entire site's pages.

4. Browser Matching Principle for CSS

Browser CSS Match does not look left-to-right, but right-to-left. For example, DIV # divBox p span. red {color: red;} The search order of the browser is as follows: first, find all span elements with class = 'red' in html, then find whether there are p elements in their parent elements, and then judge whether there are div elements with id as divBox in the parent elements of p. If they all exist, CSS matches.

The advantage of browsers searching from right to left is to filter out 1 irrelevant style rules and elements as early as possible. Firefox calls this lookup keyselector (keyword query). The so-called keyword is the last (rightmost) rule in the style rules, and the above key is span. red.

5. Optimize your CSS

The so-called efficient CSS is to let the browser search as little as possible when looking for the matching elements of style. Here are some common inefficient mistakes when writing CSS:

1. Do not use tag names before ID selectors

1 general writing: DIV # divBox

Better written: # divBox

Explanation: Because the ID selector is 1-only, the addition of div adds unnecessary CSS matches.

2. Do not use tag names before class selectors

1 General writing: span. red

Better written:. red

Explanation: Same as article 1, but if you define more than one. red, and the style is different under different elements, it cannot be removed. For example, your css file defines as follows:

 　 p.red{color:red;}
  　  　  span.red{color:#ff00ff}

If it is defined in this way, don't remove it, it will be confused after removal, but it is recommended not to write it like this

3. Use hierarchical relationships as little as possible

1 generic writing: # divBoxp. red {color: red;}

Better written:. red {...}

4. Use class instead of hierarchical relationship

1 generic writing: # divBox ul li a {display: block;}

Better written:. block {display: block;}

5. The efficiency of id and class are almost the same in the efficiency of CSS

The class will be cached in the first load, will work better in the cascade, and will work better with the id at the root element (id has a subtle speed advantage).

Thank you for reading, hope to help everyone, thank you for your support to this site!