the css of tomorrow (front row 2011)
DESCRIPTION
Completely updated version of my talk, given at Front Row 2011 in Krakow, in October 2011. Contains links and brief annotation.TRANSCRIPT
![Page 1: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/1.jpg)
THE CSS3 OFTOMORROW
PETER GASSTON@STOPSATGREEN
BROKEN-LINKS.COM
![Page 2: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/2.jpg)
![Page 3: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/3.jpg)
![Page 4: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/4.jpg)
![Page 5: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/5.jpg)
“35 Awesome CSS3 Examples!”
“50+ Best CSS3 Examples!”
“350+ Amazing CSS3Resources - All You'll Ever
Need to Become a CSS3 Master!”
![Page 6: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/6.jpg)
CSS3 TODAY
border-radius: 5px;
box-shadow: 2px 2px 4px #000;
text-shadow: 4px 4px 2px #000;
![Page 7: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/7.jpg)
BACKGROUNDS & BORDERS
background-image: url('img1.png'), url('img2.png'), url('img3.png');
border-image:url('img1.png')20 25 20 25 stretch;
![Page 8: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/8.jpg)
SELECTORS
:first-child | :last-child
:first-of-type | :last-of-type
:nth-child() | :nth-last-child()
:nth-of-type() | :nth-last-of-type()
![Page 9: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/9.jpg)
OPACITY, ALPHA & COLOUR
opacity: 0.5;
color: rgba(255,0,0,0.5);
color: hsl(0,100%,50%);
color: hsla(0,100%,50%,0.5);
![Page 10: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/10.jpg)
WEB FONTS
@font-face { font-family: 'My Font'; src: url('/path/to/font.woff');}
h1 { font-family: 'My Font'; }
![Page 11: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/11.jpg)
MEDIA QUERIES
@media all and (min-device-width: 480px)
@media all and (pixel-ratio: 2)
@media screen not (monochrome)
@media screen and (max-device-width: 640px) and (touch-enabled: 1)
![Page 12: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/12.jpg)
![Page 13: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/13.jpg)
GRADIENTS
linear-gradient(45deg,red,yellow);
repeating-linear-gradient(red,blue 10%);
radial-gradient(circle cover,red,blue);
repeating-radial-gradient(red,blue 10%);
http://leaverou.me/css3patterns/
![Page 14: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/14.jpg)
TRANSFORMATIONS
transform: rotate(45deg);
transform: rotate3d(1,1,0,45deg);
http://westciv.com/tools/transforms/
![Page 15: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/15.jpg)
TRANSITIONS & ANIMATIONS
@keyframes foo { from { color: #f00; } 50% { color: #00f; } to { color: #0f0; }}
div { animation: foo 1s linear; }
transition: all 2s 500ms ease-in;
![Page 16: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/16.jpg)
TRANSITIONS & ANIMATIONS
http://daneden.me/animate/
![Page 17: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/17.jpg)
![Page 18: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/18.jpg)
![Page 19: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/19.jpg)
MULTIPLE COLUMNS
div { column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00;}
h2 { column-span: all; }
Implemented fully in Chrome, Opera, Safari, coming in IE10, in Firefox but using -moz- prefix.
![Page 20: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/20.jpg)
![Page 21: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/21.jpg)
FLEXIBLE BOX LAYOUT
A Bdiv { display: flexbox; }.a,.b { width: 40%; }
A B.a,.b { width: flex(1); }
A B.a { width: flex(3); }.b { width: flex(2); }
Currently in Chrome, Firefox, Safari, coming in IE10, but all use an older syntax; you can read more about this in an article I wrote: http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained
![Page 22: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/22.jpg)
FLEXIBLE BOX LAYOUT
a
.a { flex-align: center; flex-pack: center; width: flex(0);}
c
a
b
div { flex-flow: column; }.a,.b { flex-order: 2; }.c { flex-order: 1; }
![Page 23: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/23.jpg)
GRID LAYOUT
div { display: grid; grid-columns: 1fr 1fr 2fr;}
div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 80px auto 10em;}
Coming in IE10, work apparently underway in WebKit too. Latest spec: http://dev.w3.org/csswg/css3-grid-align/
![Page 24: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/24.jpg)
GRID LAYOUT
article { grid-column: 2; grid-row: 2; grid-column-span: 2;}
![Page 25: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/25.jpg)
GRID LAYOUT
a
b
c
.a { grid-cell: a; }
.b { grid-cell: b; }
.c { grid-cell: c; }
a b c
div { grid-template: 'abc';}
![Page 26: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/26.jpg)
GRID LAYOUT
a
b c
div { grid-template: 'aa' 'bc';}
a
b
cdiv { grid-template: 'acc' 'a.b';}
![Page 27: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/27.jpg)
![Page 28: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/28.jpg)
REGIONSa
b
.a { flow-into: foo; }
.b { flow-from: foo; }
b
c
d
e
.b, .c, .d, .e { flow-from: foo;}
@region .b { color: #f00 }
Currently in IE10: http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSConnected and in an experimental WebKit build, using a different syntax: http://labs.adobe.com/technologies/cssregions/. Latest spec: http://dev.w3.org/csswg/css3-regions/
![Page 29: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/29.jpg)
LINE GRID
article { layout-grid-line: 1.5; }
h1 { layout-grid-mode: block;}
p { layout-grid-mode: line; margin-bottom: 1gd;}
Not currently implemented. Latest spec: http://dev.w3.org/csswg/css-line-grid/
![Page 30: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/30.jpg)
EXCLUSIONS
div { shape-outside: circle(50%, 50%, 50px); wrap-flow: both;}
Currently only in an experimental WebKit build, with a different syntax: http://labs.adobe.com/technologies/cssregions/. Latest spec: http://dev.w3.org/csswg/css3-exclusions/
![Page 31: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/31.jpg)
EXCLUSIONS
div { shape-inside: polygon(150px,0 0,300px 300px,300px);}
![Page 32: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/32.jpg)
![Page 33: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/33.jpg)
PAGED MEDIA
@media paged { height: 100%; overflow: paged-x;}
<link rel="next" href="p2.htm">
@navigation { nav-right: link-rel(next);}
Currently only in an experimental Opera build: http://people.opera.com/howcome/2011/reader/index.html
![Page 34: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/34.jpg)
FILTER EFFECTSimg { filter: grayscale(0.25); }
img { filter: blur(5,2) sepia(1); }
Currently unimplemented. Latest spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html
![Page 35: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/35.jpg)
SHADERS
img { filter: custom(url(foo.fs), 20 20, phase 90);}
Currently unimplemented. Introduction: http://dstorey.tumblr.com/post/11059109286/cssshaders. Latest spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
![Page 36: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/36.jpg)
![Page 37: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/37.jpg)
![Page 38: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/38.jpg)
IMAGES
background-image: image('img.svg','img.png',#f00);
background-image: url('img.png#xywh=0,20,25,30');
background-image: element(#foobar);
Latest spec: http://www.w3.org/TR/2011/WD-css3-images-20110908/
![Page 39: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/39.jpg)
VALUES
width: calc((12em * 3) + 10px);
height: min(3em, 30px);
list-style-type: cycle(disk, circle);
content: attr(href);
Latest spec: http://www.w3.org/TR/css3-values/
![Page 40: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/40.jpg)
CONDITIONAL RULES
@supports (display: grid) {}
@supports (display: box)and (background: linear-gradient) {}
@supports (display: box)or (background: linear-gradient) {}
@supports not (transform: rotate3d) {}
Latest spec: http://dev.w3.org/csswg/css3-conditional/
![Page 41: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/41.jpg)
CONDITIONAL RULES
@document url('http://w3.org/index.html') {}
@document url-prefix('http://w3.org/blog/') {}
@document domain('w3.org') {}
@document regexp('http://w3.org/[^/]*-\\d{8}/') {}
Implemented in Firefox: https://developer.mozilla.org/en/CSS/@-moz-document
![Page 42: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/42.jpg)
DEVICE ADAPTATION
@viewport { width: device-width; }
<meta name="viewport" content="width=device-width">
Implemented in Opera: http://www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/. Latest spec: http://dev.w3.org/csswg/css-device-adapt/
![Page 43: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/43.jpg)
VARIABLES
@var $myColor #f00;
h1 { color: $myColor; }
Only a suggestion at the moment: http://www.xanthir.com/blog/b4AD0
![Page 44: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/44.jpg)
MIXINS
@mixin myStuff { color: #f00; font-size: 1.5em;}
h1 { @mix myStuff; font-weight: bold;}
Only a suggestion at the moment: http://www.xanthir.com/blog/b4Av0
![Page 45: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/45.jpg)
MIXINS
@mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em;}
h1 { @mix myStuff(#00f); font-weight: bold;}
![Page 46: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/46.jpg)
NESTING
h1 { border: 1px solid #f00;
& a { color: #00f;
&:hover { color: #ff0; }
}}
Only a suggestion at the moment: http://www.xanthir.com/blog/b49w0
![Page 47: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/47.jpg)
SELECTORS
:matches(header,aside,div) h1 {}
:not(header,aside,div) h1 {}
$div h1 {}
Introduction: http://www.blog.highub.com/css/whats-new-in-css-selectors-level-4/. Latest spec: http://dev.w3.org/csswg/selectors4/
![Page 48: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/48.jpg)
![Page 49: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/49.jpg)
http://www.netmagazine.com/features/developers-guide-browser-adoption-rates
![Page 50: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/50.jpg)
http://caniuse.com/
![Page 51: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/51.jpg)
THX. PLEASE BUY MY BOOK
http://nostarch.com/css3.htm
http://thebookofcss3.com or http://nostarch.com/css3.htm
![Page 52: The CSS of Tomorrow (Front Row 2011)](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c77da14a7959f6208b4571/html5/thumbnails/52.jpg)
Superman copyright is a contentious issue, but the images I use here belong to DC Comics and no permission was given. I
hope they fall under fair use doctrines. You should buy a copy of All Star Superman – it’s really good!
LEGAL NOTE