0
CSS 3, Style and beyond

Daniel Glazman, Web Technologies Lead
Samsung Web Tech Talk
15-oct-2013

Open Source Group – Sili...
A short history of CSS #1

Date
Before 1993
1993-1995

Status
DSSSL, Fosi, P
Original CSS proposal by
Håkon Lie and Bert B...
A short history of CSS #2
Very little initial interest by browser vendors
IE 3 implements partial support in 1996
IE 5 for...
The CSS Working Group

2008

2013

%

# of Members

32

98

+206%

# of active Members

10

35

+250%

# of specifications...
The CSS ecosystem

Documents
EPUB

Mobile Web-based OSes

Web sites

Slideshows

Web-based apps

Printed books
and magazin...
CSS today #1
Animations

Generated Content

Positioned Layout

Backgrounds and Borders

Generated Content for Paged Media
...
CSS today #2
Animations

Generated Content

Positioned Layout

Backgrounds and Borders

Generated Content for Paged Media
...
CSS today #3
CSS now an important part of Web-based
projects
CSS starts bridging natively the gaps

formerly filled by JS ...
CSS Variables

#1 user request since 1998...
CSS is not a programming language
Take the problem differently
Use the Cascad...
How CSS Variables work
body {
var-main-color: white;
}
.foo {
var-main-color: silver;
}
p {
background-color: var(main-col...
Flexible Box Module
Distribute space

Resolve simply old problems
Important for Web-based apps’ UI
Already existed ages ag...
How Flexbox works #1

div {
display: flex;
height: 400px;
}
p {
flex: 1;
}

Open Source Group – Silicon Valley

12

© 2013...
How Flexbox works #2
#sidebar {
width: 100px;
flex: 0;
}

Open Source Group – Silicon Valley

13

© 2013 SAMSUNG Electroni...
Regions
Being able to name a content flow

Associate it to a set of elements or anonymous
boxes, even if they are not cont...
How Regions Work

#source { flow-into: article; }
.region { flow-from: article;}
 
#region1{ width:25%;
height:30%
float:l...
Exclusions and Shapes
Make content flow around an image or a
shape
Make content flow into a shape...

These are old print ...
How Exclusions work #1

#prose {
position: relative;
column-count: 2;
}
#exclusion { /* image 135x135 */
position: absolut...
How Exclusions work #2

Open Source Group – Silicon Valley

18

© 2013 SAMSUNG Electronics Co.
How Exclusions work #3
#box {
border: thin solid silver;
shape-inside: polygon(...);
}

Open Source Group – Silicon Valley...
Grids
The whole Print Industry relies on Grids

Strong involvement from HP, Adobe and Microsoft

Open Source Group – Silic...
How Grids work
#grid {
display: grid;
grid-definition-columns:

150px
"ligneV1" 1fr
"ligneV2" 1fr
"ligneV3" 150px;
grid-de...
Blending & Compositing
Alpha-compositing
Blend-mode
GPU acceleration

Open Source Group – Silicon Valley

22

© 2013 SAMSU...
How Blending & Compositing work
body { background-image: linear-gradient(0deg, #404040, silver);
}
p { color: yellow;
back...
Filter Effects
Proposal by Adobe, Apple and Opera with strong

Adobe involvement
CSS and SVG, Shaders
Extremely powerful, ...
Fonts

Open Source Group – Silicon Valley

25

© 2013 SAMSUNG Electronics Co.
Fonts

Open Source Group – Silicon Valley

26

© 2013 SAMSUNG Electronics Co.
One last thing…

CSS Preprocessors
- SASS
- LESS
-…

Open Source Group – Silicon Valley

27

© 2013 SAMSUNG Electronics Co...
Conclusion
CSS still improving every day
CSS reaching new industries
- eBooks
- OSes, apps
- Appliances

CSS is now inevit...
Thank you.

d.glazman@partner.samsung.com
Open Source Group – Silicon Valley

29

© 2013 SAMSUNG Electronics Co.
Upcoming SlideShare
Loading in...5
×

CSS 3, Style and Beyond

537

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
537
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×