Opened 14 years ago
Closed 14 years ago
#4034 closed enhancement (wontfix)
css class ui-corner-* should support Safari and other CSS3 browser
Reported by: | mephis1987 | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.7 |
Component: | ui.css-framework | Version: | 1.6rc6 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function
For example we already had in ui.theme.css (line 239)
.ui-corner-all { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; }
However in Safari and other CSS3 browser there are other properties, for example
.ui-corner-all { -moz-border-radius:5px; -webkit-border-radius: 5px; border-radius: 5px; }
And is there any work around for IE?
Note: See
TracTickets for help on using
tickets.
Unfortunately, no. IE doesn't support border-radius and unfortunately they don't plan to implement it until at least IE9, as far as I know.
jQuery UI supports rounded corners for Safari, Firefox, and Chrome. Other browsers will fall back to square corners. If you view the ui.theme.css file in a text editor, you'll see the rules for moz (mozilla) and webkit (safari, chrome). The third line in your example is no longer in our code since it's not yet in w3c recommendation status.
For IE, there are a few workarounds you can try, such as VML-drawing jQuery plugins that may or may not work with UI. Here's an article for example: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/