CSS principles that must be understood in front-end development

Web front-end developers are engaged in a lot of working with CSS, some people may not know how to work with CSS, how to write the CSS browser is how to parse it? When this becomes a bottleneck for us to improve the level of CSS, should we know more about it?

First, the development of the browser and CSS

Web browser mainly through the HTTP protocol connection to the Web server to obtain a Web page, HTTP allow web browser to send data to the Web server and access to Web pages. Currently 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, yet many other contemporary web browsers fully support these standards. The location of the Web page is indicated by a URL (Uniform Resource Locator), which is the address of the Web page, with http: The first is the HTTP protocol login. Many browsers support other types of URLs and protocols, such as ftp: FTP (File Transfer Protocol), Gopher: Gopher and https: HTTPS (SSL-encrypted HTTP).

Early Web browsers only support simple versions of HTML. The rapid development of software-specific browsers leads to non-standard HTML code generation. However, with the growth of HTML, in order to meet the designer's requirements, HTML has a lot of display functions. With the addition of these features the foreign-defined style of the language is increasingly meaningless. Front-End UI sharing

1994 Hakun proposed the original CSS recommendations. Burt Posse (Bertbos) was designing a browser called Argo, and they decided to work together to design CSS.

There have been some suggestions for stylesheet language, but CSS is the first to have a "cascade" idea. In CSS, the style of a file can be inherited from another style sheet. The reader can use his own preferred style in some places, inherit it elsewhere, or "cascade" the author's style, a cascade that allows both the author and the reader the flexibility to join their own designs and to mix their hobbies.

At the beginning of 1997, a working group specializing in CSS was organized by the Chris Riley. The Working Group began to discuss issues not covered in the first edition, and the result was the second edition of the requirements published in May 1998. By 2007, the third edition is not yet complete.

Second, how the browser renders the page and loads the page

Why some sites will be loaded when it is very slow, and the whole page is displayed at the same time, and some sites are from the top to the bottom of the gradual display of it? To understand this, you can start with the following general process:

1. The order of the browser download is from top to bottom, the order of rendering is also from top to bottom, download and rendering are carried out simultaneously.

2. When rendering to a portion of a page, all of its parts have already been downloaded (not that all associated elements have been downloaded).

3. If you encounter semantic explanatory tags embedded file (js script, CSS style), then the download process of IE will enable a separate connection to download.

4. And after the download, parsing, the parsing process, the page to stop all the elements down the download.

5. After the download is complete, the stylesheet will be parsed with all previously downloaded stylesheets, and once the parsing is complete, all previous elements (including previously rendered) will be rendered again.

6. JS, CSS, if there is a redefinition, after the definition function will overwrite the pre-defined function.

The key here is 2–5 these three points. The rendering efficiency is related to the following three points:

1. Query location efficiency of CSS Selector

2. Browser rendering modes and algorithms

3. Size of content to render

Third, what is the advantages of CSS and CSS

What is CSS? Front-End UI sharing

• CSS is the abbreviation for cascading style Sheets (cascading style sheets).
• The CSS language is a markup language that does not need to be compiled and can be interpreted directly by the browser (which belongs to the browser-interpreted language).
• CSS is responsible for the performance of Web content (XHTML) in standard web design.
• CSS files can also be said to be a text file, it contains some CSS tags, css files must use CSS as the filename suffix.
• You can reduce our workload by simply changing the CSS file and changing the overall form of the Web page, so it is a required course for every web designer.
• CSS is generated and maintained by the CSS workgroup.

The use of Css+div for Web page reconstruction, relative to the traditional TABLE page layout, has the following 3 significant advantages:

1. Separation of performance and content. The design section is stripped out and placed in a standalone style file, where only text information is stored in the HTML file. Such pages are more friendly to search engines.

2. Improve page browsing speed. For the same page visual effect, the page capacity using Css+div refactoring is much smaller than the size of the TABLE-encoded paging file, which generally has only the latter 1/2. Browsers don't have to compile a lot of lengthy tags.

3. Easy maintenance and revision. You can redesign the entire Web page by simply modifying a few CSS files.

Four, the browser to the CSS matching principle

Browser CSS matches are not found from left to right, but from right to left. For example, Div#divbox p span.red{color:red;}, the browser looks in the following order: first find the span element of all class= ' red ' in HTML, find it, find out if there is a P element in its parent element, and then determine if there is a The div element with ID Divbox, if all exists, is on the CSS match.

The benefit of browser lookup from right to left is to filter out extraneous style rules and elements as early as possible. Firefox calls this search method keyselector (keyword query), the so-called keyword is the last (rightmost) rule in the style rules, the key above is span.red.

Five, optimize your CSS

The so-called efficient CSS is to allow the browser to find a style matching elements to try to do less search, listed below some of our common write CSS to make some inefficient errors:

1. Do not use the label signature before the ID selector

General wording: Div#divbox

Better notation: #divBox

Explanation: Because the ID selector is unique, adding a div instead adds an unnecessary CSS match.

2. Do not use the tag name in front of the class selector. Front-End UI sharing

General wording: span.red

Better notation:. Red

Explanation: Same as the first one, but if you define more than one. Red, and under different elements are not the same style, you can not remove, such as your CSS file defined as follows:

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

If this is defined, do not remove, it will be confused after removal, but it is advisable not to write this

3. Use the hierarchy relationship as little as possible

General wording: #divBoxp. red{color:red;}

A better notation:. red{..}

4. Use class instead of hierarchical relationship

General wording: #divBox ul Li A{display:block;}

Better notation:. Block{display:block;}

5, in the CSS rendering efficiency, the efficiency of ID and class is basically equivalent

Class will be cached in the first load and will have a better effect on the stack, with the ID of the root element being better (the ID has a subtle speed advantage).

CSS principles that must be understood in front-end development