Your location:Tech News>News>Script>Several useful CSS Tips (Summary)

Latest News

Several useful CSS Tips (Summary)




  Lazy today, not long-winded, share a few of you may not know CSS Tips.

  Order style

  CSS code:



  color: red;




  color: blue;


  HTML code:


  what colour is this



  what colour is this


  Remember this is a comparison of fire before the CSS exam, then there seems to be a lot of people got it wrong (30%)

  The answer you should know.

  CSS can do to enhance performance

  Descendant selectors

  What style selectors intermediate space is?Its name is - descendant selectors.

  div p {

  color: # 3388ff;

  font-size: 14px;


  Descendant selectors might be a waste of performance

  Or not depends on the volume of energy projects, but not recommended no sense descendant selectors.E.g:

  .div p {

  // .


  Why is it more consumption performance?

  Because the browser will first find all the p tags, and then look up class for the div element containing the.As a result, if the code has a lot of p labels, undoubtedly will do a lot of duplication of work.

  Mode can be reduced using HTML tags to define CSS, and replaced using specific class.

  The browser parses from right to left CSS selectors

  .content_box div pa {

  // .


  The browser will do the above example the following process steps:

  First, find the page all element

  Then found to be up

Elements of the package element

  Until then look up to .content_box elements

  We can see from the above steps, the right choice is the more unique, the browser parses CSS attributes the higher the efficiency.

  So be sure to replace the use of specific class to write CSS code.

  Avoid reflow risk

  We know that modify some CSS properties will lead to redraw the entire page layout (repaint) / rearrangement (reflow).

  repaint speed much faster than the reflow, it is more important to avoid reflow

  Causes repaint and reflow of

  Adding DOM elements, modify, delete (repaint, reflow)

  Just modify the DOM element font color (repaint, no need to adjust the layout)

  Applying a new style or modify any element affecting the appearance of the property (repaint, reflow)

  resize, page scrolling (repaint, reflow)

  Certain properties of the read element (repaint, reflow) (offsetTop / Left / Width / Height, getComputedStyle, scrollTop / Left / Width / Height, clientTop / Left / Width / Height, etc.)

  If you change these properties on a large number of elements, then calculate and update their position / size takes a long time.

  More consumption performance of CSS properties

  Some CSS properties will consume more energy than any other performance attributes that browser parses these properties need to spend more time.

  Such as: border-radius, box-shadow, filter,: nth-child, etc.

  Of course, we often use these properties, some can not be avoided.To make appropriate trade-offs.

  That''s all for this article, I want to be helpful to learn, I hope you will support script Home.

Recommend article

Relate article