CSS 3, Style and Beyond

916 views

Published on

Daniel Glazman, W3C CSS Working Group Chair and Web Tech Lead from Samsung OSG, discusses how CSS 3 and stylesheets will affect web standards in the future.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
916
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

CSS 3, Style and Beyond

  1. 1. CSS 3, Style and beyond Daniel Glazman, Web Technologies Lead Samsung Web Tech Talk 15-oct-2013 Open Source Group – Silicon Valley 1 © 2013 SAMSUNG Electronics Co.
  2. 2. A short history of CSS #1 Date Before 1993 1993-1995 Status DSSSL, Fosi, P Original CSS proposal by Håkon Lie and Bert Bos 1996 CSS 1, 16 pages 1998 CSS 2, 340 pages 2011 CSS 2.1, 487 pages Since 1998 CSS 3… XSL-FO, sole competitor, shutdown in march 2013 Open Source Group – Silicon Valley 2 © 2013 SAMSUNG Electronics Co.
  3. 3. A short history of CSS #2 Very little initial interest by browser vendors IE 3 implements partial support in 1996 IE 5 for Mac, first full implementation of CSS 1 in march 2000 Full steam since 2000 Open Source Group – Silicon Valley 3 © 2013 SAMSUNG Electronics Co.
  4. 4. The CSS Working Group 2008 2013 % # of Members 32 98 +206% # of active Members 10 35 +250% # of specifications 30 65 +116% Open Source Group – Silicon Valley 4 © 2013 SAMSUNG Electronics Co.
  5. 5. The CSS ecosystem Documents EPUB Mobile Web-based OSes Web sites Slideshows Web-based apps Printed books and magazines SVG Open Source Group – Silicon Valley 5 © 2013 SAMSUNG Electronics Co.
  6. 6. CSS today #1 Animations Generated Content Positioned Layout Backgrounds and Borders Generated Content for Paged Media Presentation Levels Basic Box Model Grid Layout Pseudo-elements Basic User Interface (CSS3 UI) Grid Positioning Regions Blending & Compositing Grid Template Layout Ruby Box Alignment Hierarchies Selectors CSS3 Tables Image Values and Replaced Content Shapes CSSOM Values Image Values and Replaced Content Shapes CSSOM View Intrinsic & Extrinsic Sizing Speech Cascading & Inheritance Line Grid Style Attributes Color Line Layout Syntax Color Correction Lists and Counters Text Conditional Rules Media Queries Text Decoration Device Adaptation Mobile Text Size Adjustment Transforms Display Multi-column Layout Transitions Exclusions Namespaces Values and Units Filter Effects Object Model (CSSOM) Variables Flexible Box Model Overflow Variables Fonts Page Floats Writing Modes Font Load Events Page Media Fragmentation Pagination Templates Open Source Group – Silicon Valley 6 © 2013 SAMSUNG Electronics Co.
  7. 7. CSS today #2 Animations Generated Content Positioned Layout Backgrounds and Borders Generated Content for Paged Media Presentation Levels Basic Box Model Grid Layout Pseudo-elements Basic User Interface (CSS3 UI) Grid Positioning Regions Blending & Compositing Grid Template Layout Ruby Box Alignment Hierarchies Selectors CSS3 Tables Image Values and Replaced Content Shapes CSSOM Values Image Values and Replaced Content Shapes CSSOM View Intrinsic & Extrinsic Sizing Speech Cascading & Inheritance Line Grid Style Attributes Color Line Layout Syntax Color Correction Lists and Counters Text Conditional Rules Media Queries Text Decoration Device Adaptation Mobile Text Size Adjustment Transforms Display Multi-column Layout Transitions Exclusions Namespaces Values and Units Filter Effects Object Model (CSSOM) Variables Flexible Box Model Overflow Variables Fonts Page Floats Writing Modes Font Load Events Page Media Fragmentation Pagination Templates Open Source Group – Silicon Valley 7 © 2013 SAMSUNG Electronics Co.
  8. 8. CSS today #3 CSS now an important part of Web-based projects CSS starts bridging natively the gaps formerly filled by JS toolkits CSS reaching features that were considered impossible or out of scope 10 years ago CSS an important part of the user browsing experience Open Source Group – Silicon Valley 8 © 2013 SAMSUNG Electronics Co.
  9. 9. CSS Variables #1 user request since 1998... CSS is not a programming language Take the problem differently Use the Cascade Open Source Group – Silicon Valley 9 © 2013 SAMSUNG Electronics Co.
  10. 10. How CSS Variables work body { var-main-color: white; } .foo { var-main-color: silver; } p { background-color: var(main-color); } Open Source Group – Silicon Valley 10 © 2013 SAMSUNG Electronics Co.
  11. 11. Flexible Box Module Distribute space Resolve simply old problems Important for Web-based apps’ UI Already existed ages ago in Motif... Open Source Group – Silicon Valley 11 © 2013 SAMSUNG Electronics Co.
  12. 12. How Flexbox works #1 div { display: flex; height: 400px; } p { flex: 1; } Open Source Group – Silicon Valley 12 © 2013 SAMSUNG Electronics Co.
  13. 13. How Flexbox works #2 #sidebar { width: 100px; flex: 0; } Open Source Group – Silicon Valley 13 © 2013 SAMSUNG Electronics Co.
  14. 14. Regions Being able to name a content flow Associate it to a set of elements or anonymous boxes, even if they are not contiguous Very important for Web sites and eBooks because that’s a feature of print media hitting the Web Open Source Group – Silicon Valley 14 © 2013 SAMSUNG Electronics Co.
  15. 15. How Regions Work #source { flow-into: article; } .region { flow-from: article;}   #region1{ width:25%; height:30% float:left; }   #region2{ width:65%; height:30%; float:right; }   #region3{ width:100%; height:60%; margin-top:10%;   overflow:auto; } Open Source Group – Silicon Valley 15 © 2013 SAMSUNG Electronics Co.
  16. 16. Exclusions and Shapes Make content flow around an image or a shape Make content flow into a shape... These are old print media features Open Source Group – Silicon Valley 16 © 2013 SAMSUNG Electronics Co.
  17. 17. How Exclusions work #1 #prose { position: relative; column-count: 2; } #exclusion { /* image 135x135 */ position: absolute; top: calc(50% - 67px); left: calc(50% - 67px); wrap-flow: both; shape-outside: url(motorbike.png); } Open Source Group – Silicon Valley 17 © 2013 SAMSUNG Electronics Co.
  18. 18. How Exclusions work #2 Open Source Group – Silicon Valley 18 © 2013 SAMSUNG Electronics Co.
  19. 19. How Exclusions work #3 #box { border: thin solid silver; shape-inside: polygon(...); } Open Source Group – Silicon Valley 19 © 2013 SAMSUNG Electronics Co.
  20. 20. Grids The whole Print Industry relies on Grids Strong involvement from HP, Adobe and Microsoft Open Source Group – Silicon Valley 20 © 2013 SAMSUNG Electronics Co.
  21. 21. How Grids work #grid { display: grid; grid-definition-columns: 150px "ligneV1" 1fr "ligneV2" 1fr "ligneV3" 150px; grid-definition-rows: 4em 4em; } #item 1 { grid-column: "ligneV2" "ligneV3"; grid-row: 2; } Open Source Group – Silicon Valley 21 © 2013 SAMSUNG Electronics Co.
  22. 22. Blending & Compositing Alpha-compositing Blend-mode GPU acceleration Open Source Group – Silicon Valley 22 © 2013 SAMSUNG Electronics Co.
  23. 23. How Blending & Compositing work body { background-image: linear-gradient(0deg, #404040, silver); } p { color: yellow; background-image: linear-gradient(0deg, red, blue); } Open Source Group – Silicon Valley 23 © 2013 SAMSUNG Electronics Co.
  24. 24. Filter Effects Proposal by Adobe, Apple and Opera with strong Adobe involvement CSS and SVG, Shaders Extremely powerful, game changing specification Open Source Group – Silicon Valley 24 © 2013 SAMSUNG Electronics Co.
  25. 25. Fonts Open Source Group – Silicon Valley 25 © 2013 SAMSUNG Electronics Co.
  26. 26. Fonts Open Source Group – Silicon Valley 26 © 2013 SAMSUNG Electronics Co.
  27. 27. One last thing… CSS Preprocessors - SASS - LESS -… Open Source Group – Silicon Valley 27 © 2013 SAMSUNG Electronics Co.
  28. 28. Conclusion CSS still improving every day CSS reaching new industries - eBooks - OSes, apps - Appliances CSS is now inevitable Open Source Group – Silicon Valley 28 © 2013 SAMSUNG Electronics Co.
  29. 29. Thank you. d.glazman@partner.samsung.com Open Source Group – Silicon Valley 29 © 2013 SAMSUNG Electronics Co.

×