This chapter summarizes CSS compatibility, NEW FEATURES of CSS3, CSS selectors, high-frequency properties, high-frequency layout, high-frequency knowledge points, and performance optimization. If you are interested in HTML knowledge, you can go to the HTML chapter of knowledge consolidation

CSS Hack

CSS hacks are the process of writing specific CSS styles for different browsers or versions of browsers to make them compatible. CSS hacks are common in three forms: CSS attribute hacks, CSS selector hacks and IE conditional comment hacks.

CSS attributes Hack(in standard mode)

color: red;  /* All browsers recognize */
_color: red; /* Only Internet Explorer 6 identifies */
-color: red; /* Only Internet Explorer 6 identifies */
*color: red; /* Only Internet Explorer 6 and 7 recognize */
+color: red; /* Only Internet Explorer 6 and 7 recognize */* +color: red; /* Only Internet Explorer 6 and 7 recognize */
#color: red; /* Only Internet Explorer 6 and 7 recognize */
color: red\ 0;*/ Is recognized only by Internet Explorer 8 to Internet Explorer 10 
color: red9 \ \ 0;/* Only Internet Explorer 9 and 10 recognize */ 
color: red!important; /* Only Internet Explorer 6 does not support */ 
Copy the code

CSS selector hacks

*html #demo { color: red; } /* Only Internet Explorer 6 identifies */* +html #demo { color: red; } /* Only Internet Explorer 6 and 7 recognize */
body:nth-of-type(1) #demo { color: red; } /* IE9+, FF3.5+, Chrome, Safari, Opera can recognize */
head:first-child+body #demo { color: red; } /* IE7+, FF, Chrome, Safari, Opera can recognize */
:root #demo { color: red9; } /* Only IE9 recognizes */
Copy the code

IE conditional comment Hack

<! --[if IE]> <! [endif]-->
<! --[if IE6]> <! [endif]-->
<! --[if!IE 7]> < span style = "max-width: 100%; <! [endif]-->
<! --[if gt IE6]> <! [endif]-->
<! --[if gte IE7]> <! [endif]-->
<! --[if lt IE7]> the version of Internet Explorer 7 cannot be recognized. <! [endif]-->
<! --[if LTE IE7]> IE7 <! [endif]-->
<! --[if!IE]> <! [endif]-->
Copy the code

Common Browser compatibility problems and solutions?

Different browser tabs by defaultpaddingandmargindifferent

Symptom: Common tags, without style control, margin and padding differ greatly. Solution:

* {
    margin: 0;
    padding: 0; Note: This is one of the most common and easily resolved browser compatibility issues of almost allCSSThe wildcard * is used at the beginning of the file to set the 'of each labelmargin`, `padding` is 0. ### block attribute tagfloatAfter, again have run amokmarginIn the case ofIE6According tomarginBigger problem than setting symptoms: Common symptoms areIE6The following block is pushed to the next line. Solution: InfloatSet the tag style to ````css
#demo { display: inline } 
Copy the code

If the label height is less than 10px, it will exceed the preset height in Internet Explorer 6 and Internet Explorer 7

Symptom: Internet Explorer 6, 7 and Surf this TAB height is out of control, beyond their own setting height. Solution: Set labels that are out of height

#demo { overflow: hidden; }
/ * or * /
#demo { line-height: 8px; }  /* Assume a label height of 9px */ 
Copy the code

Display :block with float layout, IE6 spacing bug

The spacing ratio in IE6 exceeds the set spacing.

#demo {
    display: block;
    display: inline;
    display: table;
}
Copy the code

Note: Inline property tags. To set the width and height, we need to set display:block; (Except for the input tag). After a float layout with a horizontal margin, in IE6 it had a bug with the horizontal margin after the block property float. But since it is an inline attribute tag, we add display:inline, and its width and height are not set. We also need to add display:talbe after display:inline.

Images are spaced by default

Symptom: Some browsers have a default spacing when several IMG tags are placed together, and the wildcards mentioned in Problem 1 do not work. Solution:

img { float: left; }
Copy the code

Note: Since the IMG tag is an inline attribute tag, the IMG tag will be placed on a line as long as it is within the width of the container, but some browsers will have a space between the IMG tags. Remove that spacing and use float is the way to go.

Opacity cannot be used in Internet Explorer 9

Solution:

#demo {
    opacity: 0.5;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}
Copy the code

CSS selector types, and illustrate their usage

Types: basic selectors, composite selectors, familiar selectors, pseudo-classes, pseudo-elements

