Jun 252012
 

Can CSS do what jqDock does?

Short answer : No.

CSS3 provides for some animation techniques that were previously the exclusive domain of Javascript. However, browser support for these new techniques is varied and incomplete, and legacy support in older browser versions is obviously compromised. As an example, let’s take a look at the CSS3 transition style, since that is the one that is most likely to be able to replicate what jqDock provides…

The transition style is currently supported (ie. at the time of writing) by the latest versions of Firefox, Chrome, Safari and Opera; it is not supported by IE9. So, if you want cross-browser standardisation then it’s game over right there.

Of course, there are ways around this, such as using a polyfill to compensate for IE. But then you’ve forsaken pure CSS and you’re merely substituting one piece of Javascript for another.

Let’s assume that IE can now handle the transition style (IE10?), so we’re now on a level playing field as far as latest-version browsers are concerned : How can you guarantee that all your site visitors are going to be using these latest versions? You can’t. So we’re back once again to the question of cross-browser standardisation.

Let’s now assume that you’re happy to have a non-animated fallback for any browser that can’t handle transitions

These examples have no Javascript acting on them at all; it’s pure CSS.

First off, I’m sorry if you can’t see any animation when hovering over the images but I’ve already explained why that might be the case.

With the CSS solution there is no sense of proximity, or mouse position within an element. This means that hovering over an image will only change the size of that specific image; none of its neighbours will be affected. Whether this is the effect you want for your dock is a decision only you can take, however it does have one major advantage : you always know the maximum dimensions of the dock. Also, designating an active item, ie. one that is initially expanded, and returns to expanded when the cursor moves off the dock, is perfectly feasible with the pure CSS solution, whereas with jqDock it is problematic.

One possible limitation with CSS transitions driven by cursor position (ie. using :hover state) is that they are not interruptable. You can’t stop a transition part way through (without using javascript) because the :hover state is either on or off, and in both cases you have definitive targets (the pre-defined expanded or contracted dimensions of the relevant image). Obviously, if you don’t need jqDock’s ability to freeze a dock then it’s not a problem.

Styling in general is much the same between CSS and jqDock : you can put borders and backgrounds on just about anything, and you can always add elements to the CSS solution if need be. If you don’t have specific label structures (like extra SPAN elements) within your anchors, CSS can create labels from anchor titles (for example). If that doesn’t provide enough of a base for your desired label styling then you may have to put dedicated label structures inside the anchors, particularly if you want to center labels that have background or border styling.

If you can put 2 images into your anchor then getting the CSS to swap them in and out on hover is no problem, so that solves any small-versus-large image quality problem.

Conclusion:

If you are willing to sacrifice proximity expansion, and you have no need to suspend or interrupt any animation, then pure CSS can provide a very reasonable alternative to jqDock.

But, unless you don’t care about Internet Explorer, and non-current versions of some other browsers, you are going to need javascript of some sort to make it work consistently across browsers!

Share

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)