Shortly after that article was published, someone else came along and published information about the Son of Suckerfish menus. Other concepts based on the Suckerfish menu came along as well. The major issue with all of those articles and examples, though, is that they seem to require fixed-width menus for some reason. If you don’t set your top-level menu items to be a fixed width, by default the dropdown menu items will either wrap onto multiple or will force the top-level item to expand to fit the dropdown menu.

What if you want your top-level menu items to be fluid-width (for instance, the width of the actual text in those items with a little padding on each side) rather than setting them all to a fixed width? What if, in addition, you wanted the dropdown menus to expand appropriately to the width of their children without expanding the width of the top-level parent item? With the concepts shown in most Suckerfish variations, it’s not really possible.

However, while doing some research into the subject the other day, I came across an interesting solution to the issue.

The idea came from a website called pmob and was linked from a SitePoint forum post on the subject. The demo can be found on pmob’s website, but I don’t see it linked anywhere from their home page.

From what I was able to ascertain, the important differences between the pmob demo and the Son of Suckerfish demo are:

1. Set the width of the #nav ul, #nav li and #nav a elements to “auto”
2. The position property for the #nav li elements should be set to “relative”
3. The white-space property for the #nav li li elements should be set to “nowrap” to keep the dropdown menu items from breaking onto multiple lines

In my case, I also chose to set the min-width property to 100% to ensure that my dropdown menus were at least as wide as my top-level menu items.

Below is the modified CSS, based on the Son of Suckerfish demo.

/* Original Son of Suckerfish Styles */
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li {
	float: left;
	width: 10em;
}
#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

/* Style Overrides for Fluid-width Dropdowns */
#nav a, #nav li, #nav li ul {
	width: auto;
}
#nav li {
	position: relative;
}
#nav li li {
	white-space: nowrap;
}
#nav li ul {
	min-width: 100%;
}

I did not modify the Son of Suckerfish HTML at all, so you can use that tutorial as the basis for the HTML elements. As with Suckerfish and Son of Suckerfish, this implementation can be purely CSS, depending on how far back you need to support Internet Explorer (older versions of IE did not support the :hover pseudo-class on any HTML elements other than anchors).

I’ve also uploaded a demo of my fluid-width Suckerfish menu for you to check out, download and pick apart. I hope this helps.

Accessibility Note: This should not be your only method of presenting your menus. Unfortunately, because the menus only appear when you hover over the parent list items these menus are inaccessible. List items are still incapable of receiving focus, so there is no way to keep the dropdown menus open with keyboard movements (unless you use javascript to do so). Therefore, this method of creating menus won’t work for users using anything but a mouse.

Related posts:

1. Creating Custom Menus in WordPress 3
2. Creating Accessible “Quick Link” Menus
3. Adding Custom Menus to Your WordPress 3 Theme

In this article, I’ll take a quick look at some under-used CSS2 features and examine whether or not they are supported in IE7.

Before and After Pseudo-Elements

CSS2 introduced the idea of the :before and :after pseudo-elements. Essentially, these pseudo-elements were created to allow you to insert non-semantic content into your pages with pure CSS. In some instances, people use these classes to insert images or bullets before or after HTML elements. In other cases, they’re used for things like adding quotes before and after your <blockquote> or <quote> elements. Some coders are even using these pseudo-classes to add indicators to their links, letting visitors know when a link leads to an external resource, a PDF file, etc.

Sadly, these two pseudo-elements are not supported by IE7, so there’s not much point in trying to use these widely.

First-___ Pseudo-Classes and Pseudo-Elements

Another cool feature (expanded quite a bit with CSS3) are the :first-child pseudo-class and the :first-line and :first-letter pseudo-elements.

The :first-child pseudo-class allows you to locate the first child element of a DOM element and style it differently than the rest of the same type of elements. Be aware that this pseudo-class only searches for the first child, not the first matching child. Therefore, if you were to use the following HTML, you could use body h1:first-child to find the <h1> element, but using p:first-child would have no effect, since the <p> element is not the first child of anything in the page.

