CSS for Web Mobile development Best practices--go

CSS for Web mobile development Best Practices

One. CSS Overview

CSS is a cascading style sheet (Cascading style sheets), which functions primarily to control the style of page elements , including layout, color, font, size, whitespace , borders, attributes, and so on. The appearance of CSS makes the content and style of HTML separate , which greatly improves the work efficiency.

The current standard is CSS3, and the following sections describe best practices to follow when using CSS.

Second, the use of efficient CSS selectors

To create an efficient Web application, you need to understand how the browser reads your Web page and renders it. When the browser reads your HTML document, it parses the HTML document first, then populates the corresponding element into a document tree , and then matches the corresponding style from the CSS style sheet into individual elements. The browser reading style sheet is right-to-left , starting with the rightmost selector (key selector), and then moving to the left until the end of the element is matched. To make the matching process more efficient, it is necessary to reduce the process of matching element styles . For example:

#home a {color:blue;}

We want the ID to be all a tag under home, using the blue font. However, this statement is not efficient , the browser will first look for each a tag, and then see if its parent element contains the ID of the home until the end of the document. The more efficient way is to avoid using sub-selectors , using the class attribute:

. home-anchor {color:blue;}

A specific style rule can be used to reduce the time to match (but to find a balance between maintainability ), the possible form is:

#main-navigation {   }      /* ID (fastest) */body.home #page-wrap {}/  * ID */.main-navigation {   } /      * Class */ul Li a.current {   }/       * class *ul {   }/                    * tag */ul li a {}/                * Tag */* {
   
                         */* UNIVERSAL (Slowest) */#content [title= ' home ']//     * Universal *
   

There are four types of selectors, where the ID and class are faster than element selectors and wildcard characters:

#chapter1 {text-align:center;}. Chapter1 {font-weight:bold;} h1 {Font-family:sans-serif;} * {font-family:arial;}

Third, the size of the declaration picture

　　To improve the speed of page rendering, it is a good idea to declare the size of the picture:

Because the browser is separate download each picture, declared the size can be pre- determined typesetting , or wait until the picture download is completed before you know the size of the picture information, rendering process is significantly slower.

Also, when declaring the size of a picture, it should be the actual size . For example: A picture actual size is 50*50, but you want it smaller, the size is declared as 20*20, then the process of resizing the picture will consume CPU resources, memory resources and so on, rendering speed slower. Second, this will also avoid downloading an unnecessary larger picture, mobile phone traffic is limited , which is also to save resources for users.

There are 3 ways to declare a picture size (HTML, inline CSS, and inline CSS):

  #logo {width:100px; height:100px;}

Iv. using CSS sprites (sprites)

　　CSS Sprites put multiple small images in a large picture , which reduces the number of HTTP requests. When used, the corresponding cutting , which is often used in the major sites. In a large picture, it is also easier to manage the image, which is very suitable for buttons, navigation icons and so on.

#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 a {    width:250px;/* Size */    height:18px;}

V. Enable hardware acceleration

　　If your app contains animations , you can enable hardware acceleration to improve the user experience . By default, most browsers are not hardware-accelerated, and the typical scenario for using this feature is WEBGL components, 3D animations, and so on. However, if you want a particular element to use hardware acceleration, you can trigger it manually:

... {    -webkit-transform: <transform function>;}

The Transform property applies 2D or 3D transformations to an element, which can be used to rotate, scale, and so on. For example:

Img.rotate3d {    -webkit-transition:-webkit-transform 1s ease-in-out;    -webkit-transform:rotate3d (0, 0, 1, 0deg);}       Img.rotate3d:hover {    -webkit-transform:rotate3d (0, 0, 1, 15deg);}

The above code rotates the image 15 degrees

But turning on hardware acceleration does not speed up the execution of other elements, it just accelerates the conversion of the animation (using the GPU). Finally, the hardware resources are very valuable, when necessary to consider the use of.

CSS for Web Mobile development Best practices--go