Relative URIs within CSS

We made an important discovery today which will help us simplify the maintenance and version control of the style sheets for Wired News. It has to do with importing additional CSS files and referencing images from within any CSS file. Since I’m the original and final author of the CSS files, I like to keep a local working version of the design prototypes on my laptop. I was originally referencing URIs in the CSS using absolute paths, relative to the web server root — ie: url("/wired/images/logo.gif"). For the live site, we’ll be hosting both images and CSS files on Akamai servers, which obviously means I won’t be able to keep the same URI references in each of the CSS files.

I won’t go into detail about how Akamai works, because I’m not sure I completely understand it myself. But I do know that Akamai URI paths can change quite often. Timestamps in the URI can change to ensure the servers are always storing our latest updates to images and style sheets. This could potentially mean a time-consuming task of changing all urls in multiple CSS files every time the Akamai paths change. We wondered if using relative paths would point to images on the same server that provided the HTML file (www.wired.com), or if those paths would point to images living on the same server as the CSS file that referenced that image (www.akamai.com). Fortunately, we found this paragraph in the Syntax and Data Types section of the CSS2 specification:

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC1808]) are resolved to full URIs using a base URI. RFC 1808, section 3, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

By changing the image and CSS file references to relative URIs — url("../images/logo.gif") — and ensuring that all images always live on the same server in the same relative location to the CSS files, we can avoid changing those references every time the Akamai image and CSS paths change.