Now for the name…

With apologies to the people who make the cleanser and the detergent, legend has it that the original Ajax was the second most powerful of the Greek warriors at Troy. Even though he had some issues, his strength and skill in battle were second only to Achilles. In naming the technology Ajax, Jesse James Garrett gave the technology both Ajax’s strengths and issues… thus the name “AJAX”

Here are some reasons why AJAX is disruptive in the way people use the Web.

Why Ajax rocks

AJAX has two huge benefits:

1. Speed and invisibility makes for a very slick user experience.
2. The smaller server resources footprint helps server scalability.

I’ll explain these. If you post using AJAX, only the data (or parameters) that the server function requires is posted. In a login scenario, only the username and password strings (100 bytes maybe) are sent to the server and only a boolean value (1 byte) is returned. This means that only 101 bytes (excluding network handshaking traffic) is sent & received. If we were to create the same functionality using ASP.NET, all the state data is pushed to a server and the whole page is returned. Should the page use 20Kb of traffic, AJAX will save nearly 99.5% of this.

Further more, when using AJAX your web server and or db server (or whatever your config is) does not have to do any processing other than running the called function and returning the return value. No page load events, no xsl transform etc. This can have a huge impact in an enterprise environment.

When should I use it?

• On-the-Fly Form Data Validation
• Auto completion
• Master Details Operations
• Sophisticated UI Controls (widgets)
• Quick data store updates
• Real-time information feeds

When I shouldn’t

Simple forms.

Even though forms are the single biggest beneficiary of “Ajaxification,” a simple comment form, or submit order form, or other one-off rarely used form does not benefit from Ajax driven submission. Generally, if a form is not used much, or it’s critical to work properly, Ajax is not that helpful.

Search.

LiveSearch on blogs is more annoying than useful. There’s a reason that Google Suggest is staying in beta and not going on the front page of Google. Searching on Start.com or Live.com doesn’t allow use of the back button to see a previous search, or previous pages.

Basic navigation.

In general, driving basic site/application navigation using Ajax is an awful idea. Why would anyone want to spend time writing code to emulate the browser behavior when they could spend time making their application better? For basic navigating between documents, Javascript doesn’t help.

Replacing a large amount of text.

Ajax saves a complete refresh of the page, so small pieces of the page can be more dynamically updated. But if nearly everything on a page is changing, why not just request a new page from the server?

Display manipulation.

Even though it seems that Ajax is purely a UI technology, it’s not. It’s actually a data synchronization, manipulation and transfer technology. For maintainable and clean web applications, it’s a good idea not to have Ajax/Javascript manipulate the interface directly at all. Javascript can stay separate and simply manipulate the XHTML/HTML DOM, with CSS rules dictating how the UI displays that data. See this post for a simple example of using CSS instead of Javascript to control display.

Useless widgets.

Sliders, drag and drops, bouncies, mouse gestures, whatever. Mostly these widgets can be replaced with more intuitive controls, or eliminated altogether in favor of simplicity. In picking colors, maybe a slider widget is useful to pick the exact shade. But in picking a price point in a store, a slider to pick the price to the cent is just overkill.

Why Ajax sucks

Bookmarks

Using AJAX to asynchronously load bits of content into an existing page conflicts with the way we are used to navigate and create bookmarks in modern browsers. Because viewing some part of the page information no longer corresponds to a newly loaded page, the browser history and bookmarks will not be able to restore the exact page state.

History

Also, clicking the Back button in a browser might not have any effect, since the URL was unchanged (even if parts of the page were changed). To overcome these problems you must implement a way to save the current page state programatically so that it can be restored later on, when called from a bookmark or from the browser history.

Accessibility

The biggest concern with AJAX is accessibility. This is because not all browsers (especially older ones) have complete support for JavaScript or the XMLHttpRequest object. Some of the visitors do have browsers with the required features, but they choose or have to turn off JavaScript support. When you design the application you must make sure that a fail-safe solution exists for those users, so it can be accessed by anyone. Further more, the way to access and use the XMLHttpRequest object in Internet Explorer and other browsers is different, which leads to a fork in the code and the need to treat each case separately.