Base selector

Basic selectors include: general selectors, element selectors, class selectors, and ID selectors

Combinatorial selector

Combinatorial selectors include: multi-element selectors, descendant selectors, child selectors, adjacent selectors, adjacent selectors

Property selector

Pseudo class selector

Css1-2 pseudo-class selector

CSS3 common pseudo-class selector

Pseudo elements

The difference and function of pseudo class and pseudo element

CSS3 definition of pseudo class:

  1. The purpose of pseudo-classes is to use selectors to find information that does not exist in the DOM tree and cannot be retrieved by regular CSS selectors.
  2. Pseudo-classes consist of a colon:The beginning, followed by a colon, is the name of the pseudo-class and the optional arguments contained in parentheses.
  3. Any regular selector can use pseudo classes anywhere. Pseudo – class syntax is case – insensitive. Some pseudo-classes are mutually exclusive, while others can be used by the same element at the same time. Also, pseudo classes can be dynamic to accommodate changes in the DOM structure that occur when users manipulate the DOM. CSS3 pseudo-classes have two functions:
  4. Get information that does not exist in the DOM tree. Such asaOf the link:link,:activedSuch information does not exist in the DOM tree structure and can only be obtained through CSS selectors.
  5. Gets information that cannot be retrieved by regular CSS selectors. Such as through:nth-child(odd)The implementation selects even lines to set the background color, if not with pseudo-classes, but withJavaScriptIt’s much more complicated to set up. The general is implemented through pseudo classesCSSLogic that cannot be implemented.

CSS3 definition of pseudo-elements

  1. Pseudo-elements create abstract elements in the DOM that do not exist in the regular document flow.
  2. The pseudo-element consists of two colons: :The beginning, followed by the name of the pseudo-element.
  3. Use two colons: :The purpose is to distinguish it from pseudo classes (no difference in CSS2). Consider compatibilityCSS2You can still use single quotes for existing pseudo-elements in:Syntax. butCSS3The new pseudo-element in the: :.
  4. Only one pseudo-element can be used by a selector, and the pseudo-element must be at the end of the selector statement. In simple terms, a pseudo-element creates a virtual container that does not contain any DOM elements, but can contain content. In addition, developers can customize styles for pseudo-elements.

The difference between pseudo-classes and pseudo-elements

  1. Pseudo-classes are essentially meant to complement regular CSS in order to get more information.
  2. The essence of a pseudo-element is to create a virtual container that you can set content and style.
  3. Multiple pseudo-classes can be used at the same time, but only one pseudo-element can be used.

CSS selector priority and weight calculation

Priority of the CSS selector

A selector has two priorities: 1. If the selector is at the same level. 2. Selector at different levels.

CSS selector at different levels

  1. Used after properties! importantOverrides any style defined at any location. As astyleThe style in which attributes are written to elements.
  2. idThe selector
  3. classThe selector
  4. Label selector
  5. Wildcard selector
  6. Summary of browser default properties or inheritance:! Important > ID selector > Class selector > Tag selector > Wildcard selector > Browser default properties

CSS at the same level

For selectors of the same level, the last one declared overwrites the previous one.

CSS Weight Calculation

  1. Inline style, such asstyle=''. The weight is 1000.
  2. idSelectors, such as#content, the weight is 0100.
  3. Class, pseudo class, attribute selector, such as.content,:link,[type=text]And so on, the weight is 0010.
  4. Wildcard, child selector, adjacent selector, etc., with weight 0001.
  5. Inherited styles have no weights, and rules defined by wildcard selectors take precedence over rules inherited from elements.
  6. ! important(weight), it has no special value, but it has the highest priority. For easy memorization, it can be considered as 1,0,0,0,0.

Which properties of CSS can be inherited?

Font family properties

Font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust

Text series attributes

  • Text-indent: indicates the indentation of text
  • Text-align: align text horizontally
  • Text-transform: controls the case of text. Attribute values are:lowercase(lowercase letters only),uppercase(capital letters only),capitalize(Each word in the text begins with a capital letter)
  • The line – height: line height
  • Word-spacing: Increases or decreases the spacing between words.
  • Letter-spacing: Increases or decreases the amount of white space (character spacing) between characters.
  • Direction: Specifies the writing direction of the text.ltr(Default, left to right),rtl(From right to left)
  • Color: text color

Element visibility: Visibility

Cursor properties: CURSOR

List layout attribute: list-style

