Community
Participate
Working Groups
CSS3-enabled browser can now do everything we do with SVG/VML, i.e. rounded borders, gradients and (later on) shadows. So we should support it as an third option: - Its more lighweight - The default Android-Browser does not support SVG or VML In case of Webkit, it should probably only used if performance is an issue (i.e. on mobile devices), since it doesnt look as good as SVG. (More research needed.) Technically, it should be implemented as the default method in Widget.js and HtmlUtil.js. For SVG/VML, the GraphicsMixin will be applied at runtime as patch, overwriting the CSS3 implementation. That way GraphicsMixin could theoratically be removed from the client-code for clients that don't need it.
Its not a blocker, but part of Bug 327023 could be nicely covered while fixing this bug.
Created attachment 186508 [details] rounded border comparison The rounded border on css/webkit slightl blurs with the backgound-color of the element, but it's debateable if that justifies making an exception for these browser (using css on mobile-devices, svg on PCs). All css3-features we might use (rounded borders, gradients, shadows) are supported since Webkit 522 (Safari 3.1, Chrome 1.0) and Gecko 1.9 (Firefox 3.6).
CSS rounded border look great on the ipad, but ugly (bad AA) on the android browser (Samsung Galaxy Tab). Too bad thats the only system where we have no choice.
Fixed in CVS HEAD. A few notes: - CSS3 is enabled for FF4+, Safari, Chrome (since webkit 522) - Opera would probably not yet work, needs some research - IE9 could probably be supported in standard-mode (See Bug 270397) - Shadows blur-effect now works in Safari. - There is an issue with the shell titlebar: There has always been the problem that a few white pixels from the background shine through in the upper corners. For webkit broser this got better with CSS3, while it got (very slightly) worse in Firefox. To minimize the effect i adapted the default shell theming a bit. Titlebar has now a smaller radius (1px) than the shell itself (3px). - The "spread" parameter for css-shadows (that we currently dont support at all) is not supported by older webkit browser. That means should we want to support it, these (old) browser would need a specific solution (at worst revert to SVG or dont support it for those browser).
One more note: The ProgressBar still uses SVG/VML. Supoorting CSS3 there would need some heavy rewrites in the ProgressBar.
