Bert Bos | The
2010 CSS snapshot and beyond
The 2010 CSS snapshot and beyond
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Latest developments for CSS level 3 in W3C
Bert Bos
(W3C) <bert@w3.org>
Presented at:
Iran Web Festival
Tehran, Iran
26 January 2012
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 team
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- 65
- Hosts
- France – Sophia-Antipolis (ERCIM) ← me 43.6145° 7.0695°
- USA – Cambridge, MA (MIT)
- Japan – Tokyo (Keio Univ.)
- … and colleagues all over the world
- Technical, administrative/management, systems support
W3C members
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- ± 350
- Companies
- computer, telecom, documents, finance,
healthcare…
- Universities
- Research laboratories
- Government departments
- …
Public
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Mailing lists
- Workshops, seminars, tutorials…
- Web site
W3C is a forum for users and implementers, as well as a source
of information
Working Groups, etc.
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Workshops
- Community Groups & Business Groups
- Working Groups
- HTML WG
- CSS WG ← me
- XML Core WG
- … ±40 more
- Interest Groups
- Coordination Groups
Copyrights & patents
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Copyright:
- Specifications – free to copy, not allowed to modify
- Software – Open Source (free to copy and
modify)
Patents:
- Royalty Free…
- … as far as in our power
Vision and principles
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- For all (a11y,
i18n)
- On everything (devices)
- Semantic Web (re-usable)
- Trust (privacy, security)
- Symmetric (read & write)
- Maintainable, durable, stable
- Modular, extensible
- Easy to learn, to implement
- Efficient, robust
- Backward compatible
- …
Testing vs flexibility
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Many implementations
⇒ difficult to change
No implementations
⇒ not sure the specification works
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
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Multiple overlaid backgrounds
- Resize background images
- Images as borders
- Rounded corners
- Box shadows → Box shadows
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
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Let CSS set size of image? – yes
- Since level 1 (fg), since level 3 (bg)
- Let CSS rotate image? – maybe
- Planned: 'image-orientation'
- Let CSS create images? – probably
- Let CSS blur, enhance, colorize, etc.? – no
- But planned to allow SVG filters [demo]
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: shapes
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Shape text inside a path:
div {
shape-inside:
circle(...) }
Shape a floating image:
img {
float: left;
shape-image-threshold:
0.1;
}
The transparent parts implicitly define a shape.
Writing Modes
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Vertical text (Japanese, Chinese…)
- Mixed vertical/horizontal text
- Mixed vertical/bidi text
- Rotated letters
Text
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- White space
- Underlining & other decorations
- Hyphenation
- Justification styles, etc.
Fonts
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- Embedded (downloadable) fonts
- Stretching and other variations
- Swash letters, ligatures, kerning
- Low-level access to TrueType/OpenType
Pages instead of scrollbars
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
The CSS WG is experimenting with pagination instead of
continuous displays (scrollbars)
- E-books
- Slide shows (projection mode)
div { overflow: paged-x }