Introduce the standard CSS box model? What’s different about the box model for the lower version of IE?

CSS box model: four attributes: margin, padding, border, width and height

  • There are two kinds of box models, IE box model and W3C box model
  • IE box model width height = inside margin + border + content area
  • Standard box model width = content area width
  • CSS Settings
/* Standard box model */
box-sizing: content-box;

/* IE box model */
box-sizing: border-box;

/* Inherits the parent element */
box-sizing: inherit;
Copy the code

Position Attribute value and description function

The attribute value is as follows: the position: the static | relative | absoulte | fixed | sticky | inherit

position: static

The default value. There is no positioning, following the normal flow (ignoring top, bottom, left, right, or Z-index declarations).

positoon: relative

Relative positioning, relative to its normal position, following the conventional flow. And the offset of top, right, bottom, and left attributes does not affect any elements in the regular stream.

position: absolute

Absolute positioning, out of the conventional flow. In this case, the offset attribute refers to the nearest positioned ancestor element, or if there is no positioned ancestor element, it goes back to the body element. The offset position of the box does not affect any element in the regular flow, and its margin does not fold with any other margin (triggering the BFC).

position: fixed

Fixed positioning, out of the conventional flow. Same as absolute, but the offset positioning is based on the window reference. When a scroll bar appears, the object does not scroll along.

Position: sticky (CSS3)

Sticky positioning, based on where the user scrolls. In normal, it behaves like position:relative, following the normal flow. When the page scrolls beyond the target area, it behaves like Position: Fixed, which is fixed to the target and out of the regular flow.

position: inherit

Inherits the value of the position attribute from the parent element.

Display attribute value and description function

Commonly used attributes

display: none | block | inline-block | table | inline-table | flex | inline-flex | grid | inline-grid | inherit

Table properties

display: table-captoion | table-cell | table-row | table-row-group | table-column | table-column-group | table-header-group | table-footer-group

table-caption

This element is displayed as a table title (similar)

table-header-group

This element is displayed as a group of one or more rows (similar)

table-footer-group

This element is displayed as a group of one or more rows (similar)

table-cell

This element is displayed as a table cell (similar to and)

table-row

This element is displayed as a table row (similar)

table-row-group

This element is displayed as a group of one or more rows (similar)

table-column

This element is displayed as a cell column (similar)

table-column-group

This element is displayed as a grouping of one or more columns (similar)

Other attributes

display: list-item | run-in

display: list-item

This element is displayed as a list

display: run-in

This element is displayed as a block-level or inline element, depending on the context

display: none; And the visibility: hidden; The difference between

Both can make elements invisible. The difference is:

  • display: none;Will completely remove the element from the render tree, taking up no space while rendering.visibility: hidden;Elements still exist in the render tree and still occupy space while rendering, but the content is not visible.
  • display: none;The disappearance of descendant nodes is caused by the disappearance of elements from the rendering tree. The display state cannot be changed by changing the display attribute of descendant nodes.visibility: hidden;Is inherited property, descendant node disappears due to inherited hidden property, by settingvisibleProperty can be displayed by descendant nodes.
  • To modify elements in the regular streamdisplayAttributes often cause document rearrangements. Modify thevisibilityAttributes only cause elements to be redrawn.
  • The screen reader doesn’t readdisplay: none;Element content, but is readvisibibity: hidden;Element content.

Several ways to hide elements

  • visibility: hidden;This property hides elements that still take up space in the document flow.
  • display: none;The element is not visible and takes up no space in the document flow.
  • opacity: 0;CSS3 property, set to 0 to make elements transparent.
  • filter: blur(0);The CSS3 property sets the ambiguity of an element to 0, thus making the element disappear “” on the page.
  • position: absolute;Set the left value to a negative position so that the element is visible.
  • transform: scale(0);Set the element to be infinitely smaller, so that the element is invisible and its location is preserved.
  • height: 0;Set the element height to 0 and eliminate the border.
  • <div hidden="hidden"></div>HTML5 attributes, Effects and Display: Hidden; The same. But this property is used to record the state of an element.

Understanding of the BFC specification?

What is landing

  • BFCBlock Formatting ContextBlock level formatting context“. Normal flow (also known as standard flow, normal flow) is the most common layout of a document when it is displayed. A box must belong to a formatting context in a normal flow. You can think of the BFC as a big box, and the elements outside the box will not interact with the elements inside the box.
  • BFCIs a concept from the W3C CSS 2.1 specification,Does it determine how an element locates its content and how it relates and interacts with other elements. When it comes to visual layout, Block Formatting Context provides an environment in which HTML elements are laid out according to certain rules. Elements in one environment do not affect the layout of other environments. For example, a floating element forms a BFC. The children of the floating element are mainly affected by the floating element. The two floating elements are not affected by each other. You can also say that the BFC is a scope.

