The CSS of Tomorrow (Front Row 2011)

2,977 views

Published on

Completely updated version of my talk, given at Front Row 2011 in Krakow, in October 2011. Contains links and brief annotation.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,977
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
30
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

The CSS of Tomorrow (Front Row 2011)

  1. 1. THECSS3 OFTOMORROW PETER GASSTON @STOPSATGREEN BROKEN-LINKS.COM
  2. 2. “35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!” “350+ Amazing CSS3 Resources - All Youll EverNeed to Become a CSS3 Master!”
  3. 3. CSS3 TODAY border-radius: 5px; box-shadow: 2px 2px 4px #000; text-shadow: 4px 4px 2px #000;
  4. 4. BACKGROUNDS & BORDERSbackground-image: url(img1.png), url(img2.png), url(img3.png);border-image:url(img1.png)20 25 20 25 stretch;
  5. 5. SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child() :nth-of-type() | :nth-last-of-type()
  6. 6. 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);
  7. 7. WEB FONTS @font-face { font-family: My Font; src: url(/path/to/font.woff); } h1 { font-family: My Font; }
  8. 8. 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)
  9. 9. 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/
  10. 10. TRANSFORMATIONS transform: rotate(45deg); transform: rotate3d(1,1,0,45deg);http://westciv.com/tools/transforms/
  11. 11. TRANSITIONS & ANIMATIONS transition: all 2s 500ms ease-in; @keyframes foo { from { color: #f00; } 50% { color: #00f; } to { color: #0f0; } } div { animation: foo 1s linear; }
  12. 12. TRANSITIONS & ANIMATIONShttp://daneden.me/animate/
  13. 13. 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.
  14. 14. FLEXIBLE BOX LAYOUT div { display: flexbox; } A B .a,.b { width: 40%; } .a,.b { width: flex(1); } A B .a { width: flex(3); } A B .b { width: flex(2); }Currently in Chrome, Firefox, Safari, coming in IE10, but all use an older syntax; you can read moreabout this in an article I wrote: http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained
  15. 15. FLEXIBLE BOX LAYOUT .a { flex-align: center; a flex-pack: center; width: flex(0); } c div { flex-flow: column; } .a,.b { flex-order: 2; } a .c { flex-order: 1; } b
  16. 16. GRID LAYOUT div { div { display: grid; display: grid; grid-columns: 1fr 1fr 2fr; 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/
  17. 17. GRID LAYOUT article { grid-column: 2; grid-row: 2; grid-column-span: 2; }
  18. 18. GRID LAYOUT a .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; } b c div { grid-template: abc; } a b c
  19. 19. GRID LAYOUT a div { grid-template: aa bc; } b c div { c grid-template: acc a.b; a } b
  20. 20. REGIONS a .a { flow-into: foo; } b .b { flow-from: foo; } b .b, .c, .d, .e { flow-from: foo; } e c @region .b { color: #f00 } dCurrently in IE10: http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSConnected and in anexperimental WebKit build, using a different syntax: http://labs.adobe.com/technologies/cssregions/.Latest spec: http://dev.w3.org/csswg/css3-regions/
  21. 21. 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/
  22. 22. 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/
  23. 23. EXCLUSIONS div { shape-inside: polygon(150px,0 0,300px 300px,300px); }
  24. 24. 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
  25. 25. FILTER EFFECTS img { 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
  26. 26. SHADERS img { filter: custom(url(foo.fs), 20 20, phase 90); }Currently unimplemented. Introduction: http://dstorey.tumblr.com/post/11059109286/cssshaders. Latestspec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
  27. 27. IMAGES background-image: url( img.png#xywh=0,20,25,30); background-image: image(img.svg,img.png,#f00); background-image: element(#foobar);Latest spec: http://www.w3.org/TR/2011/WD-css3-images-20110908/
  28. 28. 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/
  29. 29. 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/
  30. 30. 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
  31. 31. DEVICE ADAPTATION <meta name="viewport" content="width=device-width"> @viewport { width: device-width; }Implemented in Opera: http://www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/. Latestspec: http://dev.w3.org/csswg/css-device-adapt/
  32. 32. VARIABLES @var $myColor #f00; h1 { color: $myColor; }Only a suggestion at the moment: http://www.xanthir.com/blog/b4AD0
  33. 33. 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
  34. 34. MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { @mix myStuff(#00f); font-weight: bold; }
  35. 35. NESTING h1 { border: 1px solid #f00; & a { color: #00f; &:hover { color: #ff0; } } }Only a suggestion at the moment: http://www.xanthir.com/blog/b49w0
  36. 36. 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/
  37. 37. http://www.netmagazine.com/features/developers-guide-browser-adoption-rates
  38. 38. http://caniuse.com/
  39. 39. THX. PLEASE BUY MY BOOK http://nostarch.com/css3.htmhttp://thebookofcss3.com or http://nostarch.com/css3.htm
  40. 40. LEGAL NOTE Superman copyright is a contentious issue, but the images Iuse 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!

×