Positioning On All Three Axes
The idea behind positioning is fairly simple. It allows the author to define exactly where element boxes will appear, relative to where they would ordinarily be — or relative to the browser window itself. The power of this is both obvious and surprising. What shouldn't be too surprising is that this is the part of CSS2 that both major browsers are currently trying to support.
Unfortunately, positioning support is sketchy enough that it's almost impossible to provide working examples. But the effects are easy enough to describe. Let's say you have a page laid out in a three-cell table something like this:
| Cell 1 | Cell 2 |
| Cell 3 |
Once you break it down, of course, you have three chunks of information — the contents of each cell. So let's get rid of the table markup, and wrap each chunk of information in <DIV> tags. Now we simply add some positioning rules, and discover that the page looks just as it did to begin with, except without any table markup whatsoever!
We can take this further. Using positioning markup, it is possible to recreate frame-type layouts without any sort of frames markup whatsoever. With just a few declarations, all of the content in a single document can be arranged in a way that only frames could do before — and all of the information is in a single page. No more messing around with <NOFRAMES> tags and duplication of content across multiple documents. Positioning can take care of all of this!
In my opinion, this is the single most important new area of the CSS2 specification. It can make the job of web authors much easier, allow for document display in any browser, and make it much easier for search engines to index documents. It is hoped that both Microsoft and Netscape put implementation of this section of the CSS2 specification very high on their respective "to-do" lists (right below creating a full, stable implementation of CSS1).
In a sort of accompaniment to the positioning properties that let you set an element's horizontal positioning, z-index lets you determine an element's "vertical" position. Since (thanks to positioning properties) elements can overlap each other, it makes sense that you should be able to define which are "in front" or "on top" of others. That's what z-index will do.
A Whole New Generation
Generated content is a new way of adding things to your content without having to alter the content itself. In its basic form, this is done by using the pseudo-elements :before and :after, and the property content. Here's a basic example — given the following markup fragments:
P:before, P:after {content: "\""; color: red;}
<P>This is a quote.</P>
then the browser will display the following:
"This is a quote."
How about that? Note that the double-quote mark was escaped out (i.e., preceded by a back-slash). This is necessary, since text values for content must be enclosed in double-quote marks. You could also place images before (or after) content, using something like P:before {content: url(para.gif);}
P:before {content: url(para.gif) " -- ";}
This would cause each paragraph to be started with a paragraph symbol (as noted by para.gif), a blank space, two dashes, and then another blank space. Note that all of this is considered part of the paragraph, and is inlined within it. You cannot, however, apply styles to the generated content; the content will simply inherit the styles of its parent element (a paragraph, in the above example).
Turning back to the subject of quotation marks for a moment, there is a property designed specifically to help you insert quote marks in a language-specific way. It's called quotes (duh), and is generally used along with the :lang pseudo-class. Here's an example:
quotes:lang(fr) {};
Finally, there is something that many of you will rejoice over. It's a way to define your own ordered-list patterns using the properties counter-increment and counter-reset along with content. You will be able to define your own numbering schemes in an almost programmatic way. Here's a quick example:
H2:before {content: "Chapter " counter(chapter) "."
counter(subchapter);
counter-increment: subchapter;}
This would result in subchapter headings which looked something like this:
<H2>Defusing the Situation</H2>
2.3 Defusing the Situation
Every time an <H2> is encountered, the value of subchapter is incremented by one (or whatever value you declare). If you want to set the value of a counter variable to a certain number, you would use counter-reset. This is a fairly complex topic, which as usual I can't take the space to cover here. Look for a future article on this topic.
Heights, Widths, and Sizeable Fun
Yes, CSS1 has width and height. In CSS2, though, positioning makes it necessary to be able to define certain ranges of sizes, not just a specific percentage, or pixel width, or whatever. Thus we have min-width and max-width, and min-height and max-height. These properties let you define the upper and lower limits of the size of a given element. Of course, you can also set height and width, but the browser can override these settings if necessary. Just in case you have some hard limits, these properties will let you set them.
Given this, however, what happens if your maximum height and width doesn't leave enough space for the element's content? In that case, you'll want to turn to the overflow property. With this property, you can define whether the browser should override the element's size to display the content; the content should be "clipped" at the boundaries of the element; or the browser should put in a scrollbar so that you can get to all of the content, even if it isn't immediately visible. If you choose to clip the content, you will probably want to invoke the clip property. This is sort of like padding, except it defines the area of the element in which content is visible -- and, by implication, those areas in which content is not visible.
Speaking of things being visible, there is also a new property called visibility. Basically, you can set something to be either visible or hidden. If the element is hidden, it will still occupy just as much space on the page as though it were visible. This is different from display: none;, which causes the browser to act like the element doesn't even exist.
Environmental Issues
CSS2 offers the ability to both alter the browser's environment and to integrate its look more closely to that of the user's operating system. To achieve the former, we have the cursor property, which lets you declare what shape the browser's cursor will take as it passes over a given element.
For instance, if you want to make a humorous point about download times, you can change the cursor to the wait-cursor. This causes an hourglass or watch to appear when the cursor passes over hyperlinks. You can even hook this property up to "cursor files" (which are not defined by the specification), so you could class your anchors based on where they go and load different icons for each type of link. For example, off-site links could cause the cursor to change into a globe, while links intended to provide help could trigger a question-mark cursor.
In order to let web pages more closely match the user's desktop environment, there are a whole list of new color keywords like ButtonHighlight, ThreeDShadow, and GrayText. These are all intended to use the colors of the user's operating system. In all, there are 27 of these new color keywords, so I won't list them all here. If you really want to know what they are, see the sidebar that accompanies this article. Note: While these values are defined to be case-insensitive, authors are encouraged to use mixed case for reasons of legibility.
Even More Borders
In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as border-top-width, border-color, and border. CSS2 adds a few more border properties, like border-right-color and border-bottom-style, pretty much all of which are aimed at giving the author more control over borders. Under CSS1, it was difficult to set a specific color or style for a given side of the border, except through properties like border-left, which required more than one value. The new CSS2 properties address this, and are pretty much self-explanatory.
Tables and Columns
CSS2 includes a huge array of properties that apply directly to tables and table cells. There are 10 new values for display: table, inline-table, table-column-group, table-column, table-row-group, table-row, table-cell, table-caption, table-header-group, and table-footer-group.
While most of these have obvious effects from their very names, at least two may not be familiar to you. table-header-group and table-footer-group are used to mark the headers and footers of tables. These headers and footers are displayed, respectively, above or below all the rows of the table, but not outside of the table's caption.
Familiar to HTML veterans, row-span and col-span are basically the same as the HTML attributes for table cells. In CSS, however, these properties can be applied to a cell, a column, or a column-group.
Among the new properties found include:
cell-spacing: Influences the placement of borders around cells.border-collapse: Can be used to influence how cell borders interact.empty-cells: Defines whether empty cells are shown or hidden.table-layout: Tells the browser whether or not it can resize the table as necessary.
There are also rules describing how visibility and vertical-align are applied to tables. The caption-side property functions exactly the same as the ALIGN attribute on the CAPTION tag in HTML 4.0. Additionally, the property speak-header-cell controls how header cells are handled by speech-generating browsers (more on that later).
Media Types and "@" Rules
Don't get too excited yet...I'm not talking about media types in the sense of things like audio and video authoring. Well, not exactly, anyway. Instead, what you can do is create rules for presentation in various kinds of media.
The defined types of media are: screen, as in a computer screen; print, for things like printouts or "print-preview" displays; projection, for projected presentations, such as slide shows; braille and embossed for tactile feedback devices and printers; aural for speech generators; tv for television-type displays (think WebTV); tty for fixed-width character displays; handheld, for palmtop computers; and the ubiquitous all. These are all values of @media, which is one of several at-rules.
Others include:
@font-face: Is used in the definition of a font and employs all those font-descriptor properties I mentioned in the section on fonts.@charset: Is used to define the character set being used for the document.@import: Has a bit more power than CSS1 gave it.@page: Allows you to define the size of a page in paged-media style sheets, among other things.
Paged Media
Since I just brought up paged media, I should probably mention that there are some new properties which apply to such media. Four of them apply to page breaks and where they appear: page-break-before, page-break-after, orphans, and widows. The first two are used to control whether or not a page-break should appear before or after a given element, and the latter two are common desktop-publishing terms for the minimum number of lines that can appear at the end or beginning of a page. They mean the same thing in CSS2 as they do in desktop publishing.
The pseudo-classes :first, :left, and :right are used to specify to which page styles are applied. This is useful for setting margins to allow for binding of the printed pages, or for setting certain styles in the first paragraph on the first page of the document.
There is also size, which is simply used to define whether a page should be printed in landscape or portrait mode, and the length of each axis. If you plan to print your page to a professional printing system, you might want to use marks, which can apply either cross- or crop-marks to your page.
The spoken word
To round things out, we'll cover some of the properties in the area of aural style sheets. These are properties which help define how a speaking browser will actually speak the page. This may not be important to many people, but for the visually impaired, these properties are a necessity.
First off, there is voice-family, which is much the same as font-family in its structure: The author can define both a specific voice and a generic voice family. There are several properties controlling how the page is read. speech-rate is responsible for controlling how fast or slow the page is read, while pitch, pitch-range, stress, richness, and volume control a given voice.
There are also properties that let you control how acronyms, punctuation, dates, numerals, and time are spoken. There are ways to specify audio cues that can be played before, during, or after a given element (such as a hyperlink); ways to insert pauses before or after elements; and even the ability to control the apparent position in space from which a sound comes by using the properties azimuth and elevation. With these last two properties, you could define a style sheet where the text is read by a voice "in front of" the user, whereas background music comes from "behind" and audio cues come from "above" the user!
Whew!
Well, that pretty much wraps up our look into What's New in CSS2. There is a lot of new power, and this extremely broad overview doesn't do justice to the depth of the new specification.
For example, assuming a decent browser implementation, it should be simple to set up a page that looks like it's frame-based by using the positioning properties — and yet have it print out very professionally, including page numbers, multiple columns, and margins that leave room for three-hole punching, all thanks to paged-media rules.
You don't even have to worry about whether or not the user will print out the correct frame, because the print-media style sheet is used when printing, and besides, there are no frames. The user just hits "Print..." and the document's content prints! Furthermore, that very same page can use other style sheets to deliver the content to people who are visually impaired, either through braille or the spoken word, and even be used for a presentation to a packed conference session.
Hopefully, this has given you a good taste of what's coming in the world of style sheets. So long as the browser vendors keep improving their style sheet implementations, web authors everywhere will be able to vastly enrich their pages and make them available to a broader audience.
Playing for Position
Surviving the Tall Grass
A Quick Tour of CSS2
