A major part of being a good developer is efficiency. Not just with efficient code, but efficiency in making your life easier, being cleverly lazy, and making code do the hard work for you.
A good way to be efficient is through illusion. A great example of this is faux columns; overcoming a complex problem with minimal code and a clever illusion. Faux columns is still, today, one of the best little bits of web development illusion which quickly solves a problem that would otherwise take a lot of time and markup. Illusion is efficiency.
Another practical example of this is something I helped someone out with recently and have actually built myself for use at work. I’m sure we’ve all seen search forms laid out like this before:
What we have here is a search button laid over the top of our text input. Or do we…?
If we were to use just <input type="text"> and <input type="image"> to achieve this effect here we’d need to use some positioning to move the button over the search field, possibly some z-index, some big paddings to stop text going underneath the button and, more than likely, a lot of hard-coded numbers, cross-browser issues and headaches.
Enter the magic of illusion. Here’s how I tackled that problem:
Instead of trying to make two sibling elements appear as though one contains the others, why not spoof the effect with an element that does contain it; the <fieldset>?
If that doesn’t make sense, I’ve made a demo of this on jsFiddle as well as hosting the code. Be sure to pick through it with Firebug or similar to actually get what’s going on.
This method works perfectly in IE7+ (not checked IE6, but nor have I walked my dinosaur today) and all other browsers.
<!-- HTML -->
<form id="search-form" action="#">
<fieldset>
<legend class="accessibility">Search our archives</legend>
<label for="search" class="accessibility">Search terms</label>
<input id="search" placeholder="Keywords…" type="text">
<input id="btn" type="image" src="http://dl.dropbox.com/u/2629908/misc/search.png" alt="Search">
</fieldset>
</form>
/* CSS */
.accessibility{
position:absolute;
left:-9999px;
}
/* Form */
fieldset{
padding:0;
width:275px;
border:1px solid #4885d8;
background:rgba(0,0,0,0.25);
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow:0 0 10px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.75) inset;
box-shadow:0 0 10px rgba(0,0,0,0.75) inset;
}
input{
font-size:1em;
}
#search,
#btn{
float:left; /* Make the fieldset hug the inputs */
cursor:pointer;
}
#search{
width:200px;
padding:15px;
background:none;
border:none;
color:#fff;
}
#search:active,
#search:focus{
outline:none;
cursor:text;
}
#btn{
float:right;
position:relative;
top:9px; /* Some unfortunate hard-coded numbers, but these will need setting/altering accordingly. */
right:9px;
width:32px; /* Same width and height as original image file. */
height:32px;
}We’re building a form, we have <fieldset>s and other great little semantic elements all over the place. Let’s put these to work and achieve this effect with some illusion… Why wrestle the button and input to sit awkwardly when you have a wrapper already there with the <fieldset>?
Be clever, use illusion to create the desired look using other, more robust elements. Think outside the box and see where other elements/bits of markup can be used to make a more sturdy build and make your life easier.
Any more good examples of this kind of thing that anyone’s built? Let me know!
By Harry Roberts on Thursday, August 18th, 2011 in Web Development. Tags: CSS, HTML | 9 Comments »
+
David Bushell said on 18 August, 2011 at 5:26 pm
Nice mate I do a similar thing.
Is there a reason not to style the form element instead of using a fieldset? I’ve done that before and it works fine.
Aaron said on 18 August, 2011 at 6:36 pm
This just seems obvious to me – the way i would do it anyway. :/
Zev Goldberg said on 18 August, 2011 at 6:46 pm
Agree with David. This kind of search bar is usually the entire form. Why not eliminate the fieldset?
Martin Bean said on 18 August, 2011 at 7:20 pm
@Zev I think it’s a through back to XHTML, which in strict mode requires an tag to be contained within a .
But of course HTML5 throughs that out of the window and makes the optional.
Travis said on 19 August, 2011 at 3:34 pm
@Zev Aside from the reason Martin listed (DTD variations), I tend to add FIELDSET because on several of my projects, the HTML is integrated into a .NET environment, which usually wraps the entire page in a FORM. As a result, I would need an additional tag for wrapping purposes. FIELDSET made more sense than a DIV to me.
Bruno said on 21 August, 2011 at 8:45 am
I didn’t get the point in setting “float:left” first then “float:right” on the #btn…
Bryan said on 22 August, 2011 at 2:35 pm
Just as an FYI, it works in IE6 as well (need to use it in our corporate intranet) except for the transparency in the image, of course. :)
Brian Cribb said on 23 August, 2011 at 3:36 pm
It’s a always surprise to me when I see yet another way that I can turn ten lines of code into two. It just never ends. I’ve been zapping accessibility items to the Far Off Left for various elements, but it never occurred to me to just make an “accessibility” class for all such items. Why haven’t I been doing that?
I’ve struck my forehead with my palm, I’ve laughed, and I’ve resolved to simplify some things after work tonight. Thanks for the primary example and for the extra goodie I discovered with Firebug!
Christian Krammer said on 25 August, 2011 at 1:25 pm
Someone could argue that the
fieldsetis quite redundant because you could equally use theformas the container for positioning. This would be the way to go for me, because it’s also semantically better, especially in this case with such a little form.