Future is now

1,801 views

Published on

Talk given at Web-5 Conference in Beziers, France on 5th April 2012. http://www.web-5.org/

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,801
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Future is now

  1. 1. The future is nowby @karolinaszczur Web 5 conference, Béziers, France
  2. 2. Who’s that girl?Front-end dev and designer with 7years of experience. Earlier workedat AdTaily and Applicake. Currently@XHTMLized. karolinaszczur
  3. 3. 1. Long live CSS32. Back to the future variables, conditionals, selectors, filters, paged media exclusions, regions, grid layout, flexbox3. Considerations
  4. 4. BordersEnabling multiple shadows with inset, radius and borderimage handling. .box { box-shadow: 5px 5px 10px rgb(255, 255, 255), 1px 0 1px rgba(0, 0, 0, .2) inset; border-radius: 20px; } for border-image check: http://www.norabrowndesign.com/css-experiments/border-image-anim.html and http://css-tricks.com/understanding-border-image/
  5. 5. Color modesHSL, HSLA, CMYK, RGBAhue hue cyan redsaturation saturation magenta greenlightness lightness yellow black alpha black alpha http://www.flickr.com/photos/foxtwo/2540952589/
  6. 6. BackgroundsMultiple images, determining the background positionrelatively, expansion ratios. .box { background-image: url(../images/bg_one.jpg), url(../images/ bg_two); background-position: center top, left bottom; background-origin: content-box; background-clip: padding-box; }
  7. 7. TextShadows, overflow and wrapping. .box p { text-shadow: 0 2px 3px rgba(0, 0, 0, .3); text-overflow: ellipsis; word-wrap: break-word; }
  8. 8. Multi-column layoutsNewspaper-like grids. .multicolumn { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } http://www.flickr.com/photos/eivind1983/4704630872/
  9. 9. Gradients.box { background-color: #444444; background-image: -webkit-gradient(linear, left top, left bottom,from(#444444), to(#999999)); background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); background-image: -ms-linear-gradient(top, #444444, #999999); background-image: -o-linear-gradient(top, #444444, #999999); background-image: linear-gradient(to bottom, #444444, #999999);}
  10. 10. Media queriesFeature detection with CSS. @media screen and (min-width: 320px) { body { font-size: 70%; } }
  11. 11. TransitionsSmooth animations on property change a, a:visited { text-decoration: none; color: #FFD600; } a { -moz-transition: color 1s linear; -webkit-transition: color 1s linear; transition: color 1s linear; } a:hover, a:active, a:focus { color: #ff6600; }
  12. 12. Transforms2 and 3D manipulations on objects .box { height: 300px; width: 300px; transform: scale(1, 1.5), rotate(30deg); }
  13. 13. Benefits of CSS3Fewer HTTP requestsFaster developmentLightweight CSS (?)Good support
  14. 14. 1. Long live CSS32. Back to the future variables, conditionals, selectors, filters, paged media exclusions, regions, grid layout, flexbox3. Considerations
  15. 15. There’s no CSS4
  16. 16. Variables :root { $base-color: rgb(255, 255, 255); var-base-color: rgb(255, 255, 255); } .container { background: $base-color; .container { } background: var(base-color); } how SASS is dealing with variables CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/
  17. 17. Variables (not yet available) :root { $base-color: rgb(255, 255, 255); var-base-color: rgb(255, 255, 255); } .container { background: $base-color; .container { } background: var(base-color); } how SASS is dealing with variables CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/
  18. 18. Conditionals @supports (display: flexbox) { @media screen { section { display: flexbox; } body { } background: #000; } @document (http://w3.org) { @media (min-width: 1200px) { p { font-size: 1em; } p { } font-size: 2em; } } } CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/
  19. 19. Conditionals (not yet available) @supports (display: flexbox) { @media screen { section { display: flexbox; } body { } background: #000; } @document (http://w3.org) { @media (min-width: 1200px) { p { font-size: 1em; } p { } font-size: 2em; } } } CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/
  20. 20. Regions .text-source { flow-into: „main-thread”; } .region, .region-a, .region-b { flow-from: main-thread; } CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/
  21. 21. Sample content flowLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinconsectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesentnunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integervel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.bibendum mattis ipsum idimperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattisnisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et telluspurus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl.Integer vel risus quis velit rhoncusporta. Proin vel quam in elit laciniaadipiscing. Pellentesque vitae antevitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinquis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.elit vitae mattis. Aliquam et tellus Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at etnon mauris posuere consequat sit felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.amet sit amet nisl. Donecmalesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursusrutrum mauris mollis vitae. mattis elit vitae mattis.
  22. 22. Sample content flowLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinconsectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesentnunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integervel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.bibendum mattis ipsum idimperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattisnisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et telluspurus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl. content flowInteger vel risus quis velit rhoncusporta. Proin vel quam in elit laciniaadipiscing. Pellentesque vitae antevitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinquis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.elit vitae mattis. Aliquam et tellus Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at etnon mauris posuere consequat sit felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.amet sit amet nisl. Donecmalesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursusrutrum mauris mollis vitae. mattis elit vitae mattis.
  23. 23. Sample content flowLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinconsectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesentnunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integervel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.bibendum mattis ipsum idimperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattisnisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et telluspurus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl. content flowInteger vel risus quis velit rhoncusporta. Proin vel quam in elit laciniaadipiscing. Pellentesque vitae antevitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinquis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.elit vitae mattis. Aliquam et tellus Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at etnon mauris posuere consequat sit felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.amet sit amet nisl. Donecmalesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursusrutrum mauris mollis vitae. mattis elit vitae mattis.
  24. 24. Support 16+ 10.0 6.0
  25. 25. Exclusions and shapes .circle { .circle { wrap-shape: polygon(0px, 150px); wrap-shape: polygon(0px, 150px); wrap-shape-mode: content; wrap-shape-mode: around; } } CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/
  26. 26. Exclusions and shapes (not yet available) .circle { .circle { wrap-shape: polygon(0px, 150px); wrap-shape: polygon(0px, 150px); wrap-shape-mode: content; wrap-shape-mode: around; } } CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/
  27. 27. Samples
  28. 28. Flexbox .box { display: flexbox; box one } flex-flow: column; .one { flex-order: 1; } box three .two { flex-order: 3; } .three { box two } flex-order: 2; CSS Flexible Box Layout Model: http://www.w3.org/TR/css3-flexbox/
  29. 29. Flexbox box one box two box three .box-container { display: flexbox; flex-flow: row; }
  30. 30. Support 16+ 10.0 5+ 3.6+
  31. 31. Grid layout.box { display: grid; grid-columns: 1fr 1fr 2fr;} CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/
  32. 32. Grid layout.box { display: grid; grid-columns: 1fr 1fr 2fr; header}#header { grid-column: 1; grid-column-span: 2; grid-grid-row: 1; left right} column column#left-column { grid-column: 1; grid-grid-row: 2;}#right-column { grid-column: 2; grid-grid-row: 2;} CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/
  33. 33. Grid layout (not yet available) .box { display: grid; grid-columns: 1fr 1fr 2fr; header } #header { grid-column: 1; grid-column-span: 2; grid-grid-row: 1; left right } column column #left-column { grid-column: 1; grid-grid-row: 2; } #right-column { grid-column: 2; grid-grid-row: 2; } CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/
  34. 34. Filters .box { background: red; -webkit-filter: blur(20px); -webkit-filter: grayscale(.2); -webkit-filter: hue-rotate(180deg); } CSS Filters 1.0l: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
  35. 35. Support 16+ 9+ 5+ 3.6+ and Opera too!
  36. 36. Selectors LocationMatching LinguisticNegation User actionAttribute selectors UI States Tree structural pseudo classes
  37. 37. Logical combinators a:matches(:hover, :focus) { input:not([type=”submit”]) { color: red; border: none; } }
  38. 38. Attribute and values a[title] { a[class~=”action”] { <a href="#" class="call color: red; display: block; action button" /> } }
  39. 39. Location pseudo classes #navigation :local-link { :link { :visited { color: red; color: blue; text-decoration: underline; } } }
  40. 40. Linguistic pseudo classes :dir(ltr) :lang(fr)
  41. 41. UI pseudo classes :enabled :required :disabled :valid
  42. 42. Tree structural pseudo classes :root :nth-of-type() :nth-child() :first-of-type()
  43. 43. 1. Long live CSS32. Back to the future variables, conditionals, selectors, filters, paged media exclusions, regions, grid layout, flexbox3. Considerations
  44. 44. Don’t solve problemsthat you don’t have
  45. 45. Mind thevendor prefixes
  46. 46. Check the support
  47. 47. progressive vs graceful enhancement degradation
  48. 48. thank you@karolinaszczurslideshare.net/karolinaszczur

×