CSS3 Borders Backgrounds
From RuntimeWiki
The CSS3 Backgrounds and Borders spec:
defines various enhancements that address key shortcomings that have frustrated Web designers for 15 years:
- Background image size-to-fit - CSS background images today are fixed size and therefore cannot scale-to-fit within the CSS box. As a result, to illustrate one particularly problem, Ajax user interface designers tend to tune their background images to match exactly a particular font size that is used by default within a web page. However, if the user increases text size in the browser, the carefully tuned backgrounds no longer align with carefully chosen text sizes. A proposed new CSS property, 'background-size', provides a scale-to-fit feature for background images.
- Other background enhancements - CSS3 backgrounds provide other enhancements that allow compositing of multiple background images together, better control of alignment and positioning, and the ability to establish clip paths for backgrounds.
- SVG backgrounds - The SVG specification implies that HTML/CSS backgrounds should be able to use SVG "images" wherever raster images are used in HTML/CSS, particularly background images. Some recent browsers have added support for this, although sometimes restricting the features that are available within the SVG image (e.g., disable scripting and interactivity).
- Rounded borders - CSS boxes today are fully rectangular. For UI elements, such as buttons, tabs, and container boxes, rounded corners are often desirable. A proposed new CSS property, 'border-radius', allows corners to be rounded. It is already implmeented in latest versions of Mozilla (via -moz-border-radius-*) and WebKit browsers (via -webkit-border-radius-*).
- Border images - See http://www.w3.org/TR/css3-background/#border-images
Comments
Jon Ferraiolo: mostly thumbs up
Most of the features in the CSS3 Backgrounds and Borders spec are of very high value and should be fairly easy to implement.
Lower priority for background clipping.
