Sometimes I don't wan't the
<legend>-element to be displayed visually but wan't to keep it for standards, semantics, accessibility and SEO-purposes.
I've used and tried different ways of making it disappear (such as
<legend><span class="offscreen">Search</span></legend>), but which one "works best"?
position: absolute; on the legend doesn't work in Firefox 1-3.5 so it's not an option as shown here as shown in this test. The first legend is positioned absolute, the second one is hidden using a extraneous span-element (could just as easily be a label element off course).
I don't want it to take up any space and be removed from sight in an accessible way.
My suggestion would be to add the class="offscreen" to the legend element itself - no need for the span. Then in your CSS:
position: absolute; text-indent: -4000em; }
The position rule takes the legend out of the document "flow", and the text-indent moves it off to the side where no one will ever actually see it. You have to use text-indent because using something like left: 4000em; results in a horizontal scrollbar in some browsers. Text-indent doesn't cause the scroll bar, but you get your text moved waaaaay off to the side.
It will remain accessible to screen readers (unlike display: none), too.
As far as I know this technique isn't frowned upon by search engines - but I wouldn't abuse it. I usually use it for things like having a header element being swapped out with an image, but still wanting the text there for your same reasons.
You could also do:
no need for a class. :)