Bert Bos | The 2010 CSS snapshot and beyond

The 2010 CSS snapshot and beyond

Latest developments for CSS level 3 in W3C

Cascading Style Sheets

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

Presented at:
Iran Web Festival
Tehran, Iran
26 January 2012

Standardization process

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


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


Two implementations

CSS usage growth

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

CSS level 3

CSS's features are grouped into     about 40 modules. The simplest features from each module together     form level 1. Level 2 is a superset of level 2, and level 3 is     again a superset of that.

Three levels and about 40 modules

“When can I use it?”

CSS 2010 snapshot

CSS 2007 snapshot

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

CSS snapshot 2010

The CSS snapshot 2010 consists of all the parts of CSS that     are ready for implementers

CSS Snapshot 2010

Stable & proven

Stable & being implemented

Backgrounds level 3

From the demo:

p {
 background-image: url(CSS-logo1s), url(sea);
 background-size: 2em auto, 100% 100%;
 background-position: bottom right, 0 0;
 background-repeat: no-repeat, no-repeat

Borders level 3

From the demo:

span {
  border: double orange 1em;
  border-image: url(border.png) 27 round stretch;

Backgrounds & Borders summary


From the demo:

div {
  column-width: 20em;
  column-rule: thin solid

Multi-column Layout summary

Media Queries

From the demo:

/* Narrow screen */
@media all and (max-width: 30em)
/* Wide screen */
@media all and (min-width: 60em)

Well advanced

Not stable

Tables, Grid Layout, Positioning, Generated & Replaced Content, Image Values, 3D Transformations, Lists, Animations…

(Apart from the properties that were already in level 2, of course)

Image values module

Grid Layout

Grid – history (1/2)

1996: idea to flow text into a 2D template: “frame-based layout” (nothing to do with Netscape's FRAME element)

1998: too advanced for browsers; compromise is “absolute positioning”

div { position: absolute;
  top: 100px; left: 25px }

Grid – history (2/2)

Now: renewed interest. Two competing modules: “template layout” and “grid layout.”

body {display: "a b"
               "c d"}
div {position: b}

(Syntax may change)

Regions: connected flows

Image:    first page of an article with 3-column layout

@page :first {

  display: "a a e"
           "a a e"
           "b b e"
           "c d e";

  chains: b c d e

Regions: shapes

Shape text inside a path:

div {
   circle(...) }

Image: a circular     paragraph floating in the middle of another paragraph

Shape a floating image:

img {
 float: left;

The transparent parts implicitly define a shape.

Writing Modes

Non-japanese letters in vertical Japanese text can be written      both upright or sideways. The word “Mac” in this text from a magazine occurs both ways in      the same paragraph.



Pages instead of scrollbars

The CSS WG is experimenting with pagination instead of continuous displays (scrollbars)

div { overflow: paged-x }

The end



To Lead the Web to its full potential

To Anticipate the Trends

To Increase your company value

Join W3C


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

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