Bert Bos | Introduction to CSS3
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
To view: switch to full screen
(With Javascript: press A)
Bert Bos (W3C) <bert@w3.org>
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
CSS development follows the classification of W3C specifications:
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
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)
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Scale background image to any size
(including
percentages)
Orig.:
Small box
Bigger
box
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
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%;
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Two backgrounds,
one streched,
one fixed,
tall box
Ditto, small box
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Use commas (,)
background-image: url(...), url(...); background-size: 2em auto, 100% 100%; background-position: 100% 100%, 0 0; background-repeat: no-repeat
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
An information display and its implicit grid
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
Simple example
a→ | <h2>...</h2>
|
---|---|
b→ | <ul class=menu>
|
c→ | <div class=main>
|
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
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
[demo]
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
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;
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
[demo]
One document, many styles:
<link media="…"
<style media="…"
@media …