CSS .ui.corner.all - aesthetically incorrect radius sizing when used on all widget corners.

[efeek]

Version: Latest download Browsers: All Operating system: Windows 7 Pro Instructions: View a Datepicker or Dialog widget with CSS3rounded corners enabled. What you expect to happen: When an outer container element has a radius enabled (E.g. 6px), its child element with padding (E.g. 1px) and a border (E.g. 1px) should have a reduced size radius (E.g. 4px ). What actually happens: All corners are given the same sizr radius in the CSS with .ui.corner.all (E.g. 6px)

[efeek]

Check out this blog article: Rounded corners done right! Ian Yates has explained it all for me.  http://webdesign.tutsplus.com/tutorials/visuals/quick-tip-rounded-corners-done-right/

[joern.zaefferer]

The explanation in that tutsplus article makes sense, but I have no clue how we'd address this on the framework level.

[sparkybg]

Replying to joern.zaefferer:

The explanation in that tutsplus article makes sense, but I have no clue how we'd address this on the framework level.

One way is to add some more additional CSS styles. For example, I have created a "ui-corner-small" style with reduced corner radius and I simply add it to the element when needed. It works well in a dialog widget - the dialog outside corner is theme's default corner, and the dialog caption/header outside corner is reduced, so the caption/header looks much more in place, especially around top left and top right corners.

Of ocurse, this style has to be added to every theme that is used.

I think adding a 2 more corner radius styles to themeroller themes will be adequate for most of the cases.

[selfthinker]

The underlying problem is that the current CSS framework is very unsemantic and lacks abstraction between styling and behaviour and is therefore less maintainable. If e.g. a dialog was using more semantic classes, it would be very easy to just change them to show two different types of rounded corners. The proposed solution of sparkybg only makes it worse and less maintainable.

Another simple solution (without changing the framework) would be to: Either reduce border-radius in nested corner classes, e.g. .ui-corner-all .ui-corner-all { border-radius: 2px; } etc. Or increase border-radius in containers known to contain other nested corner classes, e.g. .ui-dialog.ui-corner-all { border-radius: 6px; }

[mikesherov]

selfthinker, I think you've shown us that you know what you're talking about by now. If you have an idea for solving this simply while not hindering maintainability, go for it :)

If you're making an argument for something more drastic, open up a new ticket so we can discuss it or head over to IRC.