position: absolute - Design resources and inspiration.

Using CSS shorthands instead of the regular rules will help reduce the weight of your CSS files dramatically. Instead of writing bloated rules such as:

element {
  background-color: red;
  background-repeat: no-repeat;
  background-image: url(image.png);
}

we could use the following, which does exactly the same thing:

element {
  background: red url(image.png) no-repeat;
}

To make our life easier, Dustin Diaz has compiled a comprehensive CSS shorthand guide, explaining all the possibilities and highlighting some of the quirks and things you need to keep in mind.

Building an accessible website means finding a way to provide the content for all possible groups of visitors. There’s more to it than just using web standards like XHTML and CSS, though that is a good step in the direction.

High-contrast zoom layouts, such as this one (compare: regular layout), offer a good solution in providing information to visually impaired users. Accessibility expert and author Joe Clark has a useful collection of resources.

The more we rely on CSS to layout our websites, the more complex the CSS gets. The files get larger and the cascade gets more difficult to oversee. The lack of a good structural system can quickly lead to chaotic stylesheets, and can make it a real pain to debug when encountering strange browser behavior. Instead of fixing the problems at the root, we are often tempted to fork our CSS for different browsers, or to just add patch after patch, which can often break other things.

The need for a clean structure, for our own sake, is obvious. Over at the css-discuss wiki, there is now a collection of insightful articles concerning Maintainable CSS. Since it’s a wiki, you are free to extend the collection if you have links or information on the subject you deem worthwhile.

There’s a nice tutorial on creating a pure-CSS star rater with lists on Komodo Media. See the example here. It uses a rather clever trick with the background-repeat property to achieve the effect.

Everyone’s been blogging about it, but in case you missed it: a number of sessions from Web Essentials 2005 can be downloaded free of charge as PodCasts. This is great for the few of us who couldn’t make it to Sydney, Australia. ;) Among the speakers are CSS guru Eric Meyer, Tantek Çelik (the guy who developed the box model hack), standards evangelist Molly Holzschlag, Jeffrey Veen of Adaptive Path (the agency that coined the term AJAX) and a number of other high caliber names.

The Nemesis Project presents us with a very comprehensive guide on problems occurring when you float elements, and solutions to the problems.

“When using floats you occasionally run into a situation where one block drops down below the other one instead of sitting side-by-side as you anticipated. This is commonly referred to as a ‘float drop.’ This month Zoe Gillenwater will help you find a cure to float drops.”

Trenton Moss offers up his Top Ten CSS tricks to help you with your daily CSS work. I’ve been applying most of those myself for a while now, but it’s interesting to see others using similar techniques.

Pay close attention to rule no. 4, “IE and Width and Height Issues”, this is vital for every rock-solid CSS layout. Always make sure your site containers are scalable to a certain extent because

1. you will always have users that will need to zoom up the text
2. you will often have content that is larger than the container is intended for
3. if you are using a CMS and your client has access, you don’t know what he’s going to paste into those containers.

IE will expand a container according to its content’s size if needed, whereas all other modern browsers will just let the content run out of the box. Using the hack described will ensure both IE and the other browsers will scale the containers identically.

A new issue of A List Apart is out. In issue no. 204, we are presented with two articles on the subject of columns: Multi-Column Lists (I’ve been looking for something like this!) and the CSS3 Multi-Column Module.

About A List Apart:

“A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.” (about page)

Apparently Safari 2 (available on MacOS X Tiger) has a render bug when it comes to tiled PNGs with alpha transparency. Images show up much darker than they are supposed to. Jon Hicks has found a simple workaround to this problem: don’t use 1×1 pixel tiles. Use 2×2 instead!

This has to be one of the most comprehensive collections of relevant links on the subject of web development that I have seen until now: The Web Developer’s Handbook.

It covers most of the essential links on creativity, CSS, CMS, color tools, SEO, semantics, typography, usability, and much more. Definately worth a bookmark.