Using RGBA colour during development to help structure your web page with CSS

28th July, 2009

Article

screenshot showing regions blocked out with RGBA colourLaying out specific regions of a web page (a header, a navigation section, several columns for the main content with gutters between them, etc.) using semantic markup and CSS can sometimes be a tricky business. It is complicated by the fact that some types of positioning can cause page elements to overlap rather than sit side-by-side, not to mention the rendering differences between various browsers. Finding a way to visually block in the elements of a web page during the design phase means that the designer can see the full extent of the actual elements themselves (be they divs, lists, paragraphs, or whatever) rather than just the content that they hold. This highlights issues with floats, margins going wrong, box model problems (thank you, IE6), and a myriad other things.

Borders and outlines

Web designers invariably have their own preferred method of achieving this ‘blocking-in’. Applying coloured Border styles to elements was popular for a while, until the web development community realised that using Internet Explorer — with its mix of partially, badly and incorrectly implemented CSS support — as your development browser was a Bad Idea. Most then switched to using standards-compliant browsers such as Firefox, Opera or Safari during the web design process, which in turn opened up the option of using CSS Outlines instead of Borders (IE7 and below don’t support the Outline style). Designers found this preferable because Outlines don’t add to the amount of space taken up by the element in question whereas Borders do, and nobody really needs a blocking-in technique that might actually break a tightly-constructed layout. Also, Chris Pederick’s superb Web Developer extension for Firefox turned the whole process of applying outlines to a page’s elements into a one-click operation.

I used the Outline-style method exclusively for ages, and the simplicity of the WebDev toolbar (thanks again Chris!) means that I still use it much of the time. The only problem I found with using outlines was that if the layout was getting complex it could become difficult to see clearly where elements overlapped, or to which element a given outline edge was applied. The whole page could start to look like somebody had Etcha-Sketched over the whole thing, and it sometimes became more, rather than less, confusing.

The translucency option

My solution was to use RGB alpha, or RBGA colour. Support amongst browsers is not universal, but Firefox 3+ and Safari 3.2.1 both support it which makes it fine for my development purposes. In short, RGBA allows you to specify a colour in terms of both colour and opacity. My method was to simply use CSS to set the background colour of my major elements to black with a 10% opacity setting. The most selective way was to apply a class=“show” to those elements that I wanted to block in.

<div class=“show”>  blocking out content </div>

.show {background-color: rgba(20, 100, 20, 0.1);}

Immediately, the entire element became visible, gaining a pale grey background that did not obscure the elements beneath. Where elements overlapped the background would become incrementally darker, like overlapping sheets of tinted acetate. The greater the number of overlapping elements the darker the background in that spot. For example:

screenshot of home page with elements blocked-in via RGBA colour

In this way I found that it was much easier to keep track of where the page elements were falling in the layout, and to troubleshoot my CSS; if I’d set the width of an element wrongly — or if the browser was rendering it wrongly — I could see it at a glance, along with how it was affecting other elements on the page.

Limitations

Of course this doesn’t work in IE (big surprise there); sadly, not even in IE8 supports RGBA colour. However, I only use IE during development in order to check the severity of its Crimes Against Rendering, so that’s no real problem… and, if needed, translucent PNGs can be substituted for the RGBA colour in IE7+. And it’s not as simple to implement as using the Outline Element commands in the WebDev extension. All in all, however, RGBA backgrounds have been a big time saver for me and there have been occasions when I wouldd have become lost in a layout without them.

Filed in…

plus…

Selected work

Latest blog entries

Categories

Monthly archives

Copyright © 1999-2014 Shark Attack. All rights reserved.