Browser rendering optimization

Use efficient CSS selectors 

1. Avoid a universal key selector.

Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.

2. Make your rules as specific as possible.

Prefer class and ID selectors over tag selectors.

3. Remove redundant qualifiers.

These qualifiers are redundant:

·         ID selectors qualified by class and/or tag selectors

·         Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).

4. Avoid using descendant selectors, especially those that specify redundant ancestors.

For example, the rule body ul li a {...} specifies a redundant body selector, since all elements are descendants of the body tag.

5. Use class selectors instead of descendant selectors.

For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:

ul li {color: blue;}
ol li {color: red;}

You could encode the styles into two class names and use those in your rules; e.g:

.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.

6. Avoid the :hover pseudo-selector for non-link elements for IE clients.

If you use :hover on non-anchor elements, test the page in IE7 and IE8 to be sure your page is usable.   If you find that :hover is causing performance issues, consider conditionally using a JavaScript onmouseover event handler for IE clients.

In my next post I will explain the more techniques .. So stay tune....

Posted in: Browser Rendering Optimization,CSS optimization,optimization,Page load optimization