TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

An experiment mimicking the Dock of OS X using only CSS

108 pointsby js4allover 13 years ago

11 comments

statictypeover 13 years ago
Have there been any usability tests (or even just a logical argument) that show the OS X-style dock to be a good UI mechanism?<p>Seems to me that turning off magnification and flushing it to a corner (so that everytime it grows it doesn't move around the existing icons) would have been a better default solution.<p>Apple usually thinks these things through though so maybe I'm missing something?
评论 #3232507 未加载
评论 #3232144 未加载
评论 #3231429 未加载
petefordeover 13 years ago
I am seriously impressed. Thanks for sharing!<p>I wish there was an easy way to fit this into some of my projects. I don't mean the browser incompatibilities others have pointed out, either!<p>I feel like the idea of using this in a practical application is stunted by the "Ikea effect" of something looking awesome in the showroom but crappy in your actual house. Unless you take great pains to make sure that everything in a room matches thematically, it will look like a careless hodge-podge of well-intentioned designs that don't work well with each other.<p>The reason it looks great inside OS X is that Apple have put years of thought into how the Dock fits in with the rest of the user experience. You can't drop a dock into an application without putting real thought into whether it's the right navigation tool.<p>It's usually not the right navigation tool, but it sure is pretty.
jebblueover 13 years ago
It works on the latest Google Chrome and Firefox on the latest Ubuntu and looks nice. On my several years old computer both cores used around 20% to 30% while moving between the icons at a normal pace. Not critical and good performance, comparable to a few flash sites I checked for comparison.<p>One of those flash sites seemed to mess up the browser and the subsequent flash dock sites failed to load correctly. I don't see this with HTML 5 and CSS sites which achieve the same level of feature usability.
rplntover 13 years ago
Does not work properly in two of three browsers I have. I don't see a reason why not use javascript in cases like this. I get it as a showcase of power of css but please, don't use this on your websites (yet). Here's[1] an similair example from 2007, works just fine in all three browsers I tested.<p>[1] <a href="http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html" rel="nofollow">http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.ht...</a>
评论 #3231289 未加载
评论 #3230907 未加载
ecaronover 13 years ago
Wasn't Google's homage to the OS X dock, done in 2005, also using pure CSS? <a href="http://www.macworld.com/article/43631/2005/03/googlex.html" rel="nofollow">http://www.macworld.com/article/43631/2005/03/googlex.html</a>
jarek-foksaover 13 years ago
Is something like -webkit-box-reflect available on other browsers? It seems to be totally non-standard (none of the CSS specs mentions it).
评论 #3232822 未加载
评论 #3230699 未加载
评论 #3230904 未加载
pazimzadehover 13 years ago
Works great in Safari. In Chrome, there is a flicker when you click an icon. Sometimes the entire window flickers white.
alpbover 13 years ago
I think the growth rate should be adjustable easily. What's your approach to this problem?
评论 #3231412 未加载
king_magicover 13 years ago
It looks nice on Safari, but I do echo other people's comments: the code looks like it uses non-standard mechanisms for achieving it's goals and had to be tailored for specific browser families. To me, that's a "code smell".
评论 #3230925 未加载
city41over 13 years ago
The link to the old version leads to a 404.
评论 #3231405 未加载
CamperBobover 13 years ago
Don't shake the platform when the user moves the mouse across the icons; the effect is rather nauseating. (FF 9.0 on Win7)
评论 #3230854 未加载