<body>
<h1>Test Header One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus neque, porta aliquam congue scelerisque, tristique et risus. Etiam placerat scelerisque leo in hendrerit. In at risus sed purus malesuada vulputate. Nullam gravida magna malesuada nisi convallis eget egestas nulla iaculis. <q>Vivamus id nulla turpis.</q> Cras vitae ante a eros semper imperdiet. Aenean posuere eros eu felis convallis ultricies non at nibh. Fusce pharetra augue eu lorem feugiat accumsan. Proin odio nisl, interdum eget auctor sed, tristique et libero. Duis risus elit, viverra et facilisis id, euismod quis lectus. Praesent lobortis adipiscing mi, nec mollis diam cursus eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec varius, ante sed dapibus vehicula, mi ipsum ultrices ante, vel sodales dolor turpis et risus. Donec felis lectus, rhoncus quis suscipit sit amet, elementum vel ante. Maecenas nec rutrum risus. Maecenas interdum tristique massa, vel elementum nisl posuere ut. Donec quis lectus diam. Sed id tortor massa, nec eleifend sem.</p>
</body>

The :first-letter and :first-line pseudo-elements will search for the first character and the first full line of the DOM elements, respectively. For instance, if you were to use the HTML code above and use the CSS shown below, the first letter of the paragraph would be 50px and red, while the rest of the first full line would be blue.

