Since CFML developers are essentially very specialized web developers, I feel that it's important to continually learn and improve my skills not only with CFML, but also with HTML and CSS. Here's a trick I picked up earlier this year that I think could benefit a lot of people.

The beauty of CSS is that you can write simple, reusable rules that can be applied throughout your site to provide a consistent look and feel without setting individual display properties on every object on the page. You already knew that.

But let's say that you want all of your site's button elements to have the same overall style: a specific font, a background and border color, and maybe a set of color changes for hover (not displayed in IE). But on certain pages, you want all buttons to have a fixed width so that their edges line up when stacked vertically, and on other pages you want widths to be automatic so that you can fit more in a single horizontal row. This is a great case for multiple classes.

Take these two HTML samples (from different pages) for example. We'll start with our set of vertically stacked buttons:

<div id="buttons">
<button class="standard" onclick="doStuff1();">1</button><br />
<button class="standard" onclick="doStuff2();">2</button><br />
<button class="standard" onclick="doStuff3();">3</button>
</div>

And now our single row of horizontal buttons:

<div id="buttons">
<button class="standard" onclick="doFoo();">Foo</button>
<button class="standard" onclick="doBar();">Bar</button>
<button class="standard" onclick="doFooBar();">Foo & Bar</button>
</div>

Let's make them flat, with a light shade of gray for their background, and a darker shade of gray for their border. Add some font styling and a hover style, and they start to look pretty decent:

button.standard{
background-color: #eee;
border: 1px solid #bbb;
text-align: center;
color: #666;
font-family: Tahoma, Verdana, Helvetica;
font-weight: bold;
}
button.standard:hover{
background-color: #935232;
color: #fff;
}

Now, here are the two classes that we'll use to specify widths:

button.autoW{
width: auto;
}
button.fixedW{
width: 200px;
}

To apply these size style classes without losing our other styles, we can add them to the class attribute, as if it were a space-delimited list, like so:

<button class="standard fixedW">...</button>

Now, we can have consistent color & hover styles for our site, and be able to specify either a fixed or automatic width for it. Using this method, if you decide later that you want your button hover color to be something different, you only have to change it in one place.

I've tested this with IE6 and 7, Safari, and Firefox 1-3. I presume Opera and other modern browsers also support this functionality.

It occurred to me the other day, while filling out a CAPTCHA to leave a comment on a friends blog, that there is further room for improvement in most implementations, putting aside for the moment the fact that there are better alternatives. But if you have ever used a CAPTCHA before, chances are you've asked yourself this question: Is it case-sensitive? And is it? Who knows?!

The solution!

Hardly anyone goes out of their way to indicate whether the CAPTCHA response is case sensitive, and, even worse, some even use fonts where the lower-case-L and upper-case-i — and this isn't the only set of easily confused letters — look essentially the same. As long as they're not getting spammed, that's good enough for them. Sadly, the solution is so easy that the careless among us are only hurting themselves. A simple CSS addition can make a world of difference.

Step 1:

Only use capital letters. This alone won't solve your problems, but capital letters are much more easily distinguished from one another in most fonts. Even if you don't have a nice pretty configuration screen for your CAPTCHA asking for a set of characters to choose from, I guarantee you it's in the code and would be a piece of cake to change. For example: [viewcode] src="captcha.cfm.txt" showsyntax=no geshi=cfm[/viewcode]

Step 2:

Add a text-transform property to your CSS for the CAPTCHA response input field. Specifically, text-transform: uppercase;. This takes away almost any doubt a person might have over case sensitivity. Try it yourself; type some text in this box and see how much better life with CAPTCHA can be:

Extra credit:

Add a small line of text next to your CAPTCHA explaining that case doesn't matter. If you have the ability, choose a font with unambiguous characters.

Please, please, PLEASE use label tags! Accessibility has been on a lot of people's minds for a while now, and I'm surprised to see the lack of zeal for the HTML label tag.

Recently, people have wised up and made entire blocks clickable, not just the text within them, sometimes doubling, tripling, (or more!) the size of the rectangle representing the link. Generally you recognize one of these menus when you hover over the menu item's row and it or the link changes color, and your cursor changes to a hand. This is a great step forward in usability, and it pains me to see the forms equivalent being neglected like the red-headed step child.

Take for example, your average navigation menu. Mine will do: over to the right there. —>

When you hover your mouse over a menu item's row (list item), the row changes background color, the link changes color, and the mouse cursor changes to the "hand" to indicate that you are over a link.

Think about it: A check box is only about 15 pixels tall by 15 pixels wide. That's a very small rectangle and not only requires extra precision on the part of your average user, but may prove to be difficult for someone with poor eyesight or arthritis. A radio button is even smaller. In most cases, your checkbox is going to have some text next to it that describes what checking it accomplishes. Wrapping that text in a label tag will only take you a few more seconds, and exponentially grows the clickable rectangle for that form control.

<p>Try clicking on the text labels:</p>
<form>
   <input id="male" name="sex" type="radio" />
   <label for="male">Male</label><br />
   <input id="female" name="sex" type="radio" />
   <label for="female">Female</label>
</form>

Try clicking on the text labels:

Male
Female

Add some CSS to change the cursor, and you're in good shape:

label { cursor: pointer; }

Try clicking on the text labels:

Male
Female

Your users and I thank you!