I read an excellent article highlighting how to create iPhone, Android and iPad–friendly versions of your website.

This is achieved with CSS3 media queries, either in your main stylesheet or using a seperate stylesheet.

The key point is that you can simply add the following code to the bottom of your main stylesheet:

@media only screen and (max-device-width: 480px) {
/* Add iPhone styles here */
}

Or you can refer to an external stylesheet below your main stylesheet as follows:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="http://www.example.com/css/mobile.css" />

Read the full article here: How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine

Using progressive enhancement techniques in web design is good practice—where new browsers can take advantage of improvements in HTML standards and new CSS capabilities.

Chris Coyier over at CSS-Tricks, has written an excellent article discussing a CSS3 progressive enhancement technique for rendering gradients, whilst retaining a fallback image-based option for non-compliant browsers. Read the post here.

I’m all in favour of improving page load times as you’ll see from other posts on Brightscape here, here and here. Therefore, I found this article of interest and felt it worthy of sharing with the community.

An extremely useful tool for finding redundant CSS selectors in your site builds.

The plugin integrates with the Firebug addon in Firefox making this a useful addition to Firebug’s impressive list of features.

Download the CSS Usage plugin.

As a website grows so does its stylesheet. The problem is, the opposite is not true.