p:first-letter { font-size: 50px; color: #f00; }
p:first-line { color: #00f; }

All three of these CSS properties are fully supported in Internet Explorer 7, so it’s probably safe to use them on your current websites. However, just as an FYI, if you use the :first-letter pseudo-element in conjunction with the :before pseudo-element mentioned above, any browser that supports the :before pseudo-element will include the content added by the :before pseudo-element (so, if you use text in the :before pseudo-element, the first letter of that text will be styled by :first-letter and :first-line elements; if you use an image for the content of your :before element, no styles will be applied at all).

Attribute Selectors

CSS2 also introduced the idea of finding DOM elements based on specific HTML/XML attributes. For instance, if you use the HTML tag <p rel="excerpt">, you can use the following CSS to style that paragraph.

p[rel] { color: #666; } /* will style all paragraph elements in which the "rel" attribute is specified */
p[rel="excerpt"] { color: #666; } /* will only style paragraph elements in which the "rel" attribute is specified and the value of that attribute is set to "excerpt" */

In addition to the two methods shown above, you can also precede the equal sign (=) with a tilde (~) to find a specific word within a space-separated list of words in the value of the specified attribute (contains) or you can precede the equal sign with a bar (|) to find any elements where the attribute value exactly equals the characters you specified or starts with those characters, followed immediately by a hyphen (-).

These can be helpful for things like styling excerpts differently than the rest of an article (though, the semantics of using the rel attribute versus using a CSS class is a debate for a different day), styling external links differently than internal links and more.

These CSS2 properties also appear to be fully supported in IE7, so it’s probably safe to use them, as well.

Child and Sibling Selectors

These are two of my favorite things introduced by CSS2. Using the child selector (a simple right angle bracket/greater than symbol), you can specify that you only want DOM elements that are direct descendants of the specified parent to use the style you define. For instance, if you create a nested set of HTML lists, interchanging unordered lists and ordered lists throughout, it can be difficult to style them properly without these child selectors. Take a look at the two CSS examples shown below and note the differences.

ul li { list-style: disc; }
ul ul li { list-style: circle; }
ol li { list-style: decimal; }

ul>li { list-style: disc; }
ul ul>li { list-style: circle; }
ol>li { list-style: decimal; }

The first two lines of CSS will probably not have the effect you’d expect. Let’s take a look at the example HTML:
<ul>
<li>Disc?
<ol>
<li>Decimal?
<ul>
<li>Circle?</li>
<li>Circle?</li>
<li>Circle?<ol>
<li>Decimal?</li>
<li>
Decimal?
<ol>
<li>Circle? Disc? Decimal?</li>
</ol>
</li>
</ol></li>
</ul>
</li>
<li>Decimal?
<ul>
<li>Circle?</li>
<li>Circle?</li>
<li>Circle?</li>
</ul>
</li>
</ol>
</li>
<li>Disc?
<ol>
<li>Decimal?</li>
<li>Decimal?</li>
</ol>
</li>
</ul>

Using the first block of CSS shown above, you would probably expect your first level of unordered list items to have a disc bullet and your second level of unordered list items to have a circle bullet; while you’d probably expect your first, second and third levels of ordered list items to use incrementing decimal numbers as bullets.

However, your second and third levels of ordered list items will actually have a circle bullet, because they are li elements inside of second-level ul elements (as specified by the ul ul li selector).

If you use the second block of CSS, though, you will get exactly what you expect. The child selector makes the CSS selectors more specific, causing them to only interact with the li items that are direct descendants of the ol or ul element specified.

The sibling selector is represented by a simple plus sign (+). This selector works similarly to the way the child selector works, but instead of selecting direct descendants, it selects direct siblings. For instance, if you were to create an HTML table, and you wanted to style the first column differently from the other columns, you could use the following CSS to do so.

td { background: #ff0; text-align: right; font-weight: bold; }
td+td { background: #f00; text-align: left; font-weight: normal; }

The CSS above will cause the first column of the table to have a yellow background with right-aligned, bold text. The rest of the columns in the table will have a red background with left-aligned normal-weight text.

These two selectors are fully supported in IE7, as well.

Conclusion

While there are still a handful of CSS2 items that aren’t implemented in IE7, most of them have been, and can be extremely useful for creating more specific and targeted CSS definitions. Therefore, I would say absolutely (with the exception of the :before and :after pseudo-elements, unfortunately) we can and should be using CSS2 within our websites.

Related posts:

1. CSS Selectors
2. Internet Explorer 9
3. CSS: Fluid-Width Dropdown Menus

So far, none of the modern browsers have agreed on which method to use to implement the gradients, so you will need to utilize a few different methods in order to get it to work in multiple browsers.

Chrome and Safari (and, as far as I know, all other modern Webkit-based browsers) currently utilize the proprietary method -webkit-gradient(), while Firefox uses the proprietary method -moz-[type]-gradient(). No versions of Internet Explorer (except possibly the IE9 platform preview) support CSS3 gradients, but IE does support a proprietary filter() method that is capable of implementing native gradients. Unfortunately, Opera still has no native support for gradients, but using a background color, you can allow your page to degrade gracefully in that browser.

Webkit Gradients

The -webkit-gradient() method accepts five arguments, in the following order:

1. Gradient type (linear or radial)
2. Gradient starting point (top left, top right, bottom left, bottom right, etc.) – I believe you can also use integers for the starting and ending points, but I’ve not tested this
3. Gradient ending point (top left, top right, bottom left, bottom right, etc.)
4. Gradient starting color
5. Gradient ending color

Therefore, to create a straight, vertical linear gradient that goes from black to white, you would use code like:

-webkit-gradient(linear, top left, bottom left, from(#000), to(#fff));

To create a straight, horizontal linear gradient that goes from black to white, you would use:

-webkit-gradient(linear, top left, top right, from(#000), to(#fff));

To create a diagonal linear gradient from black to white, you would use:

-webkit-gradient(linear, top left, bottom right, from(#000), to(#fff));

More information about Webkit gradients can be found on the Surfin’ Safari website.

Firefox Gradients

Firefox (and potentially other modern Mozilla-based browsers) use a slightly different method to generate CSS gradients. Instead of using a property within the method to determine what type of gradient to generate, you use different methods to create different types of gradients in Firefox. To create a linear gradient, you would use -moz-linear-gradient, and to create a radial gradient, you would use -moz-radial-gradient().

Firefox gradients are a little bit more flexible than Webkit gradients. With Mozilla, in addition to being able to indicate a starting and ending color, you can also indicate the angle at which you want the gradient created and you can specify stops within the gradient (rather than having a uniform gradient from one end to the other).

To create a vertical linear gradient from black to white within Mozilla, you would use some code similar to:

-moz-linear-gradient(top, #000, #fff)

To create a horizontal linear gradient from black to white, you would use:

-moz-linear-gradient(left, #000, #fff)

To create a diagonal linear gradient from black to white, you would use:

-moz-linear-gradient(left top, #000, #fff)

However, as mentioned above, you can also adjust the angle at which the gradient occurs. Therefore, if you wanted to skew the gradient at a 30 degree angle instead of a 90 degree angle, you could use something like:

-moz-linear-gradient(top 30deg, #000, #fff)

You can even add color stops to the gradient within Mozilla. More in-depth information about Mozilla gradients, including the color stops, can be found on the Mozilla Hacks website.

Internet Explorer Gradients

To implement gradients in Internet Explorer, you have to use the proprietary filter CSS property. To create a gradient within Internet Explorer, you would use code similar to:

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff000000', endColorstr='#ffffffff' )

The gradient method accepts the following parameters:

1. EndColor – I have never used this parameter before (I always use the EndColorStr parameter instead), but it appears that it accepts an integer value for the color, between 0 and 4294967295. It also appears that you can use a hexadecimal value (in ARGB format) for this parameter, but you need to prefix it with 0x to indicate that it is a hexadecimal value.
2. EndColorStr – Accepts a hexadecimal color string. You can also use an eight-character color value, with the opacity (from 00 to ff) as the first 2 characters, followed by the red value, green value and blue value, respectively. For instance, to create a gradient that ends with black at 50% opacity, you would use the color value #77000000
3. StartColor – See the notes about EndColor
4. StartColorStr – See the notes about EndColorStr
5. GradientType – Set to 0 for a vertical gradient, set to 1 for a horizontal gradient. Defaults to 0

You can find the official documentation on Internet Explorer gradients on the MSDN website.

Putting it All Together

To put all of this together and make your gradient work cross-browser, you would use some code similar to the following.
background: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
background-image: -moz-linear-gradient(left, #000, #fff);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff000000', endColorstr='#ffffffff' );
It is important to note that the Webkit and Mozilla implementations of the gradient() method actually generate images, so they will replace any background image you’ve already specified. To keep things simple, I usually use the background-image CSS property rather than just the background property. The Internet Explorer filter property is a completely separate CSS property, so it will not replace any others. Therefore, you may want to preface it with “background: transparent;” to ensure no other background colors or images interfere with the filter.

Therefore, if you want a fallback background color for Opera and other unsupported browsers, you will probably want to declare the background color first, then the Webkit and Mozilla gradient methods, then insert the filter property inside of IE conditional comments, preceded by the transparent background call.

All together, that might look more like:
<style>
background: #000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
background-image: -moz-linear-gradient(left, #000, #fff);
</style>
<!--[if IE]>
<style>
background: transparent;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff000000', endColorstr='#ffffffff' );
</style>
<![endif]-->

For more information about using cross-browser gradients, you can check out the WebDesignerWall.

Related posts:

1. Cross-Browser Semi-Transparent Backgrounds
2. CSS3 Will Include Rounded Corners
3. cross-browser add to favorites

The first reset stylesheet I heard of (and quite possibly the first reset stylesheet created) came from Eric Meyer. He has discussed the concept of reset stylesheets at length on his blog, and provided multiple examples of reset sheets.

My favorite place to go for reset styles, however, is the Yahoo! Developer Network. Yahoo! provides a really well-built reset stylesheet on its content delivery network (CDN), making it easy to implement and giving you a higher probability that the stylesheet has already been cached on the user’s computer than you would have if you hosted your own.

The Yahoo! reset stylesheet does a really good job of resetting the margins and padding for all elements to 0 and eliminating the default styles for lists and more. I highly recommend adding Yahoo!’s reset stylesheet to any new designs you are developing; allowing you to start basically from scratch when you begin adding your own style definitions.

After implementing the reset stylesheet, though, it’s very important to remember that all of the default styles have been reset, including some things that many of us tend to take for granted; such as <strong> and <em>, bullet styles for unordered lists, incrementing numbers for ordered lists, etc.

Related posts:

1. Firefox and HTML5
2. The Definitive Guide To Stylesheet Planning
3. Styling a Definition List Nicely

The article explains how to create a three-column layout with fixed-width side columns and a fluid center column. For this particular application, I modified it slightly to use a two-column layout, but I’ve since realized just how powerful and useful the techniques described in the article are.

You can use these techniques to create multi-column fluid layouts or multi-column fixed-width layouts. I haven’t tested to see how much extra work it would take to create four or more columns, but it works beautifully for two columns and three columns.

Why would you want to use these techniques for a fixed-width layout when you could simply use floats? You probably wouldn’t for a two-column layout, as you can just use float: left if you want a right sidebar or float: right if you want a left sidebar. However, for three-column layouts, floats will not allow you to place your content column above your sidebars in the source.

The techniques described in the article allow you to place your content column at the top of your source, then layer both sidebars below your content div within the source of your page. The CSS then pulls the various columns into the correct places.

Related posts:

1. CSS: Fluid-Width Dropdown Menus
2. Tables in HTML
3. How CSS is Implemented in E-mail Clients

In case you aren’t sure what a hanging indent is, it’s basically when the first line of a paragraph is flush with the left margin, but any subsequent lines in that paragraph are indented. Following is an example of a hanging indent:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas aliquam nisi, non euismod nisi ultricies non. Suspendisse potenti. Morbi suscipit ante sit amet diam egestas et molestie elit lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris metus arcu, scelerisque eu aliquet scelerisque, interdum faucibus odio.

To accomplish this, you simply need to combine the text-indent property, which indents the first line of a block-level HTML element, with the padding property. If you apply a negative text-indent to the paragraph, the first line will be indented (well, the opposite of indented, really) to the left rather than being indented to the right. Doing that will cause all of the subsequent lines to be flush with the left margin, while the first line will be shifted to the left of the margin.

Then, apply an equal, positive left padding to that paragraph. That will cause the first line to end up flush with the left margin again, and will push all subsequent lines that far in from the margin.

Your code might look something like the following.

<p style="text-indent: -2em; padding-left: 2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas aliquam nisi, non euismod nisi ultricies non. Suspendisse potenti. Morbi suscipit ante sit amet diam egestas et molestie elit lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris metus arcu, scelerisque eu aliquet scelerisque, interdum faucibus odio.</p>

That’s really all there is to it. I hope that comes in handy for you somewhere down the road.

Related posts:

1. Can We Even Use CSS2, Yet?
2. CSS Text

However, you can do some nice things with definition lists. This article will show two examples of how definition lists could be used on your site and how to style them nicely.

Navigation

One thing you can do with a definition list is create your navigation menu. For the most part, coders seem to rely heavily on unordered lists for navigation menus, but a definition list might make more sense. Think about a typical WordPress sidebar. It includes a header and a list of items that relate to that header. Doesn’t it make sense to think of the header as a definition and the list of items as the definitions for that term?

This makes even more sense when you have specific sets of navigation items. For instance, if you have a “quick links” menu, a task-based navigation menu (link titles that describe tasks or goals that will be accomplished by clicking the link) or an audience-based navigation menu (link titles that relate to the specific type of visitor being targeted by the content being linked).

For a sidebar, you would simply use some CSS to style the definition term (dt) the way a header would be styled and some different CSS to style the definition (dd). Using a definition list in this instance will produce much cleaner HTML than the nested unordered lists generally found in WordPress (though, to implement this in WordPress, you might actually have to modify some base functions in WP itself). In fact, if you want to hide the header altogether, you can do so more easily with a definition list than with an unordered list. Simply use CSS to set the “display” property of all dt items in the sidebar to “none.”

Your sidebar menu might look something like:

<div id="sidebar">
<dl>
<dt>Categories</dt>
<dd>Products</dd>
<dd>Services</dd>
<dd>News</dd>
</dl>
<dl style="border-bottom: 0;">
<dt>Archives</dt>
<dd>December 2009</dd>
<dd>November 2009</dd>
<dd>October 2009</dd>
<dd>Older</dd>
</dl>
</div>

and your CSS for that might look like:

#sidebar {
width: 200px;
background: #eee;
border: 1px solid #00f;
}
#sidebar dl {
margin: -1em 0 0 0;
padding: 0;
border-bottom: 1px solid #00f;
}
#sidebar dt {
font-size: 1.5em;
font-weight: bold;
margin: 0;
padding: 1em .25em .25em .25em;
}
#sidebar dd {
margin: 0;
padding: .5em 0 .5em 1em;
background: #e2e2e2;
border-top: 1px solid #0ee;
}

Timelines and Date Lists

Another practical use for definition lists would be to use one for a timeline or a list of items organized by date. For instance, going back to the WordPress example, you could use a definition list to display a list of posts according to the date on which they were published. The dates themselves would be represented as definition terms (dt) and the post titles and excerpts would be represented as definitions (dd). You could then apply some fancy styling to the dates and format the titles and excerpts however you choose.

When creating a timeline recently, I used a definition list and added some CSS to make it look rather nice. Following is an example of the code I used.

<dl>
<dt>1979</dt>
<dd>I was born</dd>
<dd>I was baptized</dd>
<dt>1981</dt>
<dd>I started preschool</dd>
<dt>1984</dt>
<dd>I started kindergarten</dd>
<dt>1996</dt>
<dd>I graduated high school</dd>
<dd>I started college</dd>
<dt>2002</dt>
<dd>I got married</dd>
<dt>2003</dt>
<dd>My daughter was born</dd>
</dl>

I then used CSS similar to the following to make the years really stand out and to make the milestones look like bullet items.

dl {
margin: 0;
padding: 0;
}
dt {
font-size: 1.5em;
font-family: serif;
font-weight: bold;
margin: .5em 0 0 0;
padding: 0;
}
dd {
display: list-item;
list-style: square;
list-style-image: url(bullet.gif);
margin: 0 0 0 2em;
padding: .5em;
}

These are some very quick, dirty, simple examples. With a little extra effort, I’m sure you could come up with something much nicer and better designed. Give it a shot the next time you’re working on a project.

Related posts:

1. Tables in HTML
2. Wii Tops List of Most Sought-After Gifts
3. Seesmic Desktop Adds Support for Twitter Lists

It’s a great idea, in theory, but it’s not always practical. CSS sprites are extremely useful when you are working with fixed-size (height or width) elements on your site. However, they can be extremely tricky to implement (and generally not worth the effort) when you’re dealing with items that have dynamic heights and widths.

When you are dealing with fixed widths or heights, though, CSS sprites can be fantastic, especially if you have a slower Web server or if a large number of your users have slower Internet connections.

The idea behind CSS sprites is to basically create a single image file that contains multiple icons or multiple background tiles. They are especially useful when implementing mouse over changes. For instance, let’s say you are using a background tile on your navigation menu. When users place their mouse pointers over an item in the navigation menu, you switch to a different background tile to change the appearance of the navigation item. The CSS might initially look something like:

#navitem {
height: 50px;
width: auto;
background: url(bg1.jpg) repeat-x;
}
#navitem:hover {
background: url(bg2.jpg) repeat-x;
}

bg1.jpg

bg2.jpg

The CSS above will automatically switch the background image from bg1.jpg to bg2.jpg when the user places the mouse pointer over the navigation item. Unfortunately, the first time you mouse over the navigation item, the browser needs to make another request of the Web server, and the user has to wait for the image to load.

However, if we implement a CSS sprite for the background change, there is no waiting when you mouse over the item. It immediately displays the new background image. The image does not need to reload, it simply moves. To implement it, you would create a new image that combines the two previous images. Since this particular item is a fixed height, we will stack them on top of each other vertically. If we were dealing with something that was a fixed width, instead, we would stack them horizontally.

Our new CSS will look something like:

#navitem {
height: 50px;
width: auto;
background: url(bg-sprite.jpg) repeat-x 0 0;
}
#navitem2 {
background-position: 0 -120px;
}

This CSS uses the same background image for the normal item and for the hover state. All we are doing is moving the background image.

For illustrative purposes, I have made all of the images I’ve used in this post 100px wide. However, in reality, when using a repeating gradient, you really only need it to be a single pixel wide.

The use of CSS sprites is also extremely useful when you are displaying icons on your Web site. However, you still need to keep in mind that those items need to be basically a fixed height or width (or, at the very least, a maximum height or width). For instance, on one of my Web sites, I use different icons to indicate what type of page or document is located at the end of each link (external links, e-mail links, Word documents, PDF files, etc.). Because the links can be any length (sometimes spanning up to two or three lines, other times using enlarged text, etc.), CSS sprites are not extremely useful for those circumstances.

However, if, instead, you are using icons for fairly consistently sized items, CSS sprites are great. You might even want to experiment with using CSS sprites for dynamic buttons, using a different button for the standard appearance, the hover appearance and the active appearance. Good luck, and let us know when you come across good examples of CSS sprite usage.

Related posts:

1. Reduce the Size of Your Javascript
2. PHP Date and Time Functions
3. Reduce the size of your CSS file with this new tool

Molly made it very clear throughout the session that she does not own a crystal ball, so she obviously can’t tell us exactly how or when the final CSS3 or HTML5 specs will be completed and approved. However, she did give us some insight into the elements that have already been implemented and the elements that are in the process of being implemented in specific browsers. In this article, I will try to give a quick overview of some of the things she mentioned. Most likely, you’ve heard of most, if not all of these. However, I just wanted to put some of them together in one place.

Another thing Molly repeated is that “implementation trumps specification.” In other words, even if the spec is not finalized until 2022 (which is the current estimated date for HTML5), that doesn’t mean we can’t start using the new features in the near future. All of the major browsers have already begun to implement some of the items proposed for HTML5, even Internet Explorer 8. However, due to the huge marketshare still held by IE6 and 7, it wouldn’t be a good idea to begin implementing too many of these features on a large production site.

HTML5

• Aside, section and article – These three elements are basically new implementations of the div.
  • The aside is intended to be a call-out, sidebar or aside from the topic-at-hand.
  • The section element is intended to break a page into multiple areas. For instance, if you happen to have two or three separate topics all included on a single page, you might want to place each topic in a separate “section.”
  • The article element will be helpful to separate different articles or summaries on a page. This will be extremely helpful for things like blogs, where multiple summaries or excerpts are all posted together on a page. Rather than using a specific class to separate the articles or posts, you will be able to simply use the article tag.
• Audio and Video – A lot of work is being done (particularly with Theora) to secure the appropriate licensing to implement OGG codecs within the browser software, making it possible to embed audio and video files in a page without requiring external plug-ins. You will do so with the audio and video tags.
• Figures – HTML5 also proposes implementing the legend tag with images, audio and video (by wrapping them in the figure tag), allowing you to easily and consistently add captions to your media files.
• Dialog – The dialog element is a new, special type of definition list (dl) intended specifically for dialog between two (or more) people. The definition term (dt) is used for the speaker’s name, while the definition item (dd) is used for the quote itself.
• Header and footer – Just as they sound, the header and footer elements are intended to represent the header and footer of your pages. These are going to be instrumental in improving accessibility, implementing a consistent method of creating headers and footers.

Form Elements

A lot of new features are also being added to HTML forms. With the HTML5 implementation, you will be able to specify which form elements are required and which are not. The browser will perform the validation without the need for any script (client-side or server-side).

Quite a few new types of form inputs are also being added, including URL and e-mail. Presumably, the browser will also perform some sort of validation on these elements, though we did not discuss that in detail.

Page Features

HTML5 also implements quite a few new interactive features on the pages themselves. Drag and drop is already implemented in some browsers, as is the ability to edit content inline (though, to actually save the edits, you will have to use script). You will also be able to hint as to whether or not the browser should use spellchecking. HTML5 also implements a “canvas” to be used to draw elements on the page and adds support for SVG (scalable vector graphics) images (which, if you are not aware, can be displayed at any size without distortion, as they are vectors).

Molly also told us that Remy Sharp is in the process of developing a javascript implementation of the HTML5 spec, so you can begin using some of the HTML5 elements even in IE6 and 7.

CSS3

CSS3 is also going to introduce all kinds of nice new features, as well. Following are some of my favorites. You can check out previews of all of these features (as well as a list of many more) by visiting CSS3.info.

• Rounded corners – CSS3 implements a new property called border-radius that allows you to easily implement rounded corners on any bordered element.
• Text shadow – You will also be able to add a drop shadow to your text using CSS. This has been implemented in Opera 10, Chrome, Safari and Firefox 3.5. However, each browser renders it slightly differently, which might be very frustrating.
• Multiple backgrounds – CSS3 will allow you to add multiple background images to a single element. This should significantly reduce the amount of wrapper and container divs that are created simply to add an extra background.
• RGBA, HSL and HSLA – CSS3 implements three new methods for declaring an element’s color. They are RGBA (red, green, blue, alpha), which allows you to specify the color in RGB and specify its opacity; HSL, which allows you to specify your color in hue, saturation and lightness; and HSLA (hue, saturation, lightness, alpha), which allows you to specify an HSL color and its opacity.
• Attribute Selectors – You will be able to use a great deal of nice attribute selectors with CSS3, including being able to select specific child nodes of an element (including the ability to implement styles on every other child – particularly useful for alternating table rows), and being able to style your form elements more easily (for instance, you can assign a specific style to any form inputs with the new “required” attribute).
• Multi-column layout – This is a huge new addition. With CSS3, you will be able to specify a specific width of columns or a specific number of columns and have your content automatically overflow properly into the columns.

You can find more information about the new HTML5 proposals and implementations at HTML5 Doctor and more information about CSS3 at CSS3 Info.

Related posts:

1. What’s New With HTML5, CSS3 and JavaScript?
2. Free HTML5 Mobile Training From O’Reilly
3. Captions in HTML5

The chart displayed in the original blog post shows over 50 different CSS techniques and elements are evaluated for 11 different e-mail/Webmail clients. Apparently the PDF and Excel versions of the chart that are linked from the post include more than 23 different mail clients. Unfortunately, looking at the chart, it appears that the safest way to create an attractive e-mail message that looks the way you intend in multiple e-mail clients is to code with tables and inline styles.

Related posts:

1. E-mail Client Survey – What Are People Using?
2. Google Hosted Apps and Sending Mail From a Web Server
3. Yahoo! Updates Mail Terms and Conditions