Posted by Justin
Posted on 10-03-2007 under Design, Development

Today, we’re talking about color, its use on the web and how it is (in)effectively rendered cross-browser and cross-platform.When using a flat color as a background, such as is the case with the screen shot of salsa2night below, it is important to realize that if it is blending with an image, that some consideration of cross-browser rendering must be taken into account. Windows displays color differently than Mac, IE displays color differently than Firefox, which displays color differently than Safari–even when rendered on the same machine in the same OS.

Suppose that we have the following CSS declaration for an element on our page that contains an image that should blend in with a background color

#page {
background: #30899E url(image.ext) no-repeat;
}

The problem is not the hex value for the color, the discrepancy is in the value of the background color in the image itself. Here, on XP, Firefox is not agreeing with IE 6 about the image color; however, the CSS color of #30899E is being displayed consistently.

One way around this problem is by using IE conditional comments (which are a saving grace all to themselves, but that’s another topic) to include a style declaration or linked file to fix the background color for IE. These are also extremely useful for fixing other CSS, and sometimes Javascript, issues in IE that are inconsistent with other browsers.

<!--[if IE]>
<link rel=”stylesheet” type=”text/css” media=”screen” title=”FW” href=”/css/ie/layout.css”></link>
<![endif]–>


or

<!--[if IE]>
<style>
#page {
background-color: #258095 !important;
}
</style>
<![endif]–>


This, however, doesn’t necessarily create a new problem, but does not remedy the entire situation in that it does no good for Safari and other browsers. Another, separate issue is that now you have two places to make modifications to every time you update the image instead of just one, but that’s really a different topic. If you’re market only includes IE or Firefox, then, I suppose, you can wrap it up here. However, when that day comes that you need to support more browsers, what then? In general, web sites aim to reach as big of an audience as available, and should, as part of that goal, strive to provide as consistent an aesthetic experience as possible. Getting down to the point: since there are no Safari, nor for that matter, Opera conditional comments, what are we to do? We’ve fixed things for two out of the four big players in the browser market, but now we need a more general solution that doesn’t involve copious amounts CSS hacks and gimmicks.

That general way of handling this color dilemma is by using web safe colors for the flat colors in images that will be also be painted by a CSS background color such as in the following declaration.

#page {
background: #003366 url(/images/my-image.ext) no-repeat;
}


Design suites worth their salt already have web safe color palettes as part of their color picking tools, so differentiating between safe and potential mis-representable colors should be a snap. The crux of the situation here is that these palettes were chosen and generated mathematically by design-challenged programmers (hey, I can admit it), and not by designers. Complaints of an over abundance of highly saturated colors and not enough of a selection of muted colors are common.

Adapting oneself to design within these color constraints is somewhat note-worthy, but not necessary. Enter method three: break it twice.

The general idea here is to have two images: the image that we’ve been dealing with all along, and another, 1×1 px, that is filled with the background color that we want to fill the area with that we had been originally using a CSS hex value for. The basic idea here is to have to div elements, on within the other. The outer div, page-background, will contain the 1×1 px image have it tile (repeat) in the X and Y directions. The inner div, page, will contain the main image as it always has, except that it will have no background color defined with it.

<style>
#page-background {
background: url(/images/my-image-background.ext);
}
#page {
background: url(/images/my-image.ext) no-repeat;
}
</style>
<div id="page-background">
<div id="page"></div>
</div>


Of course, height and width must be set on the page element to fit my-image and whatever content is to be included, but this is the general idea. This works because of one reason: we’re exploiting the inconsistency in the rendering of each image. If each of these images contain the same palette, then they will be rendered the same. Again, instead of using a CSS color value, we’re tiling a very small image that contains that color under the main image so that everything is displayed the same in all browsers.

Each of these methods for addressing the image color issue has their own draw backs: the conditional comments only work in IE and force a division of code that has to be updated in two places; the web safe color palette is limiting factor on design; and the final, break it twice solution has the overhead of an additional image, albeit small, as well as the extra mark-up needed to stylize and include the extra div element, which is, again, small but there nonetheless.

Of all of these, I prefer the use of web safe colors as it is definitely superior as far as implementation is concerned; however, when push comes to shove, using the twice broken or break it twice method will get the job done and can be, theoretically, guaranteed to work in all browsers, forever and ever, amen.