Websites like Wine: CSS Techniques to make a site Better With Age

Some things in life get better with age: fine wine, cast-iron pans, Juliette Binoche. But websites don't usually fall into that category. I would provide examples from my portfolio, but fortunately they have all been lost. Trust me, don't try to find them. It doesn't need to be that way, though. I'm not going to tell you how to create designs that won't look dated five years from now, but with careful planning you can write code that will look even better in the future than it does today.

Do Your Research

Familiarize yourself with the W3C specs for HTML and CSS. Sure they may not be perfectly implemented (yes, I'm looking at you Internet Explorer) but it is a safe assumption that browsers will continue to support the specs more and more faithfully. In particular, you should be reading up on HTML5. Once you know how things should work you can start learning how the make them actually work. I will go through a few easy things you can add now that will work on one or more current browsers and will be supported by more browsers in the future. Note: For simplicity, I am listing compatibility with Safari, Firefox, and Opera. Generally if Safari supports something, Chrome will too.

HTML

The main thing you can do to future-proof your HTML is to learn HTML5 and start using it now. HTML5 includes a number of new structural elements that will make your code clearer and add semantic meaning. These include header, footer, section, nav, and article. You can find a complete list of differences between HTML 4.01 and HTML5 on the W3C site. However, since current browsers don't actually support HTML5 there are some tricks you need to know in order to trick them into displaying the new elements correctly. Adding display: block to the CSS declaration for the element will take care of the "good" browsers, including current versions of Safari, Firefox, and Chrome. For Internet Explorer we need to use a bit of JavaScript that creates (but doesn't actually place in the document) an element of the type we want to style. For some reason, this convinces IE to recognize that element as valid. For example, we could include the following inside a conditional comment—document.createElement('header');—and repeat it for each HTML5 element we want to be able to use. You can read more about this technique (and how to make the new elements work in Firefox 2) at HTML5 Doctor.

CSS

There are many exciting things happening with CSS right now. Webkit (Safari & Chrome) and Gecko (Firefox) are adding new properties from the CSS3 draft specification all the time. In many cases they namespace the properties in case the final spec is different than the draft they based their implementation on. For instance the border-radius property is represented by -webkit-border-radius in Safari and Chrome and -moz-border-radius in Firefox. For best forward-compatibility, you should list the available namespaced properties in your stylesheet and follow them with the actual property according to the current draft. So you might have a style declaration like: .box { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }. Redundant, yes, but this way as new versions of other browsers are released they will begin to see the effect as well. Here are a few of the most useful properties that you can start using now:

Shadows

CSS3 allows shadows to be generated behind both text and block-level elements. The text-shadow property is actually part of CSS2 and is widely supported now (Safari 3+, Firefox 3.1+, Opera 9.5+). You don't need the "-webkit" and "-moz" prefixes on the one: text-shadow alone will work in all supported browsers. I demonstrated some creative uses of css text-shadow in a previous blog post.

Box shadow uses identical syntax, but applies the shadow to the outline of the element. It is less widely supported (Safari 3+ and Firefox 3.5+) and requires the browser-specific prefixes. We used this in the pop-up author information boxes at the top of our blog posts; an ideal case in that the shadow adds some nice visual flair but isn't necessary for the design to work.

.item {
    text-shadow: 1px 1px 2px #222;
    -webkit-box-shadow: 3px 4px 8px #222;
    -moz-box-shadow: 3px 4px 8px #222;
    box-shadow: 3px 4px 8px #222;
    }

Border-Radius

We also used this one in the author-info popups. Border-radius adds the rounded corners that are so beloved by the Web 2.0 crowd. Safari 3.1+ and Firefox 3+ support border-radius, each with their prefixed versions.

.item {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

Background-Size

This one isn't being used much, partly because it won't degrade as well in non-supporting browsers and partly because it is currently only supported by Safari/Chrome and Opera. However the Firefox team recently announced that it will be included in version 3.6. You can use background-size to stretch or shrink a background image, either to a particular pixel size, or as a percentage of the element's dimensions (not the image's dimensions). You can also choose whether the image will be scaled proportionally or not.

.item {
    background-image: url(image.jpg);
    -webkit-background-size: 25% auto;
    -moz-background-size: 25% auto;
    -o-background-size: 25% auto;
    background-size: 25% auto;
    }

Note that we are also using the property with a "-o" prefix for Opera. If you decide to scale your background make sure it looks fine without the scaling, since Firefox won't support it until 2010 and IE support make take years.

Transitions

I showed how to use CSS transitions to make a cross-browser drop-down menu in my last blog post: Nicer Navigation with CSS Transitions.

Font-Face

There has been a lot of activity just recently on the subject of using non-web-safe fonts on the internet. Some people see hosted services like TypeKit and Kernest as the way forward with web typography. Others are waiting for the browser makers and type foundries to work out their differences and come up with a unified standard for font embedding. In the mean time, there are a few fonts out there with licenses that support direct embedding with the @font-face property. Using a special block in your stylesheet, you can load the font file and make it available in your font-family declarations.

@font-face {
    font-family: "Font Name";
    src: url(/fonts/font-file.otf) format('opentype');
    }
.item {
    font-family: "Font Name", Helvetica, Arial, sans-serif;
    }

As you would expect, this doesn't work in all browsers. Chrome has font linking disabled by default, but you can use the --enable-remote-fonts command-line switch to turn them on. Opera won't support @font-face until version 10. And Internet Explorer requires that the font files be in a format, EOT, that no other browser supports. Fortunately, Jon Tan has a nice write up on using conditional comments to make IE play nice with the other browsers.

More @font-face resources:

• Web Fonts — Where Are We
• Web fonts and standards
• Web Embedding Fonts Tool: Microsoft's utility for creating EOT files.

Final Note

As you can see, there are plenty of things to look forward to in front-end coding, and no reason not to start using them now. But since these are not yet finalized, always be sure to test in as many browsers as possible. And if you have a favorite upcoming element or property that we can start using now, please share it in the comments!