make-believe.org

Two wrongs

There are arguments against styling forms with CSS, which should properly be heeded for commercial web development. In essence they come down to "don't mess with the paradigm".

But messing with the paradigm happens to be a personal hobby, and forms using the OS-provided look'n'feel can often seem out of place. The bevelled well into which Windows pre-Luna sinks its textareas and fields doesn't really suit the subtler 3D aspects of m-b.o's design, for instance. Ah hell, do I have to justify it? I just wanted to style the comments form.

And I did, and I think works well, even if it does mess with the paradigm. But there is a thorny issue, which is that some browsers don't style forms fully or at all. Safari in particular obstinately serves up unadulterated Aqua widgets, which Mac users are quite happy with, it seems. The problem is that if you encode meaning into the style, it's lost on Safari users. It's lost on blind people and Lynx users too, but here I feel obliged to say what seems to be unsayable: there are limits to how much I care about such people for m-b.o, because quite frankly they do not exist. They are phantoms and bogeymen, as far as this site is concerned.

Quite clearly however, Safari users do exist, and I want to do everything to welcome them and make them feel at home—not least because they are often rather sensitive types who prickle at the slightest hint of indifference to their presence. And unfortunately, my comments form has been utterly and inexcusably oblivious to their needs for several months now. Here's how it works at the moment:

The "your:comment" graphic at right is the background image of the field, which helpfully disappears with the aid of a little javascript when you click on the field. This is a nice clean solution with maximum spatial and aesthetic gains for very little usability losses. But Safari doesn't allow background graphics for form elements, meaning that Mac users are presented with three blank rectangles and asked to guess at their function.

Now, naturally I don't want to offend Safari users, but neither will I butcher something that functions at least adequately for everyone else just to accomodate them. So my approach was as follows: My current solution is wrong, but I don't want to make it right. I will therefore fix it by implementing a second wrong, because as everyone but those who coin proverbs knows, two wrongs make a right. So what I've done is taken something that only works in Safari at the moment, namely the text-shadow property of CSS3, and used that to let Mac users know what each field does. Here's what a Safari user should see:

The "Comment:" label is present on all browsers, but it's white on a white background, so without the text-shadow property, it is only visible if you drag-select the region. A freakish and totally unintended side effect is that those blind and lynx-using theorems could, if they were to materialise, actually use the forms as well.

It ain't canon, but you Mac users get to keep your beloved Aqua widgets and see something no-one else can see, while those of us with more backward albeit more flexible browsers can muck around with our background graphics and javascript. Two wrongs, but it seems alright.

Joseph | | Comments(5)