CSS 10 years after


CSS Bert Bos

Cascading Style Sheets

Bert Bos (W3C) <bert@w3.org>

May 9, 2007
Banff, Canada

● ● ◦ ● ●

The big news?

CSS level 2!

● ◦ ● ●

The CSS Working Group decided that the last draft for CSS 2.1 was stable. Only a few small details were changed in response to comments since last November and the Candidate Recommendation is expected in the next few days.

Why “big news”? It has no new features, only details changed, but:

You've probably already noticed improvements in interoperability among browsers. The biggest change is probably in Internet Explorer. All browsers, including IE, still have bugs, but that is why CSS level 2 is a Candidate Recommendation and not a Recommendation yet.

We are working on expanding the test suite. With a bit of luck, we may have a new W3C Recommendation for CSS level 2 around the start of 2008.

What does this mean?

… for the future of the Web page?

◦ ● ◦ ● ●

CSS2 is the basis for an updated Mobile Profile, which we expect to be finalized before the summer. At the moment, there are two such profiles in the world, one by W3C and one by the OMA. The new one is written jointly by W3C and OMA. The two old ones were not very different, but from now on there will only be one.

Indeed, the progress of mobile devices is such that many already do all of (the revised) CSS2 and are even starting some parts of CSS3. Maybe there will be another mobile profile in a few years to define the baseline for the next generation of phones, but it may not even be needed. The future Web page will work on mobile devices, as long as it is reasonably well-designed.

CSS was always meant to be used for print as well as for screen, but the demand has been low until recently. That has changed, and there are now excellent batch formatters and even printers with CSS built into their firmware.

Your nice Web page can now be nicely printed as well, and there are a couple of new modules for CSS in the works that can make the print-out even better: running headers and footers, columns, footnotes, floating images at the top of the page, cross-references, dot-leaders, etc. There are experimental implementations of some of these features already.

As browsers are getting more reliable, designers are using more and more complex layouts. If the window is large enough, you can put several items side by side, in an order that is determined by the available space, rather than the order in the source document.

It is nice that floats, positioning, and now even CSS tables are reliable enough to do these kinds of tricks, but at the same time it becomes clear that these parts of CSS weren't designed for such things. Floats only get you so far and the style sheet quickly becomes unreadable. Absolute positioning can put things anywhere, but then it becomes verydifficult to keep them from overlapping. Something is needed that combines the best features of both models.

So it seems that the box model of CSS is now well enough implemented in browsers that we can build an extension on top of it. The most developed such proposal is called Advanced Layout and its basic idea is that the designer draws a grid in the style sheet (literally, with ASCII graphics) and the elements of the document are aligned to that grid, out of order, if necessary. There is an (incomplete) prototype implementation (in Javascript).

We're also working on other proposals, such as ways to declare that an absolutely positioned element acts like a float in the sense that other text wraps around it. That is possible under certain conditions only, but worth investigating. We're also looking at other ways to specify positions for absolutely positioned elements. The Advanced Layout module defines a grid and the positions in it are identified by letters, which avoids the need to compute and x-y coordinates. Likewise, once we have multiple columns, we can identify positions relative to those columns, using small numbers instead of percentages or pixels.

With a robust box model it also become possible to turn boxes sideways without breaking anything, and that is precisely what is needed for vertical text, such as is common in Japanese. Along with that, there will be several new properties that are maybe not so useful for English typographers, but that are essential for the typographic traditions of some other languages: where can lines be broken, how to justify text if there are no spaces, several types of emphasis other than bold, italic and underline, indic baselines (which are at the top of the letters rather than at the bottom), etc.

There are several other, smaller extensions in the works. Rounded corners are getting back into fashion, the sixties are back. So it is time that CSS enhances the border properties to allow rounded shapes and multicolored borders. Sometimes it's easier to put the shapes in the background than in the border, for example to allow content to overlap the “border” and so the backgrounds and borders are extended together.

Other WGs in W3C are working on compound document formats and new formats that combine parts of other formats. For example, the WICD1 compound document format defines rules for HTML documents with SVG images (because that is a bit more complex than with bitmap images) and it looks like the new MathML3 that is under development will find a place in some version of HTML as well. And that latter fact (long overdue!) means that CSS will need new tricks to handle math.

In fact, math on the Web is developed along two parallel tracks. There is the full MathML3, meant to be handled by a dedicated renderer (much like SVG), except that it is integrated in a CSS renderer, because math is very often used inline in some other text. In this case, CSS can influence the rendering (as in SVG), but the basic layout is implicit in the fact that it is math.

The other track is a subset of MathML3, for which the Math Working Group just published the first draft, and which can be rendered without a dedicated renderer, just by using CSS. Except that CSS2 isn't quite enough to arrive at a reasonable subset of MathML, and thus there will be at least one and almost certainly two new properties in CSS3 to handle the alignment of built-up formulas (handled as an inline table of which the baseline can be placed at arbitrary rows) and to handle symbols that don't have a font size, but that stretch to the size of their box.

The end


◦ ● ● ● ●

Maintenance vs innovation?

Extend existing technology – requires tech to be error-free and well-supported; Replace existing technology – sometimes cheaper, sometimes not.

CSS still cheaper to extend than to replace – hence the maintenance

◦ ● ● ◦

CSS2 or CSS3?

Levels were a way for the WG to spread the work in time. So many extensions demanded that we switched from levels to modules, to work in parallel.

Levels/modules mean nothing else.

Implementers implement what their platform & resources allows.

Authors use what is sufficiently supported.

◦ ● ● ◦ ●