Css Techniques for asp.net

Source : Microsoft Technet

Introduction

CSS – Cascading Style Sheets play a vital role in helping you achieve professional and pleasing user interfaces on the web, which makes the first impression long lasting. However, as with every other technique, CSS can also slow down your site if used in the wrong manner.

Look below for ten such techniques that allow you to fine tune your website.

1. CSS Optimizers

CSS Optimization does not refer to minimizing the size of the css file. It involves a systematic procedure of creating an syntactical, organized and clutter-free file. This can be achieved with the use of utilities that are available on the web that can compress and optimize the css files and reduce them to a considerable smaller size.

Applications like CssTidy and YUI Compressor not only compress the css files by removing the whitespace; they also do additional actions like creation of shorthand syntaxes, correct css properties and their errors.

There are quite a few online websites that help you to optimize your css files based on predefine rules. Do not hesitate to try them.

Below is a screenshot of the CSS validation service offered by W3C.

(Full Size Image)

Figure 1

2. Shorthand Notation in CSS?

The Shorthand notation in CSS saves a lot of effort and improves your code. Margin, padding, and font are primary candidates for shorthand notations. Note that there are many more. The following sample shows you how to create a shorthand property.

Old fashioned:

margin-top: 2px;

margin-right: 1px;

margin-bottom: 3px;

margin-left: 4px

Shorthand notation:

margin: 2px 1px 3px 4px (the order is – top, right, bottom, left)

The rule of writing shorthand notation is very simple. Look below for a simple example.

 

CSS notation	Top	Right	Bottom	Left
margin: 1px;	1px	1px	1px	1px
margin: 2px 3px;	2px	3px	2px	3px
margin: 2px 3px 4px;	2px	3px	4px	3px
margin: 1px 2px 3px 4px;	1px	2px	3px	4px

Note that if you do not specify any values for the property, the properties would retain their default values. The shorthand notation not only keeps our code clean, but makes the file size considerably less.

3. Use Conditional Comments

Some applications have browser specific style sheets. In such cases, load the css files conditionally. This applies very well to version-specific browsers too. The following line would load only if the browser is Internet Explorer 8.

 

  <!--[if IE 8]>
  	<link rel="stylesheet" type="text/css" href="ie8.css">
  <![endif]-->

 

4. Remove Extra Line Breaks

The extra line breaks added in CSS files add humongous size to the css file. So make sure you eliminate all those unnecessary extra line breaks. But ensure that you make it readable for you and others who may use the CSS file.

5. Use CSS Versus Images

Do not use images to display text. Instead use CSS attributes and apply style to them.

5. Profile CSS Using Browser Developer Tools

At this technological era, your browser is your first test tool for profiling the performance and style of your rendered ASP.NET pages.

Google's Chrome provides us with a richer profiling tool. It can be invoked by pressing "CTRL+ SHIFT + I". Select the "Audit" tab, and the audits. And click on the run button. You will be presented with some results. The results are impressive as they tell you what you need to do to improve performance of your page with precise details. This involves CSS findings too.

A snapshot of Google Chrome audit results is shown below:

(Full Size Image)

Figure 2

Use Background Colors Instead of Heavy Images

CSS lets you define lighter ways of applying simple, layered and gradient colors to your webpages. This can replace the traditional way of using rich background images and thus load your pages faster. If you have gradient strips then you can use the repeat property to style the entire element.

For e.g. The following image repeats and fills the div.

 

  div {
  	background-image: url(http:/mywebsite/myimages/image1.gif);
  	background-repeat: repeat-y; 
  }

 

If you are using Internet Explorer, you could use the Microsoft DXImage properties like the div below. Ensure that you specify the start and end color suitably.

<div style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"></div>?
 

 

7. Use Multi Class Elements to Achieve the Required Styles

You can apply more than one style to an element. All you have to do is separate the style elements with a space. This ensures that you do not create repeated css styles with minor differences to achieve the final style.

And note that the bottom most style overwrites the conflicting style properties and takes precedence.

 

  <div id="storyDiv" class="first second third"></div>

 

The above line shows that multi classes (first, second and third) are applied to the div element.

8. Use the Important Keyword to Apply Precedence

The !important word can be used to apply precedence even over the last specified CSS rule regardless of what appears after it.

 

   <div id="storyDiv" class="first second"></div>
   
    {
   .first : padding-bottom: 2.0px !important; 
   .second: padding-bottom:3.0px;
           }
 

 

In this case, the div will be applied with the "first" CSS rule.

9. Microsoft Visual Studio's CSS Style Manager , CSS Properties Window

Microsoft Visual Studio also provides support to view, edit and manage CSS files to a great extent. The versions above 9.0 provides us these features.

Some of the functionalities provided by Microsoft Visual Studio are outlined here:

 

• Indicates used CSS elements within a page with a circle.
• Rich tooltip to see the entire css rule when hovered.
• Quickly edit the CSS rules
• CSS Intellisense support

 

There are various sites on the web that already show you how to use these effectively. Your first stop should be the Scott Guthrie's blog. Refer to the references sections for such interesting URLs.

References

W3C CSS validator

Scott Gutherie's blog on VS Webdesigner and its CSS support

100 CSS Tools

Effective CSS Shorthand