Bert Bos | Introduction to CSS3

Introduction to CSS3

Cascading Style Sheets

Bert Bos (W3C) <bert@w3.org>
Looking at the Next Open Web Platform
Boston MA, USA
March 27, 2010

Levels and modules

	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

Three levels and about 40 modules

W3C process

CSS development follows the classification of W3C specifications:

Stable & proven

Stable & being implemented

Almost stable

Not stable

Tables, Lists, Positioning, Generated & Replaced Content, Image Values, 3D Transformations, Fonts, Text Layout…

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

Scaled backgrounds

Scale background image to any size
(including percentages)

Small box


Scaled backgrounds: source

background-image: url(CSS-logo1s.png);
background-size: auto 100%;

(And until the next browser releases:)

-o-background-size: auto 100%;
-khtml-background-size: auto 100%;
-moz-background-size: auto 100%;

Multiple backgrounds

Two backgrounds,
one streched,
one fixed,
tall box

Ditto, small box

Multiple backgrounds: source

Use commas (,)

background-image: url(...), url(...);
background-size: 2em auto, 100% 100%;
background-position: 100% 100%, 0 0;
background-repeat: no-repeat

Grid-based templates

An information display and its implicit grid

Template Layout


Simple example

a→ <h2>...</h2>
b→ <ul class=menu>
c→ <div class=main>

Template Layout: source

body { display: "aaaa" "bccc" }

body::slot(a) {background: url(sea.jpg)}
body::slot(b) {background: black}

h2 {position: a}
ul.menu {position: b}
div.main {position: c}



Gradual changes help users see what is happening


Transitions: source

Proposed syntax:

a:hover {background: red; color: white}
a {transition-duration: 0.6s}

(Experimental implementations:)

-o-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;

Media Queries

One document, many styles:

Media Queries: source

/* Narrow screen */
@media all and (max-width: 30em)
{ ... }

/* Wide screen */
@media all and (min-width: 70em)
{ ... }

The end


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