How it works…

Following are the essentials for working with AJAX:

HTML, CSS, XML, any server-side technology and JavaScript

Ajax Frameworks

1. Pure JavaScript libraries – provide core remote scripting.
2. Server-based AJAX libraries – generate the AJAX code from your server application.

Following are some of the most popular AJAX libraries:

• AjaxPro
• ASP.NET AJAX Extensions
• Direct Web Remoting (DWR)‏
• Google Web Toolkit (GWT)‏
• Dojo
• Prototype
• xAJAX

Who’s using Ajax

Rightly said, images speak louder than words…

Getting started…

Here are some handy references to get started…. NOW :

So start rockin…!!!And stay tuned for my next blog on the how to implement Ajax in the real world…

–Gautam

admin

Believe me, developing in Ruby language is as fantastic and intuitive as the title sounds. [:)] Jokes apart, if you are in to web development and RoR has not crossed your radar yet, I would like to take the liberty to aver that you are significantly out-of-date. Fortunately though, if you keep reading this blog, you will certainly get a glimpse of the revolution in web development that open source communities have brought.

What can Ruby and Rails do for an organization?

What can any language-framework pair do for an organization? If there are answers popping up in your mind, be kind enough to consider the same for Ruby on Rails. RoR can do all that in a much easier, faster and cost effective way. On the other hand if you don’t know the answers yet, here is a glimpse of what RoR can do:

·         Build customer centric small/medium websites

·         Deploy a web product with advanced (web 2.0 -ish) features in a very limited time.

·         Create automated testing frameworks

·         Legacy Application extension, integration and migration

Why only Ruby-on-rails?

This is what the open source community has to say:

·Productivity gains: exponential savings because of smaller teams, more productivity, improved time to market.

· Easy development, easy maintenance : Lesser lines of code (10 times less than Java) , makes development faster and maintenance easier

· Agility: Rails is Agile, no matter how confused you are on your business concept, rails will help you visualize. It adapts to your changing requirements quickly and easily.

· Free: Its free and open source, can’t talk more on cost effectiveness.

· Powerful: Its can be simply put as what you SEEK is what you get.

Not Convinced? Check out RoR comparison with PHP, Java technologies, Perl.

For the more technically demanding soul, here is how ruby on rails score over others:

· Support for Representational State Transfer (REST) architecture

· SOA-like integration with enterprise systems

· Convention over configuration framework simplifies data management

· Don’t Repeat Yourself or DRY model based on Ruby’s inherent ability to provide Domain specific languages

· MVC (model view controller) design pattern

· Built-in testing at every level

· Capistrano / ActiveRecord migration

· AJAX support in any framework; runs on any Unix open source platform

What has RoR done ?

Testimonials: Some live projects singing the success story for ruby on rails.

Ø Amazon.com: Yes! The same Amazon.com

Ø Basecamp: project management tool by 37 signals

Ø Bixee: An upcoming Indian job portal

Ø BharathRentals: India’s car rental service

Ø Dimewise: personal finance management

Ø HBO Asia: HBO’s Asian broadcast online

Ø Scribd: online document sharing and publishing

Ø Shopify: e-commerce

Ø simplifyMD: digital chart room for small hospitals

Ø Twitter: Online community and social networking

admin

Over the past decade the explosion of Social Networking sites like Facebook, MySpace and Twitter has drastically changed the way how people interact socially. Social sites are playing a key role in building social graphs, sharing information and fostering innovation. The spectrum of its usability has grown widely since its inception, from users just building profiles and making friends to businesses using it for branding & interacting with their consumers, recruitment firms to find potential employees, science communities for exchange of ideas, non-profits for spreading social good and by students & teachers as a communication tool.This growth in its usability is due the hundreds of millions of active users together spending billions of minutes everyday on these sites building profiles, making status updates, uploading photos and building social graphs making them information rich.

While these sites have built some of the best tools on the world wide web, the opening up of their product to developers via APIs in the past 3 years have spawned “developer ecosystems” that build applications over popular services like Twitter and Facebook that help a person do everything from network with travelers to play social online games. Given below is a brief of 3 Social Networking Developer Ecosystems that would help you to better understand your options.

1.    Facebook
Facebook launched the Facebook platform in May 2007 for application developers that provides a framework to develop applications that would render within facebook.com and interact with core Facebook features.  Simultaineously a markup language called the Facebook Markup Language(FBML) was also introduced that is used to give applications the Facebook “look and feel”  and hook into several Facebook integration points, including the profile, profile actions, Facebook canvas, News Feed and Mini-Feed.  Since then, tens of thousands of applications have been built on top of the Facebook platform. Later on, Facebook Query Language (FQL) was introduced that allows you to use a SQL-style interface to  query Facebook social data without using the API. While most platforms force developers to use iFrames if they want to embed javascript within the application, Facebook answered this question with the introduction of FBJS that allowed developers to manipulate markup on the fly, animation and AJAX making applications more dynamic. Today, Facebook has over 350,000+ applications that play a critical role in maximizing Facebook’s active user base. Being the most popular application on Facebook, “Farmville” currently has over 60 million monthly active users.

In late 2008, Facebook announced Facebook Connect that allows developers to let users login to their websites with their Facebook credentials. It even allows other Facebook features, like your friend list and friend invite features to be implemented on your website, which can in turn send data back to Facebook as News Feeds. With over 15K websites already utilizing Facebook Connect, it has now become a must have feature for every social website for 2 main reasons : (1) Users do not have to go through the process of registering on your website if they are a Facebook user, your website can directly pull info from the users Facebook profile and (2) Your web site gets tons of exposure on Facebook as the users actvities on your site get posted to his Facebook profile.

Facebook has even gone a step further in encouraging developers by introducing the fbFund where developers can submit their applications to qualify for investments to grow their venture.

2.    Twitter
Twitter is one of the best examples of an very Open API and has provided developers a opportunity to build a full-fledged business by using it. Within a short span of time this ecosystem has transformed into a mainstream phenomenon with the development of Twitter apps that do everything from managing your twitter profile to analyzing tweets for real world trends. The Twitter API is nothing but a simple service that provides RESTfull access to the Twitter database and activity streams. Twitter initially started of with the basic authentication by which developers send the users credentials in the header of the HTTP request. But this being insecure and difficult to track hence in early 2009 they integrated the OAuth pattern of integration into the REST API permitting users a seamless experience of login into a 3rd party website using their Twitter account.

Twitter lacks many features in its pursuit of for simplicity and this gives openings to developers to fill the holes. Currently around 80% of Twitter’s usage is via 3rd party apps. and the Twitter API has 10x the traffic of its website. Twitter does not have 300+ million active user but it has momentum, excitement and virility which can cause your application to go from zero to a million users in a matter of days or weeks. Twitter is fast growing and new features are getting added regularly, requiring your application to adapt to it at the same time. A major problem with the Twitter ecosystem is its stability, so you have to make sure that your application doesn’t break and throw heaps of code when the API is down.

3.    MySpace
MySpace first got into the platform party by teaming with Google and a number of other social networks against the Facebook platform and releasing OpenSocial in November 2007, which were a set of API’s that would make applications interoperable with any social network system that supports it. The patnership spearheaded an initiative to standardize and simplify the development of social applications. Later on in early 2008 MySpace  independently launched the MySpace Developer Platform(MDP) that supports the OpenSocial model to enhance the overall experience of users through the development of Social Applications.

MySpace has undertaken a recent expansion of their platform through the MySpaceID project. MySpaceID provides Developers the opportunity to access user identities within the context of third-party environments. The main components of the MySpace platform are pretty similar to that of Facebook, but since MySpace supports the OpenSocial model the same application can be ported to any other social network with just a few minor tweaks to the code. With just around 15k apps in the MySpace apps Gallery and just a few websites integrating with MySpaceID, the Facebook ecosytem emerges as the clear winner in this case.

No doubt that these 3 ecosystems are the best and most established but they aren’t the only ones. Networks like Bebo, Yahoo, Friendster and the recently launched Google Wave have opened up their set of API’s that would allow you to reach millions of users through your applications. All these platforms are fast-growing and frequently-changing for the good, so as a developer even though you have a lot of choice with the ecosystems, it is suggested that you pick one ecosystem that you are a big fan of and program for it as keeping pace with all the ecosystems would be a real challenging task.

- Royston Olivera

xoriant

Introduction

Cascading Style Sheet, usually used in its abbreviated form as CSS, is a style sheet language designed to enable the separation of a document’s content from the way it is intended to be presented. Introduced by the W3C consortium in 1996, CSS is used to describe the ‘look and feel’ of a document written in another markup language, such as XML or XHTML.

In this blog article, we shall go through the basics of CSS and see a few examples of how it is to be used. We shall also see some cross-browser techniques to make a piece of CSS code work in the same way on all the major browsers.

It is assumed that the reader knows HTML and how to create HTML pages.

What is CSS?

To understand CSS, we first need to understand the concept of a Style Sheet Language – a language used to describe the layout of structured documents. A bare-bones example of this requirement would be displaying a table on a Web page. In this case, the content of the table is distinct from its layout, meaning, the table can use any font, background color and design whilst conveying the same information.

A collection of such style-defining rules is known as a style sheet and a language which enables defining such rules for a particular application or purpose is known as a style sheet language.

Put another way, a style sheet allows a Website developer to define the content of the Web page in one file and the way that content is to be presented in another. Using a technique, these two files are ‘linked’ to generate the required output in the desired manner.

CSS is a powerful tool for a Website developer, allowing him to be consistent with the look and feel of his Web pages while giving him much more control over the layout and design than straight HTML ever did.

As mentioned in the preceding paragraphs, the styles take care of displaying the Web page and are defined in separate files. So if multiple styles are declared for an element, they will cascade into one and that is the reason these sheets are known as Cascading Style Sheets or CSS.

The cascading order of what style to be used when there is more than one specified for an HTML element depends on the following order, in increasing levels of priority:

1. Browser default: Look for the style element that is created; if it is not in the document, use the default rules in the browser.
2. External Style Sheet: Determine if any of the style rules are marked as important and apply those to the appropriate elements.
3. Internal Style sheet (declared inside the <head> tag): Any style rules in the document will have precedence over the default browser settings.
4. In-line style sheet (declared inside the HTML element – this has the highest priority): The more specific the style rule, the higher the precedence it will have.

So, an in-line style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag in an external style sheet or in a browser (a default value). Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.

The basics of CSS

The basic purpose of CSS is to allow the designer to define style declarations (formatting details such as fonts, element sizes, and colors), and to apply the defined styles to selected portions of HTML pages using selectors – references to an element or group of elements to which the style is applied.

Let’s understand it with the help of a simple example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
h1, h2
{
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1>
<p>. . . </p>
<h2>Second Title</h2>
<p>. . .</p>
<h2>Third Title</h2>
<p>. . .</p>
</body>
</html>

It can be seen from the sample code above that both the content as well as the style of the Web page are separately defined (although for ease of understanding, they have been shown in the same file). The font and font colors to be used for the page are defined in the <style> block, whereas the actual content, that is, the text of the page, is defined separately within the <body> block.

Different ways in which styles can be applied

Now let’s understand the different ways in which CSS can be applied to a Web page.

• In-line Styles

When the style rules are defined for an HTML element using the <style> attribute in the Web page itself, these are known as ‘in-line styles’. As mentioned above, these style rules have the highest priority. An example of inline styles is shown below:

<p style=”font-family: sans-serif; color: #3366CC;”>
Amazingly few discotheques provide jukeboxes.
</p>

With inline styles, there are some advantages such as:

1. The styles are available in the page source itself.
2. These rules will be applied as they have the highest priority.

But there are also some disadvantages such as:

1. No re-usability of rules: As the styles are specific to the element, you have to specify these styles for all the elements.
2. Code maintenance: Since the styles are going to be a part of the Web page, code maintenance is a problem.

• Embedded Styles

When the style rules are defined in the <head> tag of the page, they are known as embedded styles. An example of embedded styles is shown next.

<html>
<head>
<style type=”text/css”>
/* Style rules here*/
</style>
</head>
<!—rest of the html of the page –>
</html>

With embedded styles too there are certain advantages and disadvantages. The advantages are:

1. The styles are available in the page source itself.
2. The same style can be applied to multiple elements.

The disadvantages are:

1. No re-usability: Though the style rules are now part of the page instead of the element, if the same style rules have to be applied to a different page, then the same rules need to be defined for the other page too.
2. Code maintenance: Since each page is going to have rules, if a change is required to be made in the appearance of a particular element, then a change in all the pages where these style rules are defined will have to be made.
3. External style sheets: When the style rules are defined in a separate file and used in the Web pages by providing a ‘link’, these are known as external style sheets. These files are saved with the .css file extension.

An example of an external style sheet is shown next.

/* START: External style sheet file name – eg.css */
/* style rules go here */
/* END: External style sheet file name – eg.css */
To link this file to your Web page, we add the following line in the <head> tag of the page:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”eg.css” />
</head>
<!—rest of the html of the page –>
</html>

External style sheets are highly recommended for any application since they present an advantage of re-usability as well as ease in code maintenance. However, this does not mean that one should never use embedded or in-line styles in Web pages, but it is recommended to use them only where absolutely necessary.

Before moving on to see more about style definition, we will understand one more term from Web 2.0 – Semantic Markup covered in next part of the blog. Watch this space for more.

Amit Sheth– Sr. Technical Writer

Introduction

This is the second in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why it is used.

In this part, we shall see what Semantic Markup is, why it is recommended and what enhancements it brings for Web pages.

Basics of Semantic Markup

The closest literal meaning of the word ‘semantic’ is the word ‘meaning’. As applied to Web pages, the term ‘semantic markup’ means using the correct tag to accurately describe the type of content of a Web page.

Before CSS was introduced, designers had limited options to design and present the content of their Web pages, the most common way for which was to use table cells and font tags to create styles. This used to severely limit the presentation techniques for the content.

CSS was introduced to enable designers create a consistent technique to define the style information for Web documents.

Standard tags provided by CSS

• Heading tags

As we had seen in part 1 of this blog, CSS enables Web page designers to separate the content of a page from its presentation. This is done using tags.

Heading tags are the equivalent of the ‘Level 1 heading’ style in any popular word processing program. A majority of the Web pages usually start with a heading tag, followed by several subheading tags (followed by their content) arranged hierarchically.

Except for the Web page’s title (which appears in the browser’s title bar), using heading and subheading tags is highly recommended to organize the page content in a sequential and logical flow. Heading and subheading tags are usually indicated in the Web page’s HTML code as ‘h1’ (for the heading), ‘h2’ (for the section heading), ‘h3’ (for the section subheading) and so on. An example of using heading tags in a sample Web page is shown below.

Using heading tags

• Paragraph tags

Since the content of the page will usually be arranged in paragraphs, a tag is available for this purpose. This tag (<p>, </p>) enables the page designer to arrange the content in paragraphs. A code example followed by its output in a standard browser for the paragraph tag are shown next.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
h1, h2
{
font-family: sans-serif;
color: #3306FC;
}
</style>
</head>
<body>
<h1>A ‘heading 1’ heading, followed by its paragraph</h1>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

Using Paragraph tags

List tags, as the name suggests, can be used to create numbered or bulleted lists of items on a Web page. These are amongst the most underutilized tags, since the type and variety of options that they provide are almost limitless. Several options are also available for nesting of lists. This page provides several quick examples of the usage of list tags, with their types and categories.

• Table tags

Tables should preferably be used to display data present in a tabular format, such as in a spreadsheet. Table tags are probably used incorrectly the most, that is, they are used to tabularize data that would be better presented, perhaps as a list. Several good examples of the usage of table tags for the formatting of tables and their cells are presented in this link.

To summarize part two of this blog, we saw how CSS offers us several tools enabling us to display our Web page in the correct and intended manner, while letting us keep the HTML code maintainable.

In the third and concluding part, we shall see how to define style rules, and look at some cross-browser implementation issues.

Amit Sheth– Sr. Technical Writer

Introduction

This is the concluding part in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why it is used. In the second part, we saw what Semantic Markup is, how it has been built into CSS and what enhancements it brings for Web pages.

In this part, we shall see how style rules are defined and what kind of issues may arise in displaying the same Web page across different browsers.

Defining style rules

• Selectors

Every CSS style definition has three parts: a selector, a property and a value. The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon (:), and surrounded by curly braces as shown in the code sample below. Selectors can be grouped so that the same style rule can be applied to multiple elements. This selector needs to be separated by a comma to form a group.

h1, h2, h3, h4, h5, h6, p
{
color: green
}

• The class selector

Using a class selector, you can define different style rules for multiple elements. The class selector is defined as a selector name prefixed by a dot (.). You can apply multiple classes to elements which give you the flexibility to define more rules, displaying the page accordingly, as shown next.

.contentarea
{
width: 200px;
}
.content
{
margin: 0;
padding: 0;
color: #cccccc;
}

Applying the above classes,

<p class=”contentarea content”>
Some content here …
</p>
<p class=”content”>
Some content here …
</p>

• The id selector

You can define style rules to HTML elements with the id selector, which is defined as a hash (#). In the example below, the style rule will be applied to the element which has the id ‘someid’. With this, you can define different style rules for multiple elements. You can apply multiple classes to elements giving you the flexibility to define more rules and accordingly displaying the page, as shown below.

#someid
{
font-weight:bold;
}

Applying the above classes,

<p id=”someid”>
Some content here …
</p>

Note: As a rule, you can have only one element in a page with one id. Having multiple elements with the same id is not recommended and your scripts might not give you the desired output.

• Adding comments in CSS

To explain what you are doing in the style rules, you can insert comments in CSS, using the /* and */ tags.

#someid
{
/* The following rule will make the font bold on screen!!! */
font-weight:bold;
}

Next, we shall see some cross-browser issues that we need to handle during the coding of our Web page.

Cross-browser issues

The designer of a Web page can never know what browser the user may use to browse his Web page. This is aggravated by the fact that users now have several lighter and faster browsers to browse the Web. This makes your task as a Web developer more difficult as unfortunately all these browsers follow standards in their own way.

Nonetheless, as the developer, you have a few tools to make sure that your Web page loads correctly in the majority of browsers. One of them is testing your page on as many browsers as possible, at least on Microsoft Internet Explorer versions 6 and 7, and Firefox versions 2.x and 3.x.

You can also use tools such as conditional CSS linking, improving the compatibility of your page for the browser on which it will be viewed. To link CSS files conditionally in your Web page, you can use the following conditional statements in your code for Internet Explorer versions 6 and 7:

<!–[if IE 6]>
<link src=“ieg_6.css” type=“text/css” />
<! [endif]– >

<!–[if IE 7]>
<link src=“ieg_7.css” type=“text/css” />
<! [endif]– >

This will do the following while loading your page: If the user is using Microsoft Internet Explorer 6, then styles from ieg_6.css will be applied to the page while the other CSS file will be ignored.

On the other hand if the user is browsing using Internet Explorer 7, styles will be applied from ieg_7.css. This approach provides you the flexibility to maintain separate CSS files specific to Internet Explorer 6 and 7. We can have a common file in which all the common rules can be specified and in these specific files, we can override the rules for these specific browsers. The obvious advantage of using this method is improved code management since in case of a problem, we need not go through the entire hierarchy of code files for the site. We can straight away look into the specific file and apply the necessary fixes.

Further study and references

A lot of material on CSS is available on the Web; some of the links are mentioned below.

• Yahoo Developer Network: http://developer.yahoo.com/performance/rules.html
• CSS Filters from the now-defunct dithered.com: http://www.communis.co.uk/dithered/css_filters/index.html
• CSS Hack category on the CSS-Discuss Wiki: http://css-discuss.incutio.com/?page=CssHack
• W3Schools: http://w3schools.com

Amit Sheth– Sr. Technical Writer