Hacker News Reader

Comment by drewda | Hacker News Reader

If you don't need all that glitz, here's a jQuery plug-in: http://zikes.github.io/circle-menu/

The best (semi)circular menus I've seen recently are in the iD editor for OpenStreetMap: http://ideditor.com/

The reason of the post is not the circular menu itself but the fact that it's entirely made in CSS. I think this is really impressive.

I'm genuinely curious: why is that exciting? I don't know a huge amount about the web stack.

Usually JavaScript would be used to create the flyout menu effect like you see in the Dabblet. But since it's done in CSS3 any browsers which support those standard properties can work - no need for any JS code. It's just a neat workaround and very impressive IMO.

Do more browsers currently support JS or CSS3? (eg up to jquery 1.9 or similar) Not sure I've seen the stats on that as of yet and I'm curious.

Do any browsers with any real marketshare (even a tenth of a percent) not support JavaScript? I can't think of any examples although I've never had any reason to dive too deep into browser compatibility specifics for my projects.

Even if they do it can be turned off pretty easy. CSS wouldn't be affected in that way (I would think).

All mainstream browsers support JS and CSS, the question is how recent and what specific features. "CSS3" really means a whole ton of features and support varies.

Your typical "CSS3 demo" on HN will work well on Opera, Firefox, Chrome, Safari. It should work on IE10, has a 50/50 chance of working on IE9, and probably won't work on IE8 and below.

Check out http://caniuse.com/ to see which features are supported on each browser.

One other thing to mention is that users might turn off JavaScript support and screenreaders will have issues with some things JavaScript apps do. It was much more of an issue 5-10 years ago than it is today though.

As already mentioned it's just darn impressive, but there is also the big benefit of implementing stuff in css (when possible) over js that it generally performance much better, since all the animations are offloaded to the browsers rendering engine, rather than implemented in javascript. It usually gives a more robust and smooth result.

I agree -- it's some really elegant and powerful CSS code, which is a great example of what you can do with modern CSS, but I don't think it's meant to be about the actual interaction design, or meant to say that you should do everything in CSS and not use JavaScript.

As a practical matter, you need JavaScript to achieve the best usability, reusability, flexibility, etc. But it should serve as an example to JavaScript widget designers how much you can do in CSS.

It's an interesting and difficult problem designing a JavaScript pie menu component that let you easily and deeply customize it in CSS.

The radial menu in the stackoverflow article has some really elegant and concentrated CSS code, and I learned a lot by looking at it. I didn't realize you could do that kind of stuff!

The tradeoff of using pure CSS and very little JavaScript is that it's not a flexible, reusable, data driven component, that lets you plug in your own graphics, content and behavior.

I think it's a great idea to offload as much of the graphics and feedback to CSS as possible, but I don't see any practical reason for avoiding JavaScript and using pure CSS.

Anyway, as a rule of thumb, people who use modern browsers with JavaScript turned off do it because they like to whine about how persecuted they are, and I would never presume to begrudge them that opportunity.

The nature of user interface design is that when the rubber hits the road, there will always be millions of specific little tweaks you have to do to make things easier for the user and integrate with the application, and you can only do so much in CSS before you hit a wall and have to use JavaScript.

Of course it's great for the JavaScript code to leverage CSS as much as possible to make the menus graphically rich and easily customizable, and many of the CSS techniques of this particular example with a fixed menu could be applied to a more general purpose JavaScript widget.

But what it boils down to is that you really need the power and generality of JavaScript to support more sophisticated tracking, feedback, data driven menus with dynamic layout, application specific presentation and tracking feedback, etc.

Then you can get on to the harder problem like making it easy to design, build and measure pie menus that are most efficient and easy for users to remember, learn and use. And that depends a lot on the environment and the tools that you are using.

For example, these pie menus for Unity3D leverage the Unity editor and 3D object manipulation tools, and they have ways to tightly integrate your own application, content, graphics, animation and feedback: http://www.youtube.com/watch?v=sMN1LQ7qx9g

Reply on news.ycombinator.com