Conditions for the formation of BFC

  • Float element, float a value other than None
  • Position element, position (Absolute, fixed)
  • Display is one of the following inline-block, table-cell, table-caption values
  • Overflow values other than visible (hidden, auto, scroll)

The characteristics of landing

  • The internal boxes will be placed one after the other vertically
  • The vertical distance is determined by margin
  • The region of the BFC does not overlap with the element region of float
  • When calculating the height of the BFC, floating elements are also involved
  • The BFC is an independent container on the page. The child elements in the container do not affect the specific features of external elements. You can refer to the BFC in the CSS for details

What is FOUC? How to avoid FOUC?

What is FOUC?

FOUC: Flash of Unstyled Content, abbreviated as FOUC, a document style failure (also known as browser style flicker). Using the import method to import CSS can cause some pages to show up in Internet Explorer on Windows in a strange way: flashes of unstyled page content. This phenomenon is called Flash of Unstyled Content, or FOUC for short.

Possible causes:

  • useimportMethod to import the stylesheet
  • Place the style sheet at the bottom of the page
  • There are several stylesheets, placed at different points in the HTML structure principle: When the stylesheet loads later than the structural HTML, the page will stop rendering when it is loaded into the stylesheet. After the stylesheet is downloaded and parsed, the page is rerendered, and the screen briefly flickers.

Solutions:

  • uselinkThe tag places the stylesheet in the documentheadIn the

What is margin overlap? What’s the result of the overlap?

What is margin overlap

Margins overlap: The margins of two vertically adjacent boxes (possibly siblings or ancestors) can be combined to form a single margin. This merging of margins is called folding, and the combined margins are called folded margins. For more details, go to: CSS Box Module

Calculation of margin after folding

1. All the margins involved in folding are positive values

<div style="width:50px; height:50px; margin-bottom:50px; background-color: red;">A</div> <! Margin-bottom :50px; -->
<div style="width:50px; height:50px; margin-top:100px; background-color: green;">B</div> <! -- focus: margin-top:100px; -->
Copy the code

In the case that margin is all positive, the larger margin value is taken as the final margin value:

2. All the margins involved in folding are negative

<div style="width:50px; height:50px; margin-bottom:-75px; background-color: red;">A</div> <! Margin-bottom :-75px; -->
<div style="width:50px; height:50px; margin-top:-50px; background-color: green;">B</div> <! Margin-top :-50px; -->
Copy the code

When margin is all negative, the one with the largest absolute value is taken. Then, starting from zero, the schematic diagram of negative displacement is shown as follows:

3. There are positive and negative margins involved in folding

<div style="width:50px; height:50px; margin-bottom:-50px; background-color: red;">A</div> <! Margin-bottom :-50px; -->
<div style="width:50px; height:50px; margin-top:100px; background-color: green;">B</div> <! -- focus: margin-top:100px; -->
Copy the code

When there are positive and negative values in margin, the one with the largest absolute value should be selected from all negative values, and the one with the largest absolute value should be selected from all positive values, and the two should be added together. In this example, 100px + (-50)px =50px; Schematic diagram:

4. Adjacent margins should be calculated together

<div style="margin:50px 0; background-color:red; width:50px; height:50px;">
    <div style="margin:-60px 0;">
           <div style="margin:150px 0;">A</div>
    </div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px; height:50px;">
    <div style="margin:-120px 0;">
           <div style="margin:200px 0;">B</div>
    </div>
</div>
Copy the code

Please note that multiple margins are folded into one margin adjacent to each other, so all relevant values should be calculated together instead of separately. In the above example, the margin generated by the margin folding between A and B is the result of the folding of six adjacent margins. Margin value is divided into two groups:

Positive: 50px, 150px, 200px negative: According to the calculation rule when there are pluses and minuses, the maximum value of a positive value is 200px, and the maximum absolute value of a negative value is -120px, so the final folded margin should be 200 + (-120) = 80px.

5. Pay attention to

In addition, it should be noted that their margin-botom and margin-top will overlap when they are adjacent. Only when their content is empty and the border and padding in the vertical direction are 0, their margin-top and margin-bottom will be adjacent. Example:

<div style="border:1px solid red; width:100px;">
    <div style="margin-top: 100px; margin-bottom: 50px;"></div>
</div>
Copy the code

After the above code is run, we should have a square with a red border. The width and height of the square should be 100px, but the height should not be 150px. Schematic diagram:

Meaning of margin overlap

Margin overlap occurs only between vertical margins in normal stream documents, avoiding the problem of double margins between block-level elements.

Margin overlap solution

1. Floating elements,inline-blockElement, absolutely locating elementmarginIt’s not going to be perpendicular to anything elsemarginfolding

Margins of floating elements also do not fold vertically, even for their adjacent children.

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>
Copy the code

Schematic diagram:

2. Create block-level formatting context 1 element without margin folding of its children

Take the elements of “Overflow: Hidden” for example:

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>
Copy the code

If B and its “overflow: Hidden “contain blocks have a margin collapse, the gold bar should be at the top of the green block; otherwise, it does not. Schematic diagram:

Explain what floating is and how it works?

What is floating?

In a non-Ie browser, the height of the container is not set and the child element is floating. The height of the container cannot be stretched by the content. At this point, content spills out of the container and affects the layout. This phenomenon is called floating (overflow).

The working principle of

  • Floating elements leave the document flow and do not occupy space (causing “height collapse”)
  • The floating element touches the border that contains it or the border of another floating element

How to clear the float

1. Add height to the parent element of the floating element (poor scalability)

If an element is to float, its parent element must have height. Height of the box to close the float. By setting height directly to the parent element, it is not possible to add height to all boxes in practice, which is cumbersome and can not accommodate the rapid change of the page; Alternatively, the height of the parent container can be stretched by the content (such as an IMG image), which is often used in practice.

2. clear:both

Add the last redundant element to the last child element and set it to clear:both to clear the float. It is important to note that the element added at the end of the parent element must be a block-level element, otherwise it cannot be raised to the height of the parent element.

<style>
#wrap{
      border: 1px solid;
}
#inner{
      float: left;
      width: 200px;
      height: 200px;
      background: pink;
}
</style>

<div id="wrap">
    <div id="inner"></div>
    <div style="clear: both;"></div>
</div>
Copy the code

3. Pseudo-element clearance float

The above method can clear the float, but we don’t want to add these meaningless redundant elements to the page, how to clear the float? Combine: After pseudo-elements with IEhack to make it perfectly compatible with all major browsers. IEhack refers to triggering hasLayout.

<style>#wrap { border: 1px solid; } #inner { float: left; width: 200px; height: 200px; background: pink; } .clearfix { *zoom: 1; } /* Ie6 7 does not support false elements */. Clearfix :after {content: "; display: block; clear: both; height: 0; line-height: 0; visibility: hidden; /* Allows the browser to render it, but does not display it */}</style>

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>
Copy the code

4. Use Overflow: Hidden for the parent element

This scheme allows the parent container to form a BFC (block-level format context), which can contain floats, often used to solve the problem of high collapse of floating parent elements.

Set zoom:1 to clear the floating principle?

  • The triggerhasLayoutTo clear the float.
  • zoomAttributes areIE browserProprietary attributes of,It sets or retrieves the scale of an object. Solve ie under the more bizarre bug. For example, margin overlap, float clearance, trigger ie hasLayout property, etc.
  • The principle of: When setzoomAfter the value of, the set element will be enlarged or shrunk, and the height and width will be recalculatedzoomValue will also occur when re-rendering, using this principle, also solved the IE sub element float when the parent element does not automatically expand the problem.
  • zoomIs isIE browserFirefox and older webKit core browsers do not support this property. However,zoomNow it has been progressively standardized and appears inCSS 3.0In the draft specification.
  • Currently non-IE does not support this property. What property do they use to scale elements? You can use cSS3 animation propertiesscaleScale.

The difference between link and @import

Subordination distinction

@import is a syntax rule provided by the CSS. It only imports the CSS. Link is an HTML-provided tag that not only loads CSS files, but also defines RSS, REL connection properties, and more.

Compatibility distinction

@import is a CSS2.1 syntax that is recognized only in IE5+; The link tag, as an HTML element, has no compatibility issues.

Load sequence difference

When the page is loaded, the CSS introduced by the link tag can be loaded in parallel. The CSS introduced by @import will be loaded after the page is loaded.

DOM controllability distinction

You can manipulate the DOM with JS and insert the link tag to change the style; There is no way to introduce styles by adding @import to JS.

Weight difference

The style weight introduced by link is greater than that introduced by @import.

What is the difference between PX, EM and REM?

px

Px is a unit of relative length, relative to the screen resolution of the monitor. Pros and cons: Stable and accurate, but cluttered when zooming in or out of the browser.

em

Em is a unit of relative length. Em is a font size relative to the parent element. Relative to the browser’s default font size if the current font size for inline text has not been manually set. Pros and cons: The em value is not fixed; it inherits the font size of the parent element.

pxandemThe conversion between:

The default font height for any browser is 16px. All untuned browsers fit: 1em=16px. So 12px=0.75em, 10px=0.625em. Font size=62.5% (16px*62.5%=10px) in the body selector for ease of use. After that, you simply divide the px value you used by 10 to get the em value, as in: 12 px = 1.2 em, 10 px = 1 em.

rem

Rem is a relative unit added to CSS3. Rem is a relative unit, relative to the HTML root element. This unit combines the best of both relative and absolute size, allowing you to scale all font sizes by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer. Rem is now supported by all browsers except IE8 and earlier.

What is the difference between CSS reset and normalize.css?

In both cases, the browser style is consistent by resetting the style. The difference is:

1. Normalize.css protects valuable defaults

CSS reset forces the elements to look the same by imposing default styles on almost all elements. By contrast, normailze.css maintains a lot of annoying browser styles. This means you don’t have to restyle all common typographic elements. When an element has different default values in different browsers, normalize.css strives to keep these styles consistent and as close to modern standards as possible.

2. Normalize.css fixes browser bugs

It fixes common desktop and mobile browser bugs. This is often beyond what reset can do. In this regard, normalize.css fixes include display Settings for HTML5 elements, font-size issues with pre-formatted text, SVG overflow in IE9, and many forms-related bugs in various browsers and operating systems.

3. Normalize.css does not have a large style inheritance chain

One of the most frustrating aspects of using reset CSS is the long inheritance chain in browser debugging tools. Normalize.css does not have this problem because in our guidelines we are very careful about using multiple selectors, we only style target elements on purpose.

4. Normalize. CSS is modular

The project has been broken up into related but independent parts, which makes it easy and clear to know which elements are set to specific values. So this allows you to selectively remove parts (such as form generalizations) that you will never use.

5. Normalize.css has detailed documentation

The code for normalize.css is based on detailed and comprehensive cross-browser research and testing. The code is detailed in this file and further explained in the Github Wiki. This means you can find out exactly what each line of code does, why it was written, the differences between browsers, and you can more easily conduct your own tests.

What is CSS Sprite? What are the advantages and disadvantages?

Splice multiple small ICONS he into a picture, adjust the background pattern to be displayed through background-position and element size.

advantages

  • Reduce HTTP requests, greatly improving page loading speed
  • Improve compression ratio, reduce image volume size, improve page loading speed
  • Easy to replace, just need to change the color or style on a picture can be achieved

disadvantages

  • Maintenance hassles, whether ICONS are merged or the entire image layout is rearranged when one or more ICONS are modified.

What are the ways to optimize and improve CSS performance?

Load performance

  • Create common style classes to reduce code size
  • usingCSS inheritanceTo reduce code size
  • Merge attributes to reduce code size
  • careful@importThe introduction ofCSS, recommended uselinkBecause the latter is loaded together when the page loads, the former is loaded after the page loads
  • Use opportunelyCSS sprite, reduce the size of the picture at the same timeHTTPrequest
  • CSS compression

Selector performance

CSS selectors are matched from right to left. When using descendant selectors, the browser iterates over all child elements to determine if they are specified, and so on

  • Reduce CSS nesting, preferably not more than three layers
  • Avoid wildcard rules, and use them with cautioncss reset, you can select normolize.css

Rendering performance

  • carefulCSS express
  • Careful use of high performance attributes: float, location
  • Minimize page rearrangement and redrawing:
  • Nullation rule
  • Attribute values for0, without unit (optimization)
  • Property value is a floating point number0. * *, can omit before the decimal point0(optimization)
  • Standardize various browser prefixes: those with browser prefixes come first. Standard attributes behind (optimized)

maintainability

  • willcssFiles are placed at the top of the page
  • Style and content separation: willcssCode defined to be independentcssIn the file

Description and optimization of redrawing and reflow

This section covers a lot of ground, so move on to backflow and redraw browsers and how they are optimized