What's Coming in CSS 3.0: A Web Developer's Perspective
CSS 3.0 Spec Syntax: border-image <border-image-source>|<border-image-slice>|<border-image-width>|<border-image-outset>|<border-image-repeat> Firefox Implementation Syntax: -moz-border-image <border-image-source>|<border-image-slice>|<border-image-width>|<border-image-outset>|<border-image-repeat> Safari/Webkit Implementation Syntax: -webkit-border-image <border-image-source>|<border-image-slice>|<border-image-width>|<border-image-outset>|<border-image-repeat>
Besides specifying colors, you can use an image for the border. The above syntax is the shorthand property. There are five properties to set. There is a lot of information to cover on these and is out of the scope of this article.
There are a few new options to handle text and the way text is displayed.
Syntax: word-wrap: break-word|normal
Have you ever created a box that had a width set, but was a little too small for a long word? You can use the word-wrap property to wrap really long words. In figure 7, you will see the text without word-wrap and the text with it.
Syntax: text-shadow: <horizontal offset value> <vertical offset value> <blur radius> <color>
Text-shadow works similar to the box-shadow property discussed earlier. This property creates a shadow under the text specified. You can even create multiple shadows on the text. You can even specify multiple shadows giving the text a glow or outline. This works in almost all browsers except IE.
There are not a lot of new features proposed for backgrounds properties. This biggest one is background layering. Several of the background properties have been updated to allow for multiple values to support layering.
CSS 3.0 allows for multiple background layers. By separating the background properties with commas, you can specify several layers. The size, position, and tiling are set using comma separated values. In figure 9, you will see that we have 3 images set for the background, and then the "position" is set for each image.
background-image: url(sky.png), url(sun.png), url(kite.png); background-position: top left, top right, center center;
CSS 3.0 Spec Syntax: background-origin: border-box|padding-box|content-box Firefox Implementation Syntax: -moz-background-origin: border|padding|content Safari/Webkit Implementation Syntax: -webkit-background-origin: border|padding|content
The background-origin property determines the position of the background. There are three values, border-box, padding-box, and content-box. These values correspond to the box models, border, padding, and content areas. The position is set relative to the value. This means that if you set it to padding-box, the background position will be relative to the box's padding.
CSS 3.0 Spec Syntax: background-clip: border-box|padding-box Firefox Implementation Syntax: -moz-background-clip: border|padding Safari/Webkit Implementation Syntax: -webkit-background-clip: border|padding
The background-clip property determines the background painting area. There are two values, padding-box and border-box. As with the background-origin property, the padding-box and the border-box correspond to the box models padding and border areas. Figure 9 gives an example of the background-clip and background-origin properties.
We discussed a lot of new proposals for CSS 3.0. Keep in mind this article was an introduction. If you want more information, you can check out the W3C for more information (http://www.w3.org/Style/CSS/). Even though several browsers have implemented these features, there is no guarantee these will be in the final specifications.