![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
New features in CSS3
This section introduces you to the new features that can be found in the CSS level 3 specifications—including new CSS selectors such as structural, state-based, and negation pseudo-classes, as well as other new types of selectors. It also shows many of the effects that CSS3 offers that would previously have required images to be created using a separate application and saved as GIF, JPG, or PNG. Such effects include drop shadows on text and boxes, rounded corners on borders, and the use of opacity to create a translucent appearance. Many of these features (such as opacity and rounded corners) are relatively widespread in use due to the fact that they degrade very gracefully in legacy Web browsers. Next, you will learn about the new multicolumn layouts that can be created using CSS3. These layouts are a throwback to the newspaper layout where text will stretch over a set number of columns or to a particular column width as required. Another feature that will be discussed is the issue of including non-standard Web fonts using the @font-face tag. Finally, some of the other new CSS3 features will be introduced, such as support for HSL (Hue, Saturation, and Lightness) and RGBA (Red, Green, Blue, and Alpha) color models.
A CSS selector refers to the manner in which HTML element(s) are styled
using a stylesheet. For example, to put a border around all
<div> elements you would use the selector div:
div { border: 1px solid #000; }.
To apply a background color to all elements with the class highlight
you would use the selector .highlight:
.highlight { background-color: yellow; }.
Finally, to change the width of an element with an ID attribute value
of myDiv, you would use:
#myDiv { width: 250px; }.
Of course, these selectors can be combined, so to select all
<div> elements with the class
highlight, you would use
div.highlight, or to select the
<div> element with the ID myDiv you would use
div#myDiv.
In addition to these straightforward selectors, CSS also includes (and
has done since previous versions) a series of more complex selectors.
For example you can use the selector input[type="text"] to select only
the input elements that contain an attribute type with the value of
text. Or you can use the pseudo-class
:hover to style an element when the mouse
is over it, for example:
a:hover { color: red; }.
There are many more of these selectors, all of which are provided to make it easier to select an element to style. With CSS3, even more new selectors have been added to the mix, all of which make developers' lives easier and reduce the amount of HTML and JavaScript they need to write.
- E[foo^="bar"]
- Select an element, E, whose
fooattribute begins exactly with the stringbar - E[foo$="bar"]
- Select an element, E, whose
fooattribute ends exactly with the stringbar - E[foo*="bar"]
- Select an element, E, whose
fooattribute contains the stringbar
- E:root
- Select an element, E, the root of the document (the <html> tag)
- E:nth-child(n)
- Select an element, E, the n-th child of its parent element
- E:nth-last-child(n)
- Select an element, E, the n-th last child of its parent element
- E:nth-of-type(n)
- Select an element, E, the n-th sibling of its type
- E:nth-last-of-type(n)
- Select an element, E, the n-th last sibling of its type
- E:last-child
- Select an element, E, whose is the last child of its parent element (Note that E:first-child was previously defined in CSS2)
- E:first-of-type
- Select an element, E, the first sibling of its type
- E:last-of-type
- Select an element, E, the last sibling of its type
- E:only-child
- Select an element, E, the only child of its parent element
- E:only-of-type
- Select an element, E, the only sibling of its type
- E:empty
- Select an element, E, that has no children (including text nodes)
- E:target
- Select an element, E, who is the target of the referring URI
UI element states pseudo-classes
- E:enabled
- Select a user interface element, E, which is enabled
- E:disabled
- Select a user interface element, E, which is disabled
- E:checked
- Select a user interface element, E (a radio button or checkbox), which is checked or selected
- E:not(s)
- Select an element, E, which does not match the simple selector s
- E ~ F
- Select an element, F, which is preceded by an element, E
Browser support for the new attribute selectors and the general sibling combinator is excellent, as they work on almost all modern Web browsers. Support for the new pseudo-classes is included with the latest versions of most browsers, but you may need to include fallbacks for older browsers such as Internet Explorer 6/7 and Firefox 3.0.
Although the new selectors are probably the features that reduce developers' headaches the most, the enhancements people most want to see are the shiny new effects that are available. These are facilitated through a slew of new CSS properties, including:
- background (now supports multiple backgrounds)
- background-clip
- background-origin
- background-size
- border-radius (rounded corners)
- border-image
- border-color (gradient borders)
- box-shadow (drop shadow on boxes without images)
- box-sizing
- opacity
- outline-offset
- resize
- text-overflow
- text-shadow
- word-wrap
The sample HTML5/CSS3 Web page you'll create at the end of this tutorial will show some of these new effects in action.
CSS3 multicolumn layouts allow for text to be spread over a number of columns, like you might find in a newspaper. This can be done in two ways, either using the column-width property, where you define how wide each column should be (the number of columns is determined by the space available to the container), or using column-count, where you define the number of columns that should be used. The width will then vary based on the space available to each column.
Other features of multicolumn layouts include the column-gap property, which allows the developer to define the space that should be present between columns when the column-width method is used. Another useful addition is the column-rule property, which allows a border-style rule to be placed between columns. Finally there is the column-space-distribution property, which determines how left over space should be allocated between the columns.
Multicolumn layouts are currently supported by Mozilla and WebKit browsers. At present, these are implemented by means of temporary proprietary properties prefixed with -moz or -webkit, respectively. When the specification has been finalized, these browsers will eventually move to the CSS standard properties.
Web fonts were actually proposed for CSS2 and have been available in Microsoft Internet Explorer since version 5. Unfortunately, this required the use of the proprietary .eot (Embedded Open Type) font format, and none of the other browser vendors chose to implement it. As a result, Web fonts never really took off on CSS2-based Web sites.
With the latest versions of Firefox, Safari, Chrome, and Opera, however,
you can now use the @font-face rule to use any licensed .ttf
(TrueType) or .otf (OpenType) font on your Web page. An example of the
@font-face rule is as follows:
@font-face { font-family: Alexa; src: url('Alexa.otf'); }.
You can now use this font in your own CSS rules, such as:
article p { font-family: Alexa, Arial, Helvetica, sans-serif; }.
Remember that fonts are like images—if they are not your own you may need permission to use them on the Web. Alternatively, you can pay for (or download for free) some royalty-free fonts that can be included on your Web pages as you please.
CSS3 also includes many other new features, including support for new color values, notably HSL (Hue, Saturation, Lightness) and two color values with alpha properties—RGBA (Red, Green, Blue, Alpha) and HSLA (Hue, Saturation, Lightness, Alpha). Media queries will allow you to define different styles for different devices based on their viewport size. For example, you can provide specific styles for devices with a viewport of less than 500 pixels (such as a smartphone, PDA, or other mobile device). CSS3's speech module allows you to control properties of the speech of a screen reader, including voice volume, balance, rate, stress, and more.
Table of contents
Next steps from IBM
Identify system and application bottlenecks with Rational Performance Tester. With Rational Functional Tester get enhanced support for Adobe Flex 3.0, Java 1.6, and the Dojo Toolkit.
- Try: Download a free trial version of Rational Functional Tester for regression testing and Rational Performance Tester to identify system and application performance problems.
- Article: See how easy it is to function test Web applications in Mozilla Firefox with Rational Functional Tester.
- Tutorial: Learn how Rational Functional Tester captures your interactions with an application into a Javascript and how to test application user interfaces.
- Demo: In this demo you can see how to create a performance test script using Rational Performance Tester.
- Buy: Rational Functional Tester
