Bert Bos |
Introduction to CSS3
Introduction to CSS3
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Bert Bos (W3C) <bert@w3.org>
Looking at the Next Open Web Platform
Boston MA, USA
March 27, 2010
W3C process
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
CSS
development follows the classification of W3C
specifications:
- stable
↑ Recommendations
- Proposed Recommendations
- Candidate Recommendations
- Last Working Drafts
- unstable
↓ Working Drafts
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
Bigger
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
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
Template Layout
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
| a→
| <h2>...</h2>
|
| b→
| <ul class=menu>
...
</ul>
|
| c→
| <div class=main>
...
</div>
|
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}
[demo]
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;
![[screendump]](demo1.png)
