Ten top CSS tricks and techniques

Every good web developer should have an arsenal of tried and tested CSS tricks and techniques to call on in those darker hours, when the client is calling for the impossible, when Firefox, IE and Safari are all putting their own unique spin on things, or when you know exactly what you want to do, but you just can’t bring yourself to compromise your new-found passion for web standards.

Following is an (unordered) list of ten of the most useful code snippets I find myself coming back to time and again:

1 - Keeping things in proportion
One of the defining principles of web accessibility is that the designer should not obstruct visitors to the website in any way. If they wish to scale the text to a ridiculous size, we must accommodate that wish. This is where we need proportional dimensions, and key to these is an understanding of the ‘Em’ measurement. Fonts, line-heights, margins and padding can all be specified in Ems. Just be sure to set up some global properties first.

* { font-size:100%; }
body { font:75%/120% Verdana, Arial, sans-serif; }
p { font-size:0.9em;}

2 - JavaScript-free rollovers
Wouldn’t it be nice to have instant roll-over button effects using javascript? Even better, what if the button label remained searchable, accessible text? Create a background graphic double the height of your button, half showing the "up" state, and half showing the "over". Give your link element a fixed width and height, acting as a window on to a portion of the graphic, then use the :hover pseudo-class to change the vertical position of the graphic behind this window.

a {
display:block;
width: 70px;
height: 25px;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}

a:hover {
background-position: 0 -25px;
}

3 - Fixing IE with Conditional comments
A common selling point when explaining the benefits of CSS to a client is that sites will look identical across all platforms. Anyone struggling to convince IE6 that this the case will realise that this is a slight fib. Fortunately, IE contains a feature called ‘conditional commenting’. Simply make yourself a new IE6-friendly stylesheet, include it in your page as usual and wrap it in a conditional comment to hide it from everything except the guilty browser.

<! - - [if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->

4 - Horizontal floating lists
Floating list elements horizontally is a handy way to create quick and easy navigation menus, while leaving the plain HTML as an accessible, logical list. By default, list bullets appear outside the boundaries of the list item. Setting the position to "inside" ensures that there is no unsightly overlap of text and bullets. Adding an additional padding to the right makes sure things are nicely spaced out.

li {
float:left;
list-style-position:inside;
padding-right:10px;
}

5 - Graphical headings, the accessible way
Accessibility conventions demand that section headings be indicated with heading tags. All well and good, but they don’t half look ugly sometimes, especially when you’ve sweated over Photoshop to come up with that gleaming, pristine interface. Fret not though. Set your H1 to a block element, give it a width and height to match the graphic, set the graphic as a background image and use a negative text-indent to hide the text from view.

h1 {
display:block;
width:100px;
height:30px;
background: url(myImage.jpg) no-repeat;
text-indent:-2000px;
}

6 - Vertical alignment, CSS-style
Vertical alignment with tables was a straightforward affair, but in these enlightened times of CSS-based layout, the seemingly simple task of vertically centring text is responsible for more hair-tearing frustration than you might imagine. Luckily a solution is at hand. Just set the line-height of the element containing your text to the same as its vertical dimensions. A container div with a height of 20px would therefore have a matching line-height of 20px.

#container { height: 50px; line-height: 50px; }

7 - Multi-class action
Attributes tend to just have a single class assigned, but this doesn't mean that that's all you're allowed. You can combine as many classes as you wish, meaning a CSS palette containing just a few basic ingredients can lead to a much wider range of styles if combined intelligently. Classes should be separated with a space, not a comma. If any style rules overlap between the classes, a class further down the CSS document will always override those above.

<p class="boxout highlighted">...</p>

8 - Min-width for all
"Liquid" layouts - where page contents expand as the user resizes their browser - are all well and good, but what happens when the user makes their window too small? Many browsers allow setting a minimum width for elements. Unfortunately, IE 6 and earlier is not one of them. What IE does support though is inline expressions in CSS styles, so with a little mathematical sleight of hand we can fool IE into thinking it supports minimum widths after all!

#container { min-width: 600px; width:expression(document.body.clientWidth < 600? "600px":"auto" );
}

9 - Consistent formatting with text-transform
This one is particularly useful when working in larger teams, where maintaining consistent formatting can be an ongoing battle. Text transform instantly renders content contained within as uppercase, lowercase or capitalised, without the need for retyping or JavaScript manipulation. The HTML original remains unaltered.

p { text-transform: uppercase; }

10 - Cropping images with CSS
Under-used, but potentially very powerful, the "clip" command allows users to define a crop area on any element, ideal for thumbnailing images without the need for multiple image sizes. Crop may only be used on absolutely positioned elements though, so this can limit its usefulness. Note also that dimensions are relative to the top and left of the element, so a right hand margin of 5px on a 45px-wide image would be 40px.

img.crop { clip: rect(5px 40px 45px 5px) }