Yesterday I had the pleasure of sitting at the back of “Handcrafted CSS“, a workshop led by Dan Cederholm and Ethan Marcotte. The workshop was based on their recently published book of the same name, if you don’t own a copy definitely add it to your holiday shopping list.

As attendees leafed through the book during the breaks I realised how much of I have relied on and enjoyed learning about web design and development from books. Funnily enough Dan’s first book, “Web Standard Solutions“, released in 2004 was the the first book I ever bought on CSS. It turns out it was the first CSS book for many designers I know. It taught me a lot and is still very relevant.

It got me thinking about the most inspiring web related books I have on my shelf. Here in no particular order are my personal top five. Some of them have been updated and superseded but all remain great reference material.

• Web Standard Solutions by Dan Cederholm
• Transcending CSS by Andy Clarke
• The PHP Anthology by Harry Fuecks et al (1st edition no longer available)
• The Definitive Guide to Django by Adrian Holovaty and Jacob Kaplan-Moss
• DOM Scripting by Jeremey Keith

What are your favourites? Link up your must have’s in the comments, I have an Amazon voucher I need to spend and love a good read.

I recently came across a solution on CSSPlay for a JavaScript free lightbox that uses invalid markup. So, being a sucker for a challenge, I set myself the task of creating one with valid markup and I eventually succeeded.

Here’s one I made earlier. It works in FF, Safari, Chrome, IE6, IE7 and IE8 and this article will explain how…

Note: This article assumes you have a basic understanding of (X)HTML and CSS.

Step 1: Writing the Markup

<div id="container">
    <div id="header">
        <h1>A valid XHTML and CSS Lightbox (no JavaScript)</h1>
        <p><strong>by Jenna Smith</strong></p>
    </div>
    <div id="content">
        <h2>Click any of the links below to see it in action</h2>
        <p>Lorem ipsum dolor sit amet, consectetur <a href="#">about us</a> adipiscing elit.
        Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
        interdum ac ipsum. Nulla <a href="#">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
        justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
        augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>
    </div>
    <div id="footer">
    	<p>Copyright 2009 Jenna Smith</p>
    </div>
</div>

You will notice the markup is very simple at the moment and that we have two links leading nowhere. These links will eventually
trigger lightboxes, but before they do, we need to add the markup for said lightboxes after the container <div>:

<ul id="lightboxes">
    <li id="lightbox-about">
        <div class="box">
            <h3>About</h3>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <a href="#" class="close" title="close window">x</a>
        </div>
    </li>
    <li id="lightbox-more">
        <div class="box">
            <h3>More stuff</h3>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <a href="#" class="close" title="close window">x</a>
        </div>
    </li>
</ul>

This is by no means semantic but I chose this markup because it made managing the CSS a little simpler. I’d recommend leaving the markup as is for the purposes of following this tutorial, however, feel free to code this part as you wish as long as you use the same amount of elements and tweak the CSS where necessary.

Step 2: Making it Look Pretty

Add the following CSS to the <head> of your document (we will be doing CSS inline to simplify this tutorial):

html {
font-size: 75%;} 

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}

body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}

a {
color: #09F;}

h2 {
font-weight: normal;}

p {
margin: 0 0 1.6923em 0;}        

#container {
width: 100%;
height: 100%;}

#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}

#header,
#footer {
background-color: #eee;}

#header h1 {
margin: 0;}

#header p {
margin: 5px 0 0;}

#content {
background-color: #fff;}		

/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;}

#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}

#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}

#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}

#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}

#lightboxes a.close:hover {
background-color: #999;
color: #fff;}

This should all be relatively easy to understand, however I just want to go over a few areas and clarify why some elements have been given certain properties. Mainly the following lightbox styling:

#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}

The <li>s in my example are acting as the lightbox overlay that you see underneath the lightbox ‘box’ itself so I have given it an extremely large height of 9999px with the assumption that no one will have a resolution larger than that. The reason for not using a 100% height is because it causes a window resize bug… feel free to try it at the end of the tutorial to see what I mean and if you can come up with a better solution, please do share!

Next you will notice that I am using an RGBa background colour. If you are not sure what this is/does please read about RGBa on CSSTricks. Internet Explorer, as ever, doesn’t support RGBa so in order to get around this, we need to add some IE specific styling and markup. Place the following CSS in the <head> of your document:

<!--[if IE]>
<style type="text/css">
    #lightboxes .ie-bg {
    background: #000;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=75);}
</style>
<![endif]-->

Then add the following markup to the bottom of your lightboxes (before the closing </li> of each lightbox):

<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->

I’m sure someone will point out that this causes the ActiveX popup to appear in IE resulting in the non-JavaScript element of this tutorial being void however, this would still all work fine without the filter so that is purely aesthetics and not functionality.

Moving on…

Step 3: Positioning the Lightboxes

When previewing our progress you will have seen that the lightboxes currently sit below the content which isn’t much like lightbox behaviour. The lightboxes need to sit on top of our content so a few more CSS properties are required to achieve this. Append this next snippet to your #container styling:

position: absolute;
top: 0;
left: 0;

Now this is where things get a little confusing. Why did I add it to the #container and not the #lightboxes element? That’s because if I added it to the #lightboxes element it’s child elements would always be on top of our #container (no matter what) so we would never be able to click the links in the content again, even when the lightboxes are ‘closed’. Doing it this way enables us to position the #container between the #lightboxes child elements and you will see why this is necessary in the next step.

We also only ever want to see one lightbox at a time so adding overflow: hidden; to your #lightboxes styling will accomplish that. This works because the #lightboxes element was given a height of 100% in the CSS which will make it 100% height of your window. Therefore, it hides anything past the height of the window. However, Internet Explorer requires a little extra in order to achieve the same effect so make sure you add the following to your IE specific CSS within the conditional comment we added earlier:

#lightboxes {
position: relative;}

Step 4: Opening and Closing the Lightboxes

So we’ve got it looking good and everything is positioned in the right place but how do we open and close the lightboxes? Simples.

I’m sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be “pulled” into view as opposed to the window jumping down to that element. I used the same technique on my Auto-Scrolling Slideshow Tutorial which further demonstrates how powerful this technique can be.

So with that in mind I can change the href values of our content links to the ID values of the lightboxes and create a new #close element that our close buttons will link to. Your markup would then look as follows:

<div id="container">
    <div id="header">
        <h1>A valid XHTML and CSS Lightbox (no JavaScript)</h1>
        <p><strong>by Jenna Smith</strong></p>
    </div>
    <div id="content">
        <h2>Click any of the links below to see it in action</h2>
        <p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">about us</a> adipiscing elit.
        Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
        interdum ac ipsum. Nulla <a href="#lightbox-more">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
        justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
        augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>
    </div>
    <div id="footer">
    	<p>Copyright 2009 Jenna Smith</p>
    </div>
</div>

<ul id="lightboxes">
    <li id="close"></li>
    <li id="lightbox-about">
        <div class="box">
            <h3>About</h3>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <a href="#close" class="close" title="close window">x</a>
        </div>
        <!--[if IE]>
        <div class="ie-bg"></div>
        <![endif]-->
    </li>
    <li id="lightbox-more">
        <div class="box">
            <h3>More stuff</h3>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <a href="#close" class="close" title="close window">x</a>
        </div>
        <!--[if IE]>
        <div class="ie-bg"></div>
        <![endif]-->
    </li>
</ul>

You won’t be able to test this at the moment because the empty #close element is sitting on top of the #container disabling you from clicking anything. However, if you append ‘#lightbox-about’ to your URL you will notice the about lightbox appears and that changing it to ‘#close’ will bring the empty lightbox element back into view. Neat huh?

Now we need to remove the background colour from the #close element so that it looks as if nothing is there and position it behind the #container element so that we can click the #container links.

Remember I mentioned positioning the #container between the lightbox elements in the last step? Well this is why and it would not be possible if we had absolutely positioned the #lightboxes instead of the #container.

This next piece of CSS needs to be added to style the #close element as mentioned above:

#lightboxes #close {
background-color: transparent;
z-index: -1;}

Now you can open and close the lightboxes as expected!

How does that work? Well, if you do not set a z-index on an element then it will be layered depending on it’s position in the code. Therefore, the lightbox <li>s automatically appear above the container as they are further in the markup. However, by giving one of them a minus z-index I am forcing it behind any elements that precede it.

Step 5: Adding More Content to the Container

At the moment we haven’t got much content in our container so it all appears to be working fine. However, if you add pages and pages of content you will notice that we’re not quite finished. A scrollbar appears enabling you to scroll past the lightbox and it’s overlay. This is because the document is scrolling but the lightbox is only 100% height of the window, not the document. The #container is also 100% height of the window so a simple solution is to overflow the container so that it scrolls instead of the document by adding overflow: auto; to the #container element.

It will make more sense if you preview it in Internet Explorer where you will see two scroll bars. One for the #container and a disabled scrollbar for the document. This is easy to fix by adding the following CSS to your IE specific CSS:

html {
overflow-y: auto;}

…and we’re done.

Your document in it’s entirety should be similar to below:

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>XHML and CSS Lightbox</title>

    <style type="text/css">
    html {
    font-size: 75%;} 

    html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;}

    body {
    background-color: #f8f8f8;
    font-family: arial, helvetica, sans-serif;
    color: #777;
    text-align: center;
    font-size: 1.0833em;
    line-height: 1.6923em;}

    a {
    color: #09F;}

    h2 {
    font-weight: normal;}

    p {
    margin: 0 0 1.6923em 0;}        

    #container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;}

    #header,
    #content,
    #footer {
    text-align: left;
    width: 870px;
    margin: 0 auto;
    padding: 40px;}

    #header,
    #footer {
    background-color: #eee;}

    #header h1 {
    margin: 0;}

    #header p {
    margin: 5px 0 0;}

    #content {
    background-color: #fff;}		

    /* ---------------------------------------------------------- */
    /* LIGHTBOXES
    /* ---------------------------------------------------------- */
    #lightboxes {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: left;
    overflow: hidden;}

    #lightboxes li {
    width: 100%;
    height: 9999px;
    position: relative;
    background: rgba(0,0,0,.5);}

    #lightboxes .box {
    position: absolute;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50px;
    border: 10px solid #999;
    margin-left: -230px;
    background-color: #fff;
    padding: 20px;}

    #lightboxes h3 {
    font-weight: normal;
    font-size: 1.8461em;
    margin: 0 0 0.4583em 0;}

    #lightboxes a.close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #ddd;
    text-decoration: none;
    font-weight: bold;
    color: #999;
    font-size: 1.2em;}

    #lightboxes a.close:hover {
    background-color: #999;
    color: #fff;}

    #lightboxes #close {
    background-color: transparent;
    z-index: -1;}
    </style>

    <!--[if IE]>
    <style type="text/css">
    html {
    overflow-y: auto;}

    #lightboxes {
    position: relative;}

    #lightboxes .ie-bg {
    background: #000;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=75);}
    </style>
    <![endif]-->
</head>

<body>

<div id="container">
    <div id="header">
        <h1>A valid XHTML and CSS Lightbox (no JavaScript)</h1>
        <p><strong>by Jenna Smith</strong></p>
    </div>
    <div id="content">
        <h2>Click any of the links below to see it in action</h2>
        <p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">about us</a> adipiscing elit.
        Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
        interdum ac ipsum. Nulla <a href="#lightbox-more">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
        justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
        augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>

        <p>Proin sollicitudin <a href="#lightbox-more">more info</a>
        elementum sem id pulvinar. Nunc vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus
        aliquet lorem at mauris rutrum vitae molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod
        lobortis id sit amet orci. Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
        risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
        Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat
        in in tortor. Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.</p>

        <p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">about us</a> elit. Donec massa lorem,
        elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla
        ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo, justo eros molestie dolor,
        a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor, augue diam tempor lacus, sed
        hendrerit nulla ante quis justo. Aliquam eget tellus risus. Proin sollicitudin elementum sem id pulvinar. Nunc
        vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus aliquet lorem at mauris rutrum vitae
        molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod lobortis id sit amet orci. Duis eros
        nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non risus dignissim placerat et eu dolor.
        Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. Praesent bibendum sagittis elit, nec
        convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat in in tortor. Duis nec est at mi
        condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div id="footer">
    	<p>Copyright 2009 Jenna Smith</p>
    </div>
</div>

<ul id="lightboxes">
    <li id="close"></li>
    <li id="lightbox-about">
        <div class="box">
            <h3>About</h3>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <a href="#close" class="close" title="close window">x</a>
        </div>
        <!--[if IE]>
        <div class="ie-bg"></div>
        <![endif]-->
    </li>
    <li id="lightbox-more">
        <div class="box">
            <h3>More stuff</h3>
            <p>
                Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
                risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
                Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
            </p>
            <a href="#close" class="close" title="close window">x</a>
        </div>
        <!--[if IE]>
        <div class="ie-bg"></div>
        <![endif]-->
    </li>
</ul>

</body>
</html>

Conclusion

This was just a bit of fun and is unlikely to be used in any real-world applications but hopefully it’s been an interesting read and you never know, someone might have actually learnt something from it!

So what now? Well, it would be great to see if anyone can come up with a better solution! If you have one, please share.

Editor’s Note: Elliot will be doing a talk called “The Perfect Portfolio Site” on the FOWD Tour.

This is the second video in our two-part series focusing on how to design a killer portfolio site (feel free to check out Part One).

In Part Two you’ll learn …

1. How to ‘design in the browser’
2. How to take your design from Photoshop to HTML and CSS
3. How to integrate your design into a CMS like WordPress
4. How to structure your CSS files
5. How to enrich your design with CSS3
6. How to use ‘custom fields’ in WordPress to make powerful templates
7. How to use Webkit Transistions to add extra beauty to your site

30-Minute Screencast

You can also download the hi-res video if you have a Vimeo account.

There have been a ton of helpful and interesting tips posted to Tipster recently, so I thought we’d pull a few out for you all (and give the submitters a bit of well-deserved publicity).

Topics that we’re covering are: MySQL, CSS, JavaScript, PHP, JQuery, life hacks and server admin.

MySQL Geo Search

Here’s a MySQL statement to search for nearest objects to you in a database, ‘lat’ & ‘lng’ are fields in the ‘items’ table with the location of object and $latitude & $longitude are the users location. The distance field will be the calculated distance in Km between the user and the object:

SELECT *,(((acos(sin((".$latitude."*pi()/180)) * sin((`lat`*pi()/180))+cos((".$latitude."*pi()/180)) * cos((`lat`*pi()/180)) * cos(((".$longitude."- `lng`)*pi()/180))))*180/pi())*60*1.1515*1.609344) as distance FROM `items` ORDER BY distance;

By: Sam Machin
Vote on this tip

Transparent background images – PNG fix for IE6 – a few reminders

When using the MS filter (via The AlphaImageLoader) to fix PNG transparency for IE6 — in your CSS, remember to:

1. Set width and height for the element/s containing the transparent background image.
2. First set background to none — then apply filter for background image.
3. Apply ‘position: relative;’ to any contained links to ensure functionality

(Also, bear in mind that the background images can no longer be tiled or positioned via ‘background-position’).

By: Prisca
Vote on this tip

Address Longitude and Latitude in Google Maps

Google maps does not show the Longitude and Latitude of an address you search. To get this information, enter this piece of JavaScript into you browsers address bar and hit enter:

javascript:void(prompt('',gApplication.getMap().getCenter()));

A little window will then pop-up displaying the Longitude and Latitude for you. Bingo!

[Editor's note: If you add this to your bookmarks toolbar, it's even easier to use. Just click it whenever you're on Google Maps. Hat tip to Phil Balchin.]

By: Pete Roome
Vote on this tip

Custom Details in Code Hints – Zend Studio for Eclipse

Zend Studio is a brilliant platform for PHP development. In my view, well worth the cost. One of the best things about it now being built on Eclipse is the project-wide code hinting.

When you see the built-in code hints and highlight an option, you get loads of lovely details regarding the functions and classes that you are about to use… as you would expect from most modern IDEs. However, Zend Studio for Eclipse takes this further for your own classes and functions!

When you have written your classes and functions, start placing a multi-line comment just above the opening line, i.e. /**, hit Return and Studio will prompt you for data types and descriptions for your method variables.

This is invaluable in understanding those classes you wrote at 3:47am, 3.5 years ago and haven’t used since!

By: Simon Hamp
Vote on this tip

Use a Print Stylesheet

Print stylesheets allow you to change the style of your page when printing, without having to provide a separate “print version” of the markup.

You specify a print CSS by adding “media=’print’” as an attribute to the link tag.

<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

In the print CSS you should remove unnecessary elements such as sidebars, menus, background colours, presentational images, etc so as not to waste ink and paper on parts which don’t need to be printed. You can also change the font and size to make sure the text is clear on the printed page.

You can even add some CSS to show the URLs of links on the page, which wouldn’t normally be seen when printing.

a[href]:after { content: " (" attr(href) ") "; }

By: Rich Adams
Vote on this tip

Make your links easier to read

Instead of using { text-decoration: underline; } on your links (as browsers do by default) use:

{ border-bottom: 1px solid; }.

This makes your links easier to read, as there will be more space between the text and the line underneath, so the line will no longer cross through your ‘y’s and ‘g’s.

You can also then style your underline with all the usual border stylings, much more exciting than a plain underline :)

By: Laura Kalbag
Vote on this tip

Manual filmstrips in jQuery

Really simple manual photo film-strip in jQuery. Used to swap a large image on a page with that of a thumbnail elsewhere on the page, such as different photos of a product in an e-commerce store.


$(document).ready(function(){
imageSwapper(".thumbnails a");
});



function imageSwapper(link) {
$(link).click(function(){
$('#largeimage').attr('src', this.href);
return false;
});
};


Just link the thumbnails to their larger versions and pop them in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

By: Michael Peacock
Vote on this tip

Store user passwords as salted hashes

Just using a hash of the user password is not strong enough. If two users have the same password, they’ll have the same hash. Dictionary attacks are also still possible as the attacker can have a list of dictionary word hashes. Using a salted hash involves generating a random string of characters, which you then concatenate with the password before hashing. Two users with the same password will then have different hashes, and the stored hash will never just be a hash of a common word if the user chose a weak password. You then store the salt, and the hashed value in your database.

hash_to_store = sha1(salt + real_pass)

There are many different methods you could use too, such as concatenating the salt with a hash of the password and then hashing that, etc.

hash_to_store = sha1(sha1(real_pass) + ...

By: Rich Adams
Vote on this tip

CD/DVD stuck in Macbook

Having gotten a DVD stuck inside my Macbook the other day, i found the only way to force eject it was to hold down the trackpad button on reboot. DVD popped right out.

By: Pete Roome
Vote on this tip

Photo credit: flickr.com/photos/mance

Today, a talented web designer must be a modern-day MacGyver—that 80s TV action hero who could turn a rubber band and three tin cans into a serviceable aircraft. Turning the average site design mockup into a living, breathing slice of HTML and CSS is a comparably delicate miracle, which must be accomplished using whatever makeshift tools happen to be lying around in current browsers.

That’s exactly why so many professional designers still choose to use HTML tables for layout. How can we expect beginners to adopt CSS for layout when it takes someone with the resourcefulness (and snappy dress sense) of MacGyver to fully understand the techniques involved?

Thanks to the imminent release of Internet Explorer 8, CSS layout is about to become something anyone can learn to do—no chewing gum or makeshift explosives required.

HTML Tables Are a 90% Solution

HTML tables produce the grid-based layouts we want to achieve with relative ease, but the price is that users with screen readers and other technologies that rely on semantic markup have a hard time making sense of the page.

As standards-conscious designers, we have convinced ourselves that the benefits of semantically meaningful markup are worth the added hassle of using CSS for layout. Not everyone shares this conviction. Whenever I write about some new CSS layout technique, at least half the feedback I get boils down to “You’re kidding yourself if you think designers will use that instead of HTML tables.”

The reason this is such a contentious issue is that tables correspond so well to the way designers tend to think of pages: a semi-flexible grid that defines rectangular areas that make up the page. If you want three columns in a row, you just put three table cell tags inside a table row tag:

<table> <tbody> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> </tbody>
</table>

The premise of using CSS for layout is sound: replace the HTML tables with semantically meaningful markup, plus semantically invisible div’s where needed:

<div id="container"> <div> <div id="menu">column 1</div> <div id="content">column 2</div> <div id="sidebar">column 3</div> </div>
</div>

The problem is the CSS code required to lay out this new markup. CSS was not initially designed to support blocks arranged horizontally across the page; consequently, we have had to get creative with the tools at our disposal. Current best practice requires the designer to master subtle interactions like overlapping floats, negative margins, and other black magic to achieve a simple multi-column layout. You don’t so much describe the layout you want as gradually build up a combination of positioning constraints that almost miraculously result in the layout you’re after. You couldn’t come up with a more convoluted way of expressing page layout if you tried!

If CSS layout code were as easy to write as HTML tables, making the leap would be a no-brainer; designers would flock to CSS willingly. Instead, we must drag them kicking and screaming, because the tools that CSS provides are not suited to the layout tasks we want to accomplish.

What if CSS provided a set of tools that applied to practical layout tasks as obviously as HTML tables do?

Bring the Tables to CSS

CSS actually includes a feature that works just like HTML tables: CSS tables. Using the CSS display property, you can instruct the browser to format any HTML element as if it were a table. For visual display purposes the element behaves like a table, but the element retains its non-table semantics for screen readers and other tools that look at the HTML markup.

In short, CSS tables let you perform table-based layout without misusing HTML tables!

The CSS to lay out our collection of div’s above as a row of three table cells is very straightforward:
#container { display: table; border-collapse: collapse; table-layout: fixed;
}
#container > div { display: table-row;
}
#container > div > div { display: table-cell;
}

We can then set the widths of each of our columns, again with very straightforward code:

#menu { width: 200px;
}
#content { width: 66%;
}
#sidebar { width: 33%;
}
From this foundation, applying borders and backgrounds to these columns is trivial. Check out this sample page, and the screenshot below for a fully-rendered example. Now this is the kind of page layout code that designers can embrace with confidence!

Compared with HTML tables, CSS tables have only one notable weakness: CSS does not allow for table cells to span rows or columns the way they can in HTML tables (with the “rowspan” and “colspan” attributes). As it turns out, however, this is a relatively uncommon requirement for page layouts; and in the few cases where spans are required, there are ways to fake them with CSS tables.

Can You Start Now?

So, why isn’t everyone already using CSS tables for page layout? In an all-too-familiar twist, we have Internet Explorer to blame. CSS tables are supported in every major browser except Internet Explorer. However, the good news is that Internet Explorer 8 will have full support for CSS tables upon its release, setting the stage for CSS tables to become the preferred tool for page layout on the web!

The question you must ask yourself is, “When can I start making the switch?” The answer may depend on the type of site you work on.

If you work professionally on a mainstream website, chances are you will be expected to keep your site working on Internet Explorer 6 and 7 for some time to come. Since neither of these browsers support CSS tables, it may seem on the surface that you’re out of luck. In fact, CSS tables may still make your job easier.

Because CSS tables are so much easier to work with than previous CSS layout techniques, you may find it worthwhile to implement your design first using CSS tables, and then using older CSS techniques for IE6 and IE7. You can use conditional comments to insert your IE6/IE7 style sheet, while all other browsers will only get the table-based layout. This approach does mean you have to implement your layout twice, but it saves you the considerable headache of getting the older techniques from working both in Internet Explorer and in other browsers.

While you’re at it, you may find opportunities to simplify the layout slightly in the IE6/IE7 version of the site, and save yourself a lot of work. Something like not insisting that a column’s background color extend all the way to the bottom of the page can radically simplify the code, for example.

If you work on a site with a more technical audience, or owned by a more progressively-minded organization, you might have even more wiggle room. In this case, you should explore the possibility of providing a simplified page layout for IE6 and IE7.

If you find yourself having to defend this approach to a client, tell them how much of your time (and their money) will be saved by simplifying the layout a little in outdated browsers.

Even if you can’t justify working with CSS tables in your day job just yet, it’s worth finding excuses to use them where you can. When Internet Explorer 5.5 made CSS layout across browsers possible for the first time, Jeffrey Zeldman wrote To Hell With Bad Browsers, leading the call for designers to adopt CSS layout:

“For years, the goal of a Web that was accessible to all looked more like an opium dream than reality. Then, in the year 2000, Microsoft, Netscape, and Opera began delivering the goods. At last we can repay their efforts by using these standards in our sites. We encourage others to do the same.”

The response to this call to action was gradual, but effective. Initially, web designers began experimenting with CSS layout on their personal sites, before testing the waters with some of their riskier side projects. Major mainstream sites like ESPN began making the switch only a couple of years later.

With Internet Explorer 8 on the verge of release, the stage is set for another wave of change to sweep the Web, however gradually. Now is the time to ensure you’re on the leading edge, not paddling to catch up!

Everything You Know About CSS Is Wrong

Perhaps the most important benefit of CSS tables is that it finally makes page layout with CSS easy to learn. Finally, we can justifiably expect anyone designing a web site today to do it the right way, with a proper separation of content (HTML) and presentation (CSS).

In my just-released book, Everything You Know About CSS Is Wrong (available from Amazon: Everything You Know About CSS is Wrong!), Rachel Andrew of The Web Standards Project and I explore the realities of page layout with CSS tables, the new possibilities they open up, and how to work around limitations like the lack of row and column spans. A brisk read, it provides a valuable glimpse into the next evolution in CSS layout on the web.

In this article, I want to introduce you to a really powerful CSS3 pseudo selector called :target. Much like :hover, :target is invoked during certain interactions with the website. Specifically, when applied to a fragment identifier. On a page such as http://example.com/index.html#hello-world, the id=”hello-world” element is the target and any matching :target styles would be applied.

I am going to demonstrate two examples of when and how :target can be used. Hopefully, this introduction will get you thinking about some of simple ways :target can add benefit your customers.

Tabs in CSS

A well structured document is one that makes sense in the ordering of sections and topics. It works well when there is no CSS and no JavaScript. Tabbed systems make use of some sort of display tab which shows the current section, and in doing so hides the other sections. We’ve all seen a tabbed system before, and probably plenty of poor implementations as well. Sometimes when you click the tab, it calls a JavaScript function to populate the area below the tab. The downside is that when there is no JavaScript the data does not appear.

The ideal way to build a tab system is to have all your data in the HTML, then use JavaScript to hide the other tab panes and build the tabs themselves dynamically. That way if there is no JavaScript, it just defaults to a linear set of text blocks. This is progressive enhancement; build for the lowest common denominator and add more functionality and styling as you go — no one is left behind, not even googlebot.

Instead of using JavaScript to do this show/hide, it is possible to use CSS3 using the :target selector. Before you get too excited, it must be said that the :target selector is not supported in IE6 or IE7, so the practical uses for this are pretty slim. Instead this can be used for user chrome type objects which don’t effect functionality, but improve usability. You can add the :target info today, and when browsers implementations catch-up they get the bells and whistles auto-magically. It is important to not use :target for mission critical things, but there are plenty of other possibilities. As an example, I will show you how make a simple tab system based on Daniel Glazman’s example.

First we should create the basic un-styled HTML.

<h2 id="topic1"><a href="#content1">Topic 1</a></h2>
This is the text for topic 1. Hello World!
<h2 id="topic2"><a href="#content2">Topic 2</a></h2>
Different text for topic 2. Ah, foobar.

Without CSS or JavaScript this text is completely accessible and reads normally, it just makes the page longer. Tabs are a way to compact the information into a smaller space, so lets proceed to do this.

If we add some simple styles to the page, we can get the two headings to appear and act like tabs through positioning. The interesting part is the :target selector.

// set the default state first
p {
display: none;
}

// When the link is clicked, set the contents to display
p:target {
display: block;
}


When the fragment (#content1) is not part of the URL, the :target selector does not match the

element, so it is set the default view of display: none. This is a very simple way to create a tabbed system. You can view a working example and see for yourself.

The Yellow Fade Technique

There is a popular usability feature called the “Yellow Fade Technique”. This is used to direct the user’s attention back to a specific area subtly. For example, when you want to edit a piece of a page you may click edit which takes to a new page with form fields. When you press save you are returned to the original page where there is a brief yellow fade of the area that was just edited. It brings your eye to the area, possibly to confirm the changes look correctly in the template, or to just make people aware the change took place at all. Either way, it seems to be a welcomed usability feature that has been picked-up by several web applications.

Normally, this is accomplished through the use of JavaScript and page IDs or classes. The JavaScript runs an onload function looking for those classes or ID and once the parts of the page have been identified, the script runs a timer and ever few microseconds change the background color from pure yellow to white. This create a smooth, not too annoying, yellow fade effect.

The downside to all this is that there are several resources at work, including onload functions (which might be happening every time the page loads, not just the times when a form is submitted) and hooks into the classes and IDs and JavaScript timers. All this adds to the client download and subtracts from the speed of the page.

With CSS3 there is a much easier and simpler solution. Using the :target pseudo class it is possible to emulate the yellow fade without a single line of JavaScript.

First, you need to create (or download) a tiny 1 pixel-wide yellow animated gif. This will fade from yellow to white. The animated gif isn’t repeating, so it will fade once and then stay pure white. This also defines the length of the fade, so there is no need to for a JavaScript timer.

Second, we need to set this as the background image for the area which has been changed. To do this, we use the CSS3 :target pseudo selector.

#here:target {
background-image: url('yellow-fade.gif');
}


This will fade the element with an id=”here”, the URL would look like http://example.com/#here. It is good web architecture to use fragment identifiers for each of your headings and to use RESTful URLs.

Now, the downside to that CSS statement is that it will only fade the area with the ID.


<h1 id="here">Hello World</h1>
I am saying Hello to everyone in the World!
Only the heading element would get the yellow fade. So how do we fix this? Well, we could change the ID to a class and create something like:
.here:target {
background-image: url('yellow-fade.gif');
}
But then on the server, we’d have to add classes dynamically to all our elements.

<h1 class="here">Hello World</h1>
I am saying Hello to everyone in the World!
We could put a wrapper around both the heading and the paragraph.

<div id="here">
<h1>Hello World</h1>
I am saying Hello to everyone in the World!
</div>

But that seems too much work. Instead, we can make use of another CSS combinator, the adjacent sibling selector:
#here:target, #here:target p {
background-image: url('yellow-fade.gif');
}
This targets both the heading with the ID ‘here’ and the first sibling paragraph. So both will get the background image and the subsequent fade. You can easily change your CSS to fit your HTML design, but this is a quick and simple alternative to the Yellow Fade technique in JavaScript used on so many sites.

In CSS there is also a wildcard * to stand for all nodes. So you could further take the example to
#here:target, #here:target * {
background-image: url('yellow-fade.gif');
}
This would match the first sibling of #here no matter what the type of element it might be. Firefox correctly supports this, but as of writing, Safari does not.

You can see an example of this in action and view the source to see how it all works.

Blurring the lines between behaviour and presentation

I am obligated by the behaviorists to mention that there is a debate over presentation and behavior, where does one stop and the other start? By adding the :target selector into your CSS, you are styling the HTML based on the behavior of the browser and the users. We talk about the “holy trinity” of web design, and we have spent the last few years campaigning to divide data, presentation and behavior into their respective HTML, CSS and JavaScript camps. The :target, as well as the :hover, selectors blur that line between presentation and behavior. Depending on how comfortable or how much of a purist you are, you may or may not agree with what has been demonstrated.

These examples were written to better understand the CSS3 :target element and to explore those blurry grey-areas. Hopefully, a discussion will emerge with even more ideas, caveats and problems that were not originally thought of. Together we can create some best practices on when to best use CSS behavior and JavaScript presentation.

Conclusion

Over a year ago, Andy Budd demonstrated the yellow-fade technique with :target and I was impressed! (http://www.andybudd.com/presentations/css3/) In the time in between, I have seen very little attention or articles on this little known selector. As I was started working on this article, I found several examples some from as early as January 2003 that talk about uses for the :target selector. The reason for not getting the traction it deserves could be the lack of information about when and how to use it correctly or documentation on the poor CSS3 implementations in browsers.

CSS3 is closer than you think, many of the selectors and attributes are available in several major browsers today. They can be used with progressive enhancement to add more style to your design at little cost, when other browsers catch-up they get the benefits of your progressive code for free. The CSS3 :target selector is just one example of some of the new selectors arriving that can be taken advantage of in interesting new ways.

Lately, I have taken interest in discussing methods of creating sexy stylesheets. While CSS can be used to create sexy websites, writing CSS can actually be an artform by itself. The way in which CSS is created, structured, and maintained can be a thing of beauty.

So how does one create sexy stylesheets? What characteristics would your stylesheets have?

A few months ago, I had the opportunity to present on this very topic at Web Visions 2007 conference in Portland, Oregon. In preparing my presentation, I surveyed twelve people who work in web design and development. The results of this survey, combined with my own work experiences helped me to compile a list of essentials to remember when creating stylesheets.

01. Keep CSS out of the markup.

Linking and/or importing stylesheets would seem to be a no-brainer to the intermediate or advanced CSS developer, but I want to stress why this is so important. I’ve seen many sites start out with clean, well-organized CSS files but then get littered as time goes by, with embedded or even inline styles (due to fast updates needed on short deadlines, or possibly sometimes even pure laziness).

Imagine that you are working on an extremely large-scale website with hundreds of ways content can appear. You have fast deadlines, so you opt for making “quick fixes” or updates by using embedded or inline CSS. Years go by, and this habit continues… Until one day you’re told the site is being completely redesigned (but all the content is to remain the same), and you only have a week to build it (including testing).

Normally, this would have been a fairly simple task of updating the stylesheet(s). Except you have years worth of “quick fixes” scattered throughout the site — and no way to remember where they all are. So now you have to either a) find a way to clean everything up and get everything styled for the redesign in one week (Good luck!), or b) find a new job.

Don’t make your job harder than it really has to be. Linking and/or importing your stylesheets is not optional. Create it clean, keep it clean, and you’ll be much happier.

NOTE: Be careful of adding too many linked and/or imported stylesheets in your markup. If you’re tempted to create a new stylesheet every time you make an update or add new content, you’re not doing yourself any favors. Excessive linking and/or importing can make bug-fixing difficult, and make your styles harder to maintain. It is understandable to want separate stylesheets for different sections or components for larger websites (I’ll go more into that later). Just be careful that you don’t go overboard.

It is worth mentioning that linking too many stylesheets requires additional HTTP requests, which can add up, and potentially hinder performance. Also, Microsoft Internet Explorer 6 has a limit of 32 linked stylesheets.

02. Semantics is not just a buzz word.

You know I have to bring it up; semantics are your best friend. Beyond choosing the most appropriate, meaningful elements to describe your content, make sure also that you’re choosing semantic class and ID attribute values. Besides being the “right thing to do,” it really does make your life easier (and it makes the lives of your fellow team members easier too– if you working as part of a team). Take a look at the following rule:

.l13k { color: #369; }

If you were new to the job, and you saw that in the CSS file, are you going to know right away what that class is for? Most likely not. This class name could be an abbreviation for something, but there’s no real way you can tell right off the bat. Alternatively, maybe you put it there, so you know what it means, right? Today. But will you know what it means three years from now?

Now, let’s take a look at this rule:

.left-blue { color: #369; }

You might immediately know what purpose this class selector serves as you know exactly where the left-side blue module appears. So it would appear that this works. Until along comes that redesign you have to build in a week, as I mentioned earlier. In the redesign, this module is now to be positioned on the right, and colored red. The class attribute values no longer makes any sense, so now you have to either change all your attribute values, or leave it as it is (which could lead to mass confusion).

It is always best to refrain from using colors (either the color name or its hex value) or width/height dimensions in your class attribute values. You should also avoid any attribute values that are presentational (such as “box”).Presentational attributes defeat the purpose of separating presentation from content.

Finally, let’s look at this more appropriately named rule:

.product-description { color: #369; }

Here you can see that the rule styles product descriptions, no matter how many times your design changes. Clarity is a beautiful, beautiful thing.

03. Take advantage of commenting.

Commenting your CSS files can be a great deal of help to you and others during development if you use comments in creative and meaningful ways. At the most basic level comments provide little reminders why a certain rule is used. But you can use comments to really help improve organization and efficiency.

Reminders and notes

The common approach for commenting, leaving reminders and notes for yourself and other developers can help avoid confusion later. Keep these brief and simple. For example:

/* Turn off borders for linked images */
img { border: 0; }

Time stamp and signature

Some designers and developers also note the date and time that the CSS file was last updated, along with their name or initials. This information can provide a quick indicator of who to contact, as well as how up-to-date the file is.

/* Sushimonster Typography Styles
   Updated: Thu 10.18.07 @ 5:15 p.m.
   Author:     Jina Bolton
   ----------------------------------------------------*/

Depending on the project, this can be a good idea, particularly if you are working on a team. Keep in mind that some organizations require leaving this type of information out (some companies prefer to keep names and dates out of files), so it is best to find out if there is a mandate on this sort of thing.

Organization

It’s a good idea to use comments to indicate the different sections within a CSS file. For example, if all header styles are grouped together, you can use a comment to section these styles off from the next section’s styles:

/* HEADER
   ----------------------------------------------------*/

I’ll go more into this a little later, when discussing “Separating style types.”

Comment flagging

If you have your CSS file organized into sections as I described above, comment flagging can also be useful to make it easier using FIND to skip down or up to the parts of the file you want to see. You can use a character (such as an equal sign [=]), along with a keyword (typically the name of the section, such as “HEADER”) to provide “anchors” in your CSS file:

/* =HEADER
   ----------------------------------------------------*/

This is particularly useful in long and complex stylesheets. You can read more about this at Stop Design.

Reference

A less common, but nonetheless useful approach is to use comments as reference guide. One example of this might be to include a color guide as you can see in Steve Smith’s CSS file:

/* COLORS
   Body Background:       #2F2C22
   Main Text:             #B3A576
   Links:                 #9C6D25
   Dark Brown Border:     #222019
   Green Headline:        #958944
*/

You should place this guide at the top of your CSS file to help you remember what color values you use throughout your site. Another example is of an index-like approach. Here you can define different sections so that you can jump down to them (perhaps by using comment flagging). Here’s one example:

/* GENERIC
   HEADER
   SIDEBAR
   FORMS
   TABLES
   FOOTER
*/

/* =GENERIC
   ----------------------------------------------------*/

04. Know when to use conditional comments or hacks.

There are many articles regarding the problem with hacks, and why Conditional Comments are a better way to handle Internet Explorer issues. Then there are articles that say otherwise. While I agree that Conditional Comments can be a much better solution than littering your CSS file with hacks, only recently have I come to realize there are instances where they are actually not the most appropriate solution.

Imagine that you want to set a minimum height for an element. The IE6 developers did not implement min-height, so you know that you can use height, which will be treated the same way. Does it make sense to create a whole new stylesheet, and inject it by way of Conditional Comments in your markup, when all you need is this one rule? Would it make better sense to keep the min-height and height rules together, and opt for a small “hack” within the same CSS file? In this case, I would consider it less efficient to use Conditional Comments.

Another thing to consider: if you have multiple places that your styles are located, using multiple CSS files and Conditional Comments can make your debugging process more difficult. Also, if you need to alter something (perhaps the min-height value in the above-mentioned scenario), you have to open more than one file to make this change. In many cases, this may not be such a big deal for you, but imagine if you have something defined in your main CSS file, and then redefined in 3 different IE stylesheets. That could turn out to be a hassle later down the road, especially if another developer making the edit doesn’t realize that these overrides exist.

If you do use Conditional Comments, I recommend leaving a comment in your main stylesheet letting you or a fellow developer know that an IE-specific rule exists. That way when you have to edit a height or something of that nature, you know that you have more than one file to open.

As always, if you do use hack, remember that browser updates can change what works later down the road, and the hack you use now may not work later versions.

05. Organizing selectors and declarations

Always, always keep your CSS clean and organized. I prefer organizing my selectors by style groups:

• reset styles
• typography styles
• layout styles (header, content, footer, etc.)
• module or widget styles
• etc.

Then, within each of those groups, I organize selectors by DOM hierarchy (working down the page, from the outside in):

• any parent styles (containing elements, working outside-in)
• block-level element styles (paragraphs, lists, etc.)
• inline element styles (links, abbreviations, etc.)
• etc.

Then within those, I work by element types:

• paragraphs
• blockquotes
• addresses
• lists
• forms
• tables
• etc.

Finally, I prefer to organize my CSS declarations by style type:

• positioning (with coordinates) styles
• float/clear styles
• display/visibility styles
• spacing (margin, padding, border) styles
• dimensions (width, height) styles
• typography-related (line-height, color, etc.) styles
• miscellaneous (list-style, cursors, etc.) styles

Some people like to organize declarations alphabetically. It doesn’t make sense to me, but it might make perfect sense to you. Whichever method you choose, stick with it, and be consistent.

06. Creating a framework

When it comes to developing CSS, If you find yourself doing the same things repeatedly, it is a good idea to consider creating a library or framework. A framework can be made up of a group of stylesheets that act as a foundation for your site, and help speed up your development time. Typical stylesheets you may find in your framework might include:

• screen.css – A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
  • reset.css – A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
  • typography.css – A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
  • grid.css – A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
• print.css – A print CSS file would include your styles you want to be used when the page is printed.

One example of a framework is the Blueprint framework put together by Olav Bjørkøy (which based itself off of work developed by authors including Jeff Croft and Eric Meyer). Another popular framework can be found at the Yahoo! User Interface Library. Many developers do feel that these pre-built frameworks contain markup and CSS that are a bit “bloated” and also that they contain presentational class attribute names.

NOTE: As I was writing this article in its draft stages, Jeff Croft released the post What’s not to love about CSS frameworks?, in which he mentions in the comments he was told that people think I am strongly against frameworks. I’m not sure where this came from, but as I stated in my response, I am not against CSS frameworks, and am very much for them.

For the best results, I recommend that you create your own framework that works best for you or your organization.

07. Balance readability and optimization.

Styles in formatting vary from developer to developer. Some developers use formatting styles that offer great readability, and then optimize the files (removing comments, spaces, tabs, carriage returns, etc.) before pushing the file live. This is a great technique and one I would recommend (done carefully). However, if you are somehow in a situation where you can’t really go through those steps, try to find a style that balances readability and optimization. Steve Smith has a great suggestion that offers a little bit of both.

Also, consider using hyphens instead of underscores. Microformats use hyphens as a standard separator, and certain older browsers have a hard time with them. You can read more about this at Underscores in class and ID Names.

08. Master your text editor.

Just as an artist has proper tools they know well, it’s important for a designer/developer to know the tools they use well. For CSS, that would be the editor you are using.

There are many text editors to choose from: TextMate, Coda, BB Edit, TextPad, DreamWeaver, etc. I’m not here to tell you which one to pick; they all have their pros and cons, and the right editor for you is up for you to decide. However, once you have decided on a text editor, make sure you learn everything you can about it. Find out what the shortcuts are, and learn all the tips and tricks you can.

Mastering your text editor is the best way to speed up your development time, and help you be more much more efficient when creating sexy stylesheets.

09. Use version control.

Smoother maintainability is also an important part of creating sexy stylesheets. This is where version control can be your best friend. It’s not only helpful for teams, but it can be a lifesaver even for the sole designer/developer.

Some applications have built-in mechanisms for source control. DreamWeaver uses a check-in/check-out system (that can help make sure that a developer doesn’t edit a file that is already currently being edited), as well as synching capabilities (which lets you sync and merge your local files with your remote files, or vice versa). This can be very handy, but are somewhat limited.

Subversion (SVN) or Concurrent Versions System (CVS) are great tools to use for more robust management, with additional options, like being able to revert, view changes (which is extremely helpful for teams — you can track who added/edited/removed code and when they did it), and resolving conflicts. There’s a great article by Jonathan Snook, called “Hosted Subversion” you can read for more information on how to set this up quickly and easily.

10. Create and maintain a style guide.

While in some cases, a style guide is an author’s guide with grammar rules and writing standards, it can also be used to outline standards for design, development, and content. A style guide is a great way to have a reference manual that can clarify rules on typography, grid, color, image sizes, etc.

When creating a style guide, it is a great idea to provide reference for the markup and CSS. This reference can be used as a handbook for the development team and future developers. It can include defined layouts, in which you can list the different layouts that can be used, and provide the associated markup and styles.

Finally, you can also leave steps for quality assurance for developers, (such as checking validation and accessibility) to ensure the highest quality.

Conclusion

Being an expert in CSS is so much more than having advanced CSS skills (i.e.: fully understanding the cascade, the box model, and how browsers work). I encourage you to think about ways you can constantly and consistently improve maintainability and efficiency. Think beyond what is designed in the comp, even if that is all that you have been provided. Make the CSS intelligent and plan for the future. Overall elegance in workflow is essential to master.

Boy what a difference 18 months can make! In my last Vitamin article I was singing the praises of standards based email and encouraging the use of CSS in your email designs. While the browser market has continued to strive for better standards support, a major player in the email industry has unfortunately done the opposite.

With the release of Outlook 2007 earlier this year using the Word rendering engine instead of Internet Explorer, my recommendations just don’t make the cut any more. I’ve decided to revisit my original suggestions and bring them more in line with today’s baseline. I’ve also had a good look at the feedback and comments from the original post. Getting your email to look good is only one piece of the puzzle, so I’ve dedicated the second half of this article to recommendations on how you can improve the chances of your emails actually getting delivered.

Some things change, some stay the same

While the best way to code your email might have changed, a number of key email design fundamentals haven’t changed a bit. My original article focused on the importance of designing for images being turned off and making sure your design looks good in the preview pane. Not only are these notions still relevant, they’re more important than ever with more and more email clients using preview panes and blocking images by default.

In the last 18 months we’ve seen the new version of Hotmail, known as Windows Live Hotmail and the new Yahoo! Mail sport a preview pane layout that blocks images by default for unknown senders.

In terms of image blocking, it’s safe to assume that at least half of your recipients will receive your email without any visible images. Because of this, it’s still important to ask your recipients to add you to their contacts/safe senders list when they subscribe (and in each email subsequent email you send), which often results in your images being turned on by default.

On top of image blocking and preview panes, my other recommendations on essential content, the importance of testing and key things to avoid all still apply. If you haven’t done so already, make sure you check out these suggestions.

Learning to love inline CSS

You might ask why an update to only one particular email client might change my entire position on using CSS in email. That one’s easy. Outlook commands more than two thirds of the business email market. Admittedly, not everyone will have upgraded to the 2007 version so far, but many more will. Add the imperfections of Hotmail and Gmail to the mix and it becomes difficult to justify sending a garbled email to so many of your subscribers.

No need to throw the baby out with the bathwater though. CSS still has an important role to play, albeit in its non-semantic inline form — but it works. For example:

<p style=”font-family:Arial; font-weight:bold;
font-size:11px; color:#060;”>Look ma, no semantics!</p>

I know many of you probably cringe at the thought of this, but if you’re looking to get any kind of design consistency across the major email environments, it’s your best option. Not all CSS is supported though, you’re actually working with a limited subset. Here’s an outline of what CSS is and isn’t supported in 14 of the most popular email clients.

For a solid level of support in Outlook 2007 and Gmail, as well as other major clients, stick with inline CSS
for the following properties:

• background-color
• border
• color
• font-family
• font-size
• font-style
• font-variant
• font-weight
• letter-spacing
• line-height
• margin
• padding
• text-align
• text-decoration
• text-transform

Using tables for basic layout

If you’re looking to add columns or any kind of significant design element to your email, then unfortunately structural tables are the only way to go. Float and width are just too poorly supported at this stage to consider completely CSS-based layouts. Don’t get too ahead of yourself though, just because you can use tables doesn’t mean pixel perfect design will be easy.

Just like CSS, different email clients handle tables differently. When you start to add in a bit of cell padding and maybe nest a table or two, things can get ugly fast. Again, there are some basic table guidelines you can stick to so you can at least maintain your sanity.

1. Don’t go nesting crazy. As soon as you start nesting more than one table deep some email clients really start to choke, especially older clients like Lotus Notes. Even Outlook handles the padding in a nested table differently to that of the parent table.
2. Instead of specifying your table width in the <table> tag, specify the width of each cell in the <td> tag. You’ll find this gives you more consistency across the board.
3. Make sure you don’t mix cellpadding with padding via inline CSS. Some email clients really struggle with this, so stick to basic cellpadding and no CSS for the best results.

Here’s an example of some simple table code that will render most consistently across the major email clients. Notice the lack of width in the table tag and no CSS.

<table cellspacing="0"
cellpadding="10" border="0">
 <tr>
  <td width="120"></td>
  <td width="480"></td>
 </tr>
</table>

The takeaway from this really is to keep things simple, which I think is a good thing for email anyway. Avoid large images and complex layouts and instead focus on making your content readable no matter how your subscribers are viewing your email.

Looking ahead

While the current lack of standards support in the email world is discouraging, complaining about it isn’t going to get us anywhere. We need to start being vocal to email client developers and encourage them to embrace web standards when rendering HTML emails. It’s a big job, and that’s why we recently launched the Email Standards Project — a brand new initiative that will hopefully broaden the communication lines between designers and those responsible for how email clients render HTML email. Check it out and help spread the word if you think it’s an important issue.

Getting your emails delivered

Even though achieving consistency in how your emails are rendered is a challenge in itself, you’ve still got a long way to go before it actually arrives in your subscriber’s inbox. The world of email deliverability has changed a lot in recent years. Originally, content was king. As long as you weren’t blacklisted and your email content didn’t include lots of “spammy” words, then you had a good chance of getting delivered. Today however, ISP’s and spam filtering technology has got a whole lot smarter and more aggressive.

Who is sending the email is becoming more important than what the email says. ISPs are doing this by watching their customers reassign habits and use of the “Mark as spam” button, and then tying that back to the sending domain and IP address. If a subscriber is regularly opening your email then you should be in the clear, but if a decent number rarely open your email and mark it as spam then you might not make the inbox much longer. Known as your sender reputation, it’s the most important factor in getting your emails delivered today. Just like the real world, having a good reputation ensures trust, and if ISP’s don’t trust you, you’re in trouble.

This introduces a new challenge to anyone sending reasonable amounts of email. No longer is getting permission enough to assume your email will be delivered. If it’s not relevant and exactly what the subscriber asked for, you run the risk of them marking your email as spam. It’s a delicate but extremely democratic
system; your ability to deliver email truly is in your subscriber’s hands, so treat them with the respect they deserve.

Ensuring a good sender reputation

There are three major metrics most ISPs use when calculating your sender reputation, each of which are easy to maintain provided you use some common sense. These metrics are your spam complaint rate, the percentage of email you send to addresses that no longer exist, and finally the number of spam trap addresses you send to. Spam traps are generally email addresses created by ISPs and anti-spam companies to lure spam by never actually signing up to anything, but publishing them in spots where email harvesters will pick them up.

By following the simple guidelines below, you can ensure these three metrics never become an issue and
tarnish your sender reputation.

1. Get their permission — File this one under “so obvious it’s almost not worth mentioning”. Unless you have clear, explicit permission from everyone on your list then please don’t bother sending anything to them. There are no shades of grey here either — it’s like someone “sort of” being pregnant. If they don’t remember giving you their permission, they’ll mark your email as spam and shoot your sending reputation in the foot. This is also the only way to guarantee you won’t ever be sending to spam trap addresses.
2. Set expectations and stick to them – At the time of obtaining permission, whether it’s through a subscribe form on your site or someone giving you their details offline, be sure to tell them when they’ll be hearing from you and what they should expect to receive. If someone subscribes to your quarterly newsletter and you start sending to them weekly, you can expect spam complaints.
3. Be relevant and interesting — This one can be hard to get your head around because it seems so easy. Of course my emails are relevant and interesting! But are they really? Before you hit the send button, try and put yourself in your subscriber’s shoes and honestly ask yourself if it’s something you’d be interested in hearing about. It’s getting more and more common for subscribers to mark your email as spam even if they originally opted-in, purely because it wasn’t relevant enough.
4. Make it easy to leave — One particular mistake that I see quite a bit is making it hard for your subscriber’s to unsubscribe from your list. The mentality is that by hiding your unsubscribe link in a small font somewhere in the footer then maybe people won’t bother. Today, if a subscriber wants out and can’t immediately see the unsubscribe link, I guarantee the “Mark as Spam” button will be their next best choice. If anyone does click your unsubscribe link, don’t make them jump through hoops to get off your list either. A single-click is all it should take.
5. Process all bounces — Every time a mail server receives an email for an address that no longer exists or is temporarily unavailable, they’ll send you back what’s called a “bounce”. This is a simple email that often explains why the email couldn’t be delivered and comes in two distinct flavours. A “hard bounce”, which is a permanent error meaning that address is no longer in use, and a “soft bounce”, which is a temporary issue such as a full mailbox. The moment you get a hard bounce back, you should immediately remove that address from your list. While they are often temporary, I recommend keeping track of all soft bounces. As soon as an email address soft bounces 3 times, consider it permanent and remove them from your list. Your sender reputation will thank you for it.

Keeping track of spam complaints with ISP feedback loops

Because keeping your spam complaint rate low is so important, a number of the major ISPs have feedback loops set up where they’ll send you an email letting you know whenever anyone marks your email as spam. This is incredibly useful — you can immediately remove anyone who complains from your list, and you can also quickly gauge if your content is starting to become irrelevant. Here are some brief instructions on the major feedback loops you should register your sending IPs with if you’re taking care of email delivery in-house.

Most ISPs use the standard Abuse Feedback Reporting format when sending you these complaints, which often involves stripping any personal information about who made the original spam complaint. Because of this you’ll need to make sure you include some kind of identifier (like a subscriber ID) in the original email so you can confirm who made the complaint and remove them from your list.

Embracing email authentication

Email authentication is a set of important technologies that add a much needed accountability layer into the emails you send and can instantly improve your deliverability to many of the major ISPs. By setting up authentication for all of your sending domains, you can prove an email is coming from you and isn’t fraudulent. These days it’s becoming a must-have for anyone sending a decent amount of email.

Authentication works by adding some simple records in the DNS for each sending domain you use. For example, if you send email from news@abcwidgets.com, you’ll need to add your authentication records into the DNS for abcwidgets.com. Right now there are two main authentication systems that you should be using:

Keeping your own house in order

So, now that you’ve got a good sending reputation and are ensuring it remains under control by monitoring spam complaints, what else is left? Here’s a checklist of some of the more important finer points that you’ll also want to ensure is covered in your email infrastructure:

1. Reverse DNS — It’s crucial to ensure you have RDNS set up for every IP you deliver email from. RDNS involves a receiving mail server looking at the IP address your email is coming from and then checking to see if there is a registered domain associated with it. It’s a requirement for most receiving mail servers and whitelists, so don’t overlook it.
2. Valid mail headers — The information contained in your mail headers is crucial to a receiving mail server deciding if they will accept your email. Make sure you’ve got a valid return-path (where bounces are sent), the correct MIME-Version and encoding information, DomainKeys/DKIM signature and your IPs in the received lines have RDNS set up. I’d also recommend checking out the list-unsubscribe header currently supported by Windows Live Hotmail.
3. Throttling your delivery speeds — different ISPs have different maximum speeds you can send at. Once you start to exceed these speeds, they’ll consider you a spammer and start blocking you. Make sure you set a reasonable speed limit on the number of connections and messages you send per hour so you don’t tread on any ISPs toes. From experience most ISPs will allow a few hundred simultaneous connections and 25 or so messages per connection.
4. Stay off blacklists — While your sending reputation continues to become more important, you still need to make sure you don’t appear on any major blacklists. Even if you’re following all the guidelines I’ve mentioned above, a rare blacklisting can happen to the best of us. I recommend checking the free Spam Database Lookup provided by DNS Stuff as often as you can. You can also apply to be whitelisted by ISPs such as AOL and Yahoo.
5. Monitor all abuse accounts — By default some anti-spam systems (and people) will send any spam complaints to abuse@yourdomain.com. Make sure it’s set up and is actually going to someone responsible for your sending reputation. If a complaint is made, resolve it immediately. Don’t forget to register your abuse accounts with abuse.net.

As you’ve probably gathered, nothing about email marketing is a piece of cake. Whether it’s getting your email delivered or making sure it looks great once it arrives. If you’re using an Email Service Provider like my company Campaign Monitor to deliver your emails, all of the technical challenges I mentioned above will be covered for you automatically. Nevertheless, the technical side is only a small part of your email reputation — the crucial ingredients of permission and relevance are up to you. If you are responsible for delivering email from your own servers however, I hope that by sharing many of the lessons I learned the hard way over the last few years you can get your emails delivered, and keep your sanity in the process.

Somewhere in between presenting static information graphics and complex, interactive data dashboards there’s a need for a way to visualize moderately dynamic data on the web. Oftentimes the solutions you see implemented are clunky, for example, manually creating multiple frames of various data points and uploading them by hand. These methods scale poorly and try even the most patient.

Traditionally the task of combatting the challenge has fallen to Flash. To be sure, it is a fine choice. I am not here to rail against Flash and contend that absolutely all things on the web should be done with HTML, CSS, and JavaScript. Flash is tailor-made for creating dynamic web experiences. However, using Flash in some cases might be the technological equivalent of hitting a fly with a sledgehammer.

By using a standardized set of web technologies, it is possible to produce interesting data visualizations that degrade gracefully in the face of browser inferiority. Through careful semantic crafting of our XHTML containers, clever use of CSS, and a splash JavaScript, we can build data visualizations that enhance our message and communicate better to our users. As a frame for this technique, I have created a fake site for a university fundraising event. The data visualization we’re going to be working with here is a temperature gauge that will display progress towards a monetary goal. Go ahead and take a sneak peek at the final result.

Building the XHTML

As with most techniques, the foundational XHTML is the most important piece, enabling us to progressively enhance the visual presentation. The structure of our XHTML will be in three parts:

1. The container of the data visualization
2. The progress indicator to be animated
3. A textual representation of the data

The structure for this is alarmingly simple, so I won’t drag it out over multiple steps for you.

50%

It may seem as though we have an extra div element here. In many other CSS articles, authors go to great lengths to reduce the number of div elements needed to construct a page, oftentimes relying on readily-available block-level elements. While this methodology has great merit, I will always use an extra div instead of using a p when it comes to the visual composition of a key page element. More often than not my work is handed off to a different design/content team and I have no idea if they are going to realize the p tag has a purpose beyond simple content formatting. Using an extra div here protects the integrity of the visual structure moving forward.

Jiggering the CSS

The visualization component will be handled through a clever combination of background images and property manipulation. When I first started developing this technique my instinct was to use absolute positioning to slide the inner element in and out as necessary, essentially “filling” the container with the inner element and hiding the unnecessary parts.

This method worked fine when I was only working with simple blocks. As soon as I started working with non-square shapes it fell completely flat. The points between 0 and 100 never lined up correctly. Searching for a new solution, I struck on the idea to align the inner element with the edge of its parent and alter its width/height depending upon the value being displayed. By doing so we gradually reveal the background image of the inner element, allowing it to line up perfectly with the background element of its parent.

What we will do is create two images. The first image will represent the empty state of our visualization and the second will be the completely full state. The empty state will be applied as the background of the gauge element and the full state as the background of the progress indicator element. Technically speaking, I’m only going to create one image with both states in it. For more information on why I’ve chosen to do this, you can refer to CSS Sprites: Image Slicing’s Kiss of Death, an excellent article by David Shea. You can view the image here.

The CSS for the container is as follows:

.gauge{
	width: 77px;
	height: 442px;
	position:relative;
	background: #333 url(gauge.gif) top left no-repeat;
}

The CSS here is pretty trivial, but do notice that we specify a hex color value in the background property. This hex color increases the technique’s accessibility and will provide a solid reference color to those who have disabled images.

For the inner element:

.gauge .current-value {
	position:absolute;
	left: 0px;
	bottom: 0px;
	height: 50%;
	text-align:center;
	width: 100%;
	background: red url(gauge.gif) bottom right no-repeat;
}

Because this animation is vertical I have positioned the inner element at the bottom of the container and positioned the background element at the bottom of the inner element. This technique works just fine as a horizontal animation as well, with the primary difference being where the internal element is anchored to its parent. As before, we specify a color in the event that images are disabled in the user’s browser.

From here, the only property we care about is height. In our example it is set to 50%. The entire visualization hinges on this value being accurate. You may be tempted to scrape the value from the XHTML p element with JavaScript and set the height from there, but that alienates your users with JavaScript disabled. Therefore, your options are to set this dynamically with a backend script or update it by hand. Either way is exponentially favorable to creating 100 distinct images for the intermittent states.

The last step is to hide the textual value.

.gauge .current-value * {
	display:none;
}

Note: I am not here to get into a debate on the best way to hide text.

This step is optional, you may wish to leave the textual equivalent of your data displayed over the top of the visualization. I have chosen to hide it, but users who come along with CSS disabled will still be able to view the progress of the fundraiser.

At this point, you can stop. You have created a compelling visual representation that is highly reusable and degrades gracefully in the face of antiquated technology, all using skills already at your disposal. Take a look at the example page to see the results. However, if you want to add a finishing touch you can sprinkle in some JavaScript animation.

Working The JavaScript

Now that we have our gauge built, we will add an unobtrusive layer of JavaScript to animate the mercury of our gauge from zero to its current state. Those users who do not have JavaScript enabled will not see this, but those who do will be presented with a nice animation to complete the temperature gauge visualization.The first thing we will do is setup an object literal to contain our gauge animation. This will help us maintain scope and increase portability if we need to extend our JavaScript.

var gauge = {}

We are going to need to keep track of two things: the document node we’re animating and the height at which we will need to stop animating. We don’t know either of these things at the time of creation, so we’ll create variable place holders for now.

var gauge = {
	targetHeight : 0,
	progressMeter : new Object(),
}

My own preference when working with JavaScript object literals is to create an init() method to kick start whatever it is I will be using them for. In this case, init() will need to do three things:

1. Verify the user’s browser supports the Document Object Model (DOM) specific methods we will be using
2. Reset the value of the gauge to 0
3. Animate the gauge to its final value

As such, our init() method will look like:

init : function(){
		if(!document.getElementByID) return false;
		this.resetValue();
		this.animateGauge();
}

The first line checks to see if we can use document.getElementById and aborts if we cannot. This will exclude all browsers that do not support the standard DOM. The next two lines are for methods we have not written yet, which is something we will do now.

resetValue : function(){
		this.progressMeter = document.getElementById("campaign-progress-current");
		this.targetHeight = this.progressMeter.offsetHeight;
		this.progressMeter.style.height = "0px";
	}

This method grabs the node we wish to animate and stores it in the progressMeter variable we set above. It then grabs the current height of the node and saves it as the target height we will be animating to. Finally, it sets the height of the node to 0. Once we have done all of this, we are ready to animate the mercury to its current value.

animateGauge : function(){
		var currHeight = this.progressMeter.offsetHeight;
		if(currHeight == this.targetHeight){}
		else{
			var interval = Math.ceil((this.targetHeight - currHeight) / 10);
			this.progressMeter.style.height = currHeight   interval   "px";
			setTimeout("gauge.animateGauge()",30);
		}
	}

This function is where the magic happens. It first grabs the current height of the node and compares it to the target height and halts the animation if they are equal. If they are not equal, it runs a very simple formula to calculate an animation interval which is appended to the node’s current height. The formula we use creates a very simple illusion of easing, which is more natural to the eye than a simple linear animation. Once it’s done that, it waits 30 milliseconds and calls the animateGuage() again. This process, known as recursion, will repeat until the gauge has reached its target value. Now all we need to do is call the init() function once the window has loaded.

window.onload = function(){
		gauge.init();
	}

Note: I fully acknowledge that this is a very primitive onload function and should not be used in production. However, that debate is long and not appropriate to this article. Because I have used this technique you may notice some initial flickering.

Putting it all together, the final code looks like this:

window.onload = function(){
		gauge.init();
	}

var gauge = {

	targetHeight : 0,
	progressMeter : new Object(),

	init : function(){
		if(!document.getElementById) return false;
		this.resetValue();
		this.animateGauge();
	},

	resetValue : function(){
		this.progressMeter = document.getElementById("campaign-progress-current");
		this.targetHeight = this.progressMeter.offsetHeight;
		this.progressMeter.style.height = "0px";
	},

	animateGauge : function(){
		var currHeight = this.progressMeter.offsetHeight;

		if(currHeight == this.targetHeight){
		}

		else{
			var interval = Math.ceil((this.targetHeight - currHeight) / 10);
			this.progressMeter.style.height = currHeight   interval   "px";
			setTimeout("gauge.animateGauge()",30);
		}
	}
}

That’s it. Take a look at the final example to see this at work. This particular data visualization example is very simple, but it is easily extendable and limited only by your ability to create graphical representations of data. With slightly more complicated JavaScript, you can create very dynamic animations on top of this basic XHTML/CSS. As I stated in the introduction, this technique should probably not be used for large data visualization dashboards or situations requiring extensive animation. However, it is excellent at providing progressive enhancement for situations calling for low-to-moderate levels of data visualization.

Like this article? Digg it!

The cascade, inheritance, contextual selectors. As someone who has been using Cascading Style Sheets (CSS) in the real world for a while it’s sometimes easy to forget it can be tricky to get started. Beginning CSS Web Development, written by Simon Collison, aims to get you on the road to creating usable, compact, good looking, well structured, and easy to maintain websites.

Anyone familiar with Simon from his long running blog, collylogic.com (now found at colly.com), can expect the same easy reading tone and witty repartee. Colly’s long-running obsession with music proves useful too; with the obligatory case study and examples feeling more real world than in most web design books. Although on second thoughts a band featuring Keith Moon, Jimi Hendrix and Simon himself may be too good to be true…

The book progresses through using CSS to style all the basic HTML elements, concentrating on the sorts of things that real world designers get up to most of the time; there’s an entire chapter on lists for example. A few excepts stood out as particularly well placed; a good discussion of typography on the web with some practical alternatives to the oft used web safe fonts, details of the most common image formats and when to use them and a particularly clear explanation of the complexity of floats.

Coming from someone like Simon it should go without saying that the book is up to date. Fixed vs liquid vs elastic vs variable fixed width layouts, faux column and large footers, accessibility and even IE7 are all mentioned at some point. Links are provided where relevant to helpful sites which should help minimize the inevitable impact of print going out of date.

As well as practical examples the book provides a useful compendium of the state of the art when it comes to CSS; coding styles, Douglas Bowman’s flags, commenting, indenting, modular style sheets, ideas for organizing style sheets. This information is available online, but would require wading through scattered blog posts from the last several years or reading the css-discuss archives from end to end. In short if you’re just starting out then Beginning CSS Web Development will save you time.

The only problem I have with Beginning CSS Web Development stems from the title, specifically the CSS part. Web design and development is a multi-tiered discipline, and CSS often stands or falls on the strength of the underlying markup. The book assumes the reader has a good understanding of modern, semantic, markup practices and as such is not ideally suited for everyone. It also doesn’t provide that much material for the experienced designer or developer that they probably haven’t seen before.

In short the book is a sign of a maturing industry. It is ideally suited for use in teaching, either students or other professional developers, the joys of CSS. It probably won’t be your first web design book, and neither should it be your last but it will provide a constant companion and reference for those starting on the road to becoming the next web design rock star.

Book Name: Beginning Web Development
Publisher: Apress
Author: Simon Collison
URL: http://csswebdevelopment.com/
Price: $34.99 Save 30% on Beginning CSS Web Development at Amazon
Rating out of 5: 4