CSS for web mobile development best practices

I. CSS Overview

CSSStacked Style Sheets(CAscadingSTyleSHeets). Its main role isControls the style of page elementsIncluding layout, color, Font, font size, blank space, border, and attributes. The appearance of CSS makes the HTML content and styleSeparation, Greatly improving the work efficiency.

The latest standard isCss3The following sections describeBest practices.

Ii. Use an efficient CSS Selector

To createEfficientWeb applications, you need to know how the browser isRead your web pageAndRendering. When the browser reads your HTML document, it first performsSyntax analysisAnd thenFillTo oneDocument TreeAnd then from the CSS style sheetMatch the corresponding StyleTo each element. The browser reads the style sheetFrom right to left, That is, starting from the rightmost selector, and then moving to the left until the matching ends until the element ends. To make the matching process more efficientReduce the process of matching element styles. For example:

# Home{Color:Blue;}
 

We want the ID to be all the labels under home and use the blue font. However, this statementNot efficientThe browser first looks for each a tag and then checks whether its parent element contains the home id until the end of the document. The more efficient method isAvoid using a sub-Selector, UseClassAttribute:

 
. Home-anchor{Color:Blue;}
 

UseSpecific style rulesYou can reduce the matching time (but inMaintainabilityBetweenBalance Point). The possible format is:

 # Main-Navigation {} /*  ID (fastest)  */  Body. Home # page-wrap {}/*  ID  */  . Main-Navigation {} /*  Class  */  Ul Li A. Current {} /*  Class * ul {}/* tag  */  Ul Li {} /*  Tag  */ * {} /*  Universal (slowest)  */  # Content [Title = 'home']  /*  Universal  */ 

There are four types of selectors, of whichIDAndClassFaster than element selectors and wildcards:

# Chapter1{Text-align:Center;}. Chapter1{Font-weight:Bold;}H1{Font-family:Sans-serif;}*{Font-family:Arial;}
 

3. Declare the image size

To speed up page rendering, declareDimensionsIs a good way:

<IMGSRC= "Img/logo.png"Style= "Width: 100px; Height: 100px ;">
 

Because the browser downloads images separately, you can declare the size in advance.Confirm typographical layoutOtherwise, the image size information will not be known until the image download is complete, and the rendering process will obviously slow down.

Also, when declaring the image size, it should beActual Size. For example, if the actual size of an image is 50*50, but you want it to be smaller, declare the size as 20*20, then the process of adjusting the image size will consume CPU resources, memory resources, and so on, making rendering slower. Second, this will avoid downloadingNot RequiredThe mobile phone traffic isLimitedThis is also for the userResource Saving.

There are three ways to declare the image size (HTML, inline CSS, and external CSS ):

 <  IMG  ID  = "Logo" SRC  = "Logo.jpg"  ALT  = "Company logo"  Height  = "100"  Width  = "100"   />   <  IMG  ID  = "Logo"  SRC  = "Logo.jpg"  Style = "Width: 100px; Height: 100px ;"  >  # Logo {width: 100px; Height: 100px ;} 

4. Use the CSS Sprites)

CSS genieMultiple small imagesPut inA large imageTo reduce the number of HTTP requests. When used, the correspondingCropThis is often used in various websites. In a large image, it is easierUnified managementWhich is suitable for buttons and navigation icons.

 # Navcontainer Li { Background-Image : Url('spritebg.jpg ') ; /*  Single Image  */ } # Navcontainer ul Li: Nth-Child (1) { Background-Position : -130px-700px ; /*  Position = xpos ypos  */ } # Navcontainer ul Li: Nth-child (2) { Background-Position : -130px-718px ;} # Navcontainer { Width : 250px ;/*  Size  */  Height : 18px ;}

5. Enable hardware acceleration

If your application containsAnimationTo enable the hardware acceleration function.User Experience. By default, most browsers do not enable hardware acceleration. This feature is typically used by webgl components and 3D animations. However, if you want a specific element to use hardware acceleration, You can manually trigger:

 
...{-WebKit-Transform:<Transform function>;}
 

TransformThis attribute applies 2D or 3D conversions to an element. You can use this attribute for rotation, scaling, and other operations. For example:

IMG. rotate3d{-WebKit-Transition:-WebKit-transform 1 s Plugin-in-out;-WebKit-Transform:Rotate3d (0, 0, 1, 0deg);}IMG. rotate3d: hover{-WebKit-Transform:Rotate3d (0, 0, 1, 15deg);}
 

AboveCodeRotate the image at 15 degrees

However, enabling hardware acceleration does not accelerate the execution of other elements. It only accelerates the conversion of Animations (using GPU ). Finally, hardware resources are very valuable,NecessaryYou can use it only.