In my new job I recently discovered what seems to be a bug in Firefox 3.5: when there is a link (or anything else to which an outline could apply, i.e., any element with an :active state or a tabindex) that is floated (i.e. float: left or float: right) inside a container with overflow set to auto, the outline on that link will take up space, contrary to the W3C spec. This means that such a link, if it fills the container in either the X or Y dimension, will cause scrollbars to appear when it is active (tabbed to or pressed).
But there’s a fix: If you apply CSS outline-offset with a negative value, e.g. outline-offset: -2px;, I suspect it still takes up space (in a sense), BUT that space is inside the element’s current boundaries, so no harm done (unless you really needed that outline to conform precisely to the boundaries.
A while ago, I was directed to this prototype for the mozilla.org redesign, notable particularly for it’s use of an intelligent, fluid grid. I bookmarked it within a folder I keep for quick design inspiration, since there are several aspects of the design that I think are pretty great. Looking at it again the other day, I discovered a clever bit of CSS coding.…
Related to: How not to do progressive enhancement.
I actually heard from Paramore|Redd today—a very nice surprise! Joel Steidl from P|R pointed me to the jQuery History plug-in, which seems to make possible just the sort of functionality I was getting at. Turns out, P|R was well aware of the small issue I pointed out, and is using the plug-in to great effect on their “Peeps” section, e.g. Joel’s own page. Browse through the employees using the forward and back buttons on the page and you’ll find that, while the page never reloads, the browser’s forward and back buttons work just fine. Bravo! Thanks for the reply, Joel.
I had a somewhat unfortunate experience with JavaScript-based progressive enhancement today. It came at the hands of Nashville’s Paramore|Redd. To be clear, I’m not hating on the company; they obviously do great work.Their website just happened to exemplify a pretty common usability shortcoming.…
I was helping my dad shop for a new printer today, and came away frustrated. I was primarily reading reviews on CNET (uhh, I mean c|net). What pissed me off was the system for sorting by price. My options were “Less than $100,” “$100–$200,” etc. This is pretty typical. But what if I want less than $200? Or $100–$300? This is where sliders should come into play, so I can choose the low-end and high-end myself. It’s late at the moment, and I can’t think of how this would be done with progressive enhancement, except to default to the faulty method and replace the whole thing dynamically with JavaScript. I’m not sure how it would be done with consistent HTML code. There may be a solution out there and in any rate I’ll mull it over and maybe put a demo together. Regardless, why are sliders not the norm?