W3C

Bert Bos | Current work on CSS at W3C

Current work on CSS at W3C

Cascading Style Sheets

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

Web Standards Days,
24 November 2012,
Moscow

Agenda

This talk:

  1. About W3C & me
  2. About CSS
  3. Examples of current work

Part 1

Part 1 – About W3C

Where I work

W3C (World Wide Web Consortium) is a Standards Organization organized as a Consortium

Its standards are called W3C Recommendations

They are made by Working Groups

W3C structure

W3C members

Public

W3C is a forum for users and implementers, as well as a source of information

Standardization process

[image: the path from member-only
    draft to public Recommendation represented as a snakes-and-ladders
    game]

Working Groups, etc.

Liaisons

IETF, ISO, Open Mobile Alliance, ICTSB/ICTSR (Europe), ETSI, ITU, IDPF, etc.

Copyrights & patents

Copyright:

Patents:

Goals

The Web is a continuous communication between people that is
    enhanced by technology: An author has ideas, reflects on them and
    eventually represent them on the Web. Processes on the Web store
    and transports them, maybe filter them, combine them with other
    ideas and extract parts of them. A reader displays them, possibly
    in several different ways, and interprets what he reads.
    Eventually, the reader reacts with ideas of his own and becomes
    author himself.

Vision and principles

Testing vs flexibility

Many implementations
⇒ difficult to change

No implementations
⇒ not sure the specification works

So:

Two implementations

Part 2

Part 2 – About CSS

CSS usage growth

CSS usage has grown from 68% of all Web pages in 2006 to 80% now.
(Error margin unknown. Based on sampling HTML only, no SVG or XML.)

CSS structure – features

CSS has many features. “Feature” isn't a technical term, but is has to do with things that can be tested: each keyword, each kind of selector, each type of value for a property, but also syntax features such as cascading and inheritance. The set of features is still growing, we don't know yet what CSS will eventually consist of.

CSS structure – levels

Originally we didn't intent CSS to be very big. It was to be a simple language that just about everybody could learn, that delivered good typography, but not necessarily complex layouts.

The current level 2 is close in size to what CSS was supposed to be, although we originally wanted something like (grid) layout templates instead of absolute positioning. That was still much too big for the browsers of the time, so we split it in two levels.

We eventually had to leave things out of level 2, too, and at the same time the implementers wanted more (although at a slower speed) and so we decided to add a level 3.

CSS structure – modules

CSS became very popular and professional users wanted us to extend it, rather than design a complementary language. (We did make XSLT and XSL-FO, and they are very successful with book publishers, but not with Web designers.) And so CSS level 3 soon became so big that we couldn't write it all in one specification. It would be too big and take too long.

So we decided to split CSS in modules. Eventually the whole of CSS should be defined by modules and the old level 1 and level 2 specifications will be obsolete.

After some modules were finished, we found that people wanted their features to be extended even more, and we decided that it was best to add a level 4, so that we didn't have to make even more modules, but could keep the same name. Thus, e.g., we have started a Backgrounds & Borders level 4 and a Selectors level 4.

CSS structure – snapshot 1

But there are very many modules and in the Working Group we keep splitting and rearranging modules whenever one of its features turns out to be difficult and risks holding up the easier ones. Modules are thus primarily for the benefit of the Working Group, they are difficult to explain to users.

We decided that users needed something easier. We don't really have the resources to do much for authors (we hope other people will write documentation for them, e.g., via W3C's new WebPlatform.org), but we can do something for one class of users, viz., implementers. We decided to publish a “Snapshot” every once in a while to document the features that were ready to be implemented.

In principle, implementers can implement everything that is a Recommendation or a Candidate Recommendation, but for extra safety our snapshot includes only Candidate Recommendations with which we already had some experience, so that we know they are really stable.

CSS structure – snapshot 2

So far we published two snapshots. Their names aren't very attractive, we know. We just called them after the years we wrote them: 2007 and 2010. Maybe we'll come up with something more catchy for the next one…

The 2010 snapshot differs from the 2007 one only by the inclusion of the Media Queries specification. Of the many drafts we published between 2007 and 2010, only that one was stable enough to be added.

The next snapshot may include one or more of the new Values and Units, Backgrounds and Borders, Multi-column, Image Values and Speech, depending on how we evaluate their stability. We haven't decided that yet.

CSS structure – snapshot 3

2013…

Now we just need a better name than “Snapshot 2013”…

More info: CSS current work page and <www-style@w3.org> mailing list

Part 3

Part 3 – Examples of current work

Currently stable

CSS 2010 snapshot

CSS 2007 snapshot

  • CSS Level 2
  • CSS Style Attributes
  • CSS Namespaces
  • Selectors Level 3
  • CSS Color Level 3

GUIs and books

Priorities for next modules mainly come from two types of applications:

Example 1: Backgrounds & Borders

Candidate Recommendation, seems stable, but not well tested yet

Demos:

Multiple backgrounds & background-size

Border-radius & box-shadow

Example 2: Multi-column Layout

Candidate Recommendation, works in common cases, but still too many bugs

Demo

Two ways to specify columns

Example 3: Flexible Box Layout

Candidate Recommendation, only in Opera so far (plus experimental implementations of old drafts)

Demo

Vertical/horizontal, align, flex

Example 4: Animations, Transforms, Transitions

Working drafts, but expected CR soon

Demo

This box has an animated background

This box has a transform (rotation) and a transition effect (on hover)

The end

www.w3.org/Talks/2012/1124-CSS-Moscow

W3C

To Lead the Web to its full potential

To Anticipate the Trends

To Increase your company value

Join W3C

http://www.w3.org/Consortium/join

or contact: Bernard Gidon <bgidon@w3.org>

Bert Bos <bert@w3.org>
GPG fingerprint: 7744 0204 52A5 14D9 147D
2A13 2D7A E420 184B 5BA4