SlideShare a Scribd company logo
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
How Flexbox works #1

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

Open Source Group – Silicon Valley

12

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

Open Source Group – Silicon Valley

13

© 2013 SAMSUNG Electronics Co.
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.
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.
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.
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.
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

19

© 2013 SAMSUNG Electronics Co.
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.
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.
Blending & Compositing
Alpha-compositing
Blend-mode
GPU acceleration

Open Source Group – Silicon Valley

22

© 2013 SAMSUNG Electronics Co.
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.
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.
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 inevitable

Open Source Group – Silicon Valley

28

© 2013 SAMSUNG Electronics Co.
Thank you.

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

29

© 2013 SAMSUNG Electronics Co.

More Related Content

What's hot

Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
AakankshaR
 
Css introduction
Css   introductionCss   introduction
Css introduction
AbhishekMondal42
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
AursalanSayed
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
Swati Sharma
 
Week 12 CSS - Review from last week
Week 12 CSS - Review from last weekWeek 12 CSS - Review from last week
Week 12 CSS - Review from last week
Katherine McCurdy-Lapierre, R.G.D.
 
Week11 Lecture: CSS
Week11 Lecture: CSSWeek11 Lecture: CSS
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
9574395990
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Evolution Network
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
Harshita Yadav
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Folasade Adedeji
 
Html css
Html cssHtml css
Html css
kanakaiah kedam
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
SiddharthBorderwala
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
Web Development - Lecture 6
Web Development - Lecture 6Web Development - Lecture 6
Web Development - Lecture 6
Syed Shahzaib Sohail
 
CSS
CSSCSS
Css ms megha
Css ms meghaCss ms megha
Css ms megha
Megha Gupta
 

What's hot (16)

Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Css introduction
Css   introductionCss   introduction
Css introduction
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
Week 12 CSS - Review from last week
Week 12 CSS - Review from last weekWeek 12 CSS - Review from last week
Week 12 CSS - Review from last week
 
Week11 Lecture: CSS
Week11 Lecture: CSSWeek11 Lecture: CSS
Week11 Lecture: CSS
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Html css
Html cssHtml css
Html css
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Web Development - Lecture 6
Web Development - Lecture 6Web Development - Lecture 6
Web Development - Lecture 6
 
CSS
CSSCSS
CSS
 
Css ms megha
Css ms meghaCss ms megha
Css ms megha
 

Viewers also liked

Google
GoogleGoogle
Google
vibhabehl
 
Algorithms - Aaron Bloomfield
Algorithms - Aaron BloomfieldAlgorithms - Aaron Bloomfield
Algorithms - Aaron Bloomfield
Reggie Niccolo Santos
 
Chapter one
Chapter oneChapter one
Chapter one
mihiretu kassaye
 
Introduction to "Origins, Evolution & Creation"
Introduction to "Origins, Evolution & Creation"Introduction to "Origins, Evolution & Creation"
Introduction to "Origins, Evolution & Creation"
John Lynch
 
A history of science (volume 1)
A history of science (volume 1) A history of science (volume 1)
A history of science (volume 1)
Dipoceanov Esrever
 
The Scientific Revolution
The Scientific RevolutionThe Scientific Revolution
The Scientific Revolution
John Lynch
 
How We Got Where We Are: 40 Years of Planning...
How We Got Where We Are: 40 Years of Planning...How We Got Where We Are: 40 Years of Planning...
How We Got Where We Are: 40 Years of Planning...
American Astronautical Society
 
Google at a glance 1998 - 2008
Google at a glance 1998 - 2008Google at a glance 1998 - 2008
Google at a glance 1998 - 2008
Andreas Jaffke
 
Ancient Ideas of Creation & Evolution
Ancient Ideas of Creation & EvolutionAncient Ideas of Creation & Evolution
Ancient Ideas of Creation & Evolution
John Lynch
 
Why Ben Stein Is Wrong About History & Science
Why Ben Stein Is Wrong About History & ScienceWhy Ben Stein Is Wrong About History & Science
Why Ben Stein Is Wrong About History & Science
John Lynch
 
sPen Data Management
sPen Data ManagementsPen Data Management
sPen Data Management
Uladzimir Slabin
 
The Chemical Revolution
The Chemical RevolutionThe Chemical Revolution
The Chemical Revolution
John Lynch
 
Google Algorithm Change History - 2k14-2k16.
Google Algorithm Change History - 2k14-2k16.Google Algorithm Change History - 2k14-2k16.
Google Algorithm Change History - 2k14-2k16.
Saba SEO
 
Chap04alg
Chap04algChap04alg
Chap04alg
Munkhchimeg
 
Introduction to Algorithms
Introduction to AlgorithmsIntroduction to Algorithms
Introduction to Algorithms
pppepito86
 
Dc parent 14 2
Dc parent 14 2Dc parent 14 2
Dc parent 14 2
mtaft
 
One Long Argument
One Long ArgumentOne Long Argument
One Long Argument
John Lynch
 
Sorting algorithms
Sorting algorithmsSorting algorithms
Sorting algorithms
Edward Blurock
 
Introduction to Information Technology ch 02_a
Introduction to Information Technology ch 02_aIntroduction to Information Technology ch 02_a
Introduction to Information Technology ch 02_a
Shahi Raz Akhtar
 
National Air And Space Museum Washington DC
National Air And Space Museum Washington DCNational Air And Space Museum Washington DC
National Air And Space Museum Washington DC
Shivakumar Patil
 

Viewers also liked (20)

Google
GoogleGoogle
Google
 
Algorithms - Aaron Bloomfield
Algorithms - Aaron BloomfieldAlgorithms - Aaron Bloomfield
Algorithms - Aaron Bloomfield
 
Chapter one
Chapter oneChapter one
Chapter one
 
Introduction to "Origins, Evolution & Creation"
Introduction to "Origins, Evolution & Creation"Introduction to "Origins, Evolution & Creation"
Introduction to "Origins, Evolution & Creation"
 
A history of science (volume 1)
A history of science (volume 1) A history of science (volume 1)
A history of science (volume 1)
 
The Scientific Revolution
The Scientific RevolutionThe Scientific Revolution
The Scientific Revolution
 
How We Got Where We Are: 40 Years of Planning...
How We Got Where We Are: 40 Years of Planning...How We Got Where We Are: 40 Years of Planning...
How We Got Where We Are: 40 Years of Planning...
 
Google at a glance 1998 - 2008
Google at a glance 1998 - 2008Google at a glance 1998 - 2008
Google at a glance 1998 - 2008
 
Ancient Ideas of Creation & Evolution
Ancient Ideas of Creation & EvolutionAncient Ideas of Creation & Evolution
Ancient Ideas of Creation & Evolution
 
Why Ben Stein Is Wrong About History & Science
Why Ben Stein Is Wrong About History & ScienceWhy Ben Stein Is Wrong About History & Science
Why Ben Stein Is Wrong About History & Science
 
sPen Data Management
sPen Data ManagementsPen Data Management
sPen Data Management
 
The Chemical Revolution
The Chemical RevolutionThe Chemical Revolution
The Chemical Revolution
 
Google Algorithm Change History - 2k14-2k16.
Google Algorithm Change History - 2k14-2k16.Google Algorithm Change History - 2k14-2k16.
Google Algorithm Change History - 2k14-2k16.
 
Chap04alg
Chap04algChap04alg
Chap04alg
 
Introduction to Algorithms
Introduction to AlgorithmsIntroduction to Algorithms
Introduction to Algorithms
 
Dc parent 14 2
Dc parent 14 2Dc parent 14 2
Dc parent 14 2
 
One Long Argument
One Long ArgumentOne Long Argument
One Long Argument
 
Sorting algorithms
Sorting algorithmsSorting algorithms
Sorting algorithms
 
Introduction to Information Technology ch 02_a
Introduction to Information Technology ch 02_aIntroduction to Information Technology ch 02_a
Introduction to Information Technology ch 02_a
 
National Air And Space Museum Washington DC
National Air And Space Museum Washington DCNational Air And Space Museum Washington DC
National Air And Space Museum Washington DC
 

Similar to CSS 3, Style and Beyond

Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019
PhuocNT (Fresher.VN)
 
How Servo Renders the Web
How Servo Renders the WebHow Servo Renders the Web
How Servo Renders the Web
Adenilson Cavalcanti
 
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARERESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
csandit
 
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARERESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
cscpconf
 
How Servo Renders the Web
How Servo Renders the WebHow Servo Renders the Web
How Servo Renders the Web
Samsung Open Source Group
 
Talking Technical Illustration - Episode 2 - S1000D Illustrations
Talking Technical Illustration - Episode 2 - S1000D IllustrationsTalking Technical Illustration - Episode 2 - S1000D Illustrations
Talking Technical Illustration - Episode 2 - S1000D Illustrations
Larson Software Technology
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Justin Avery
 
Compliant S1000D llustrations
Compliant S1000D llustrationsCompliant S1000D llustrations
Compliant S1000D llustrations
Larson Software Technology
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Erik Isaksen
 
DDS Advanced Tutorial - OMG June 2013 Berlin Meeting
DDS Advanced Tutorial - OMG June 2013 Berlin MeetingDDS Advanced Tutorial - OMG June 2013 Berlin Meeting
DDS Advanced Tutorial - OMG June 2013 Berlin Meeting
Jaime Martin Losa
 
S1000D Compliant Illustrations 2018 - Part 2
S1000D Compliant Illustrations 2018 - Part 2S1000D Compliant Illustrations 2018 - Part 2
S1000D Compliant Illustrations 2018 - Part 2
Larson Software Technology
 
Css3
Css3Css3
Session
SessionSession
Session
Amr Salah
 
G0373049057
G0373049057G0373049057
G0373049057
theijes
 
BPM and SOA Are Going Mobile: An Architectural Perspective
BPM and SOA Are Going Mobile: An Architectural PerspectiveBPM and SOA Are Going Mobile: An Architectural Perspective
BPM and SOA Are Going Mobile: An Architectural Perspective
Guido Schmutz
 
Best-Practices-Web-Usability
Best-Practices-Web-UsabilityBest-Practices-Web-Usability
Best-Practices-Web-Usability
Larry Wilson
 
MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...
MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...
MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...
Amit Sheth
 
System of systems modeling with Capella
System of systems modeling with CapellaSystem of systems modeling with Capella
System of systems modeling with Capella
Obeo
 
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
Kunal Ashar
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
Charlie Moad
 

Similar to CSS 3, Style and Beyond (20)

Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019Workshop About Software Engineering Skills 2019
Workshop About Software Engineering Skills 2019
 
How Servo Renders the Web
How Servo Renders the WebHow Servo Renders the Web
How Servo Renders the Web
 
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARERESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
 
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARERESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
RESILIENT INTERFACE DESIGN FOR SAFETY-CRITICAL EMBEDDED AUTOMOTIVE SOFTWARE
 
How Servo Renders the Web
How Servo Renders the WebHow Servo Renders the Web
How Servo Renders the Web
 
Talking Technical Illustration - Episode 2 - S1000D Illustrations
Talking Technical Illustration - Episode 2 - S1000D IllustrationsTalking Technical Illustration - Episode 2 - S1000D Illustrations
Talking Technical Illustration - Episode 2 - S1000D Illustrations
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Compliant S1000D llustrations
Compliant S1000D llustrationsCompliant S1000D llustrations
Compliant S1000D llustrations
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
 
DDS Advanced Tutorial - OMG June 2013 Berlin Meeting
DDS Advanced Tutorial - OMG June 2013 Berlin MeetingDDS Advanced Tutorial - OMG June 2013 Berlin Meeting
DDS Advanced Tutorial - OMG June 2013 Berlin Meeting
 
S1000D Compliant Illustrations 2018 - Part 2
S1000D Compliant Illustrations 2018 - Part 2S1000D Compliant Illustrations 2018 - Part 2
S1000D Compliant Illustrations 2018 - Part 2
 
Css3
Css3Css3
Css3
 
Session
SessionSession
Session
 
G0373049057
G0373049057G0373049057
G0373049057
 
BPM and SOA Are Going Mobile: An Architectural Perspective
BPM and SOA Are Going Mobile: An Architectural PerspectiveBPM and SOA Are Going Mobile: An Architectural Perspective
BPM and SOA Are Going Mobile: An Architectural Perspective
 
Best-Practices-Web-Usability
Best-Practices-Web-UsabilityBest-Practices-Web-Usability
Best-Practices-Web-Usability
 
MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...
MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...
MobiCloud: Towards Cloud Mobile Hybrid Application Generation using Semantica...
 
System of systems modeling with Capella
System of systems modeling with CapellaSystem of systems modeling with Capella
System of systems modeling with Capella
 
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 

More from Samsung Open Source Group

The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)
Samsung Open Source Group
 
Easy IoT with JavaScript
Easy IoT with JavaScriptEasy IoT with JavaScript
Easy IoT with JavaScript
Samsung Open Source Group
 
Spawny: A New Approach to Logins
Spawny: A New Approach to LoginsSpawny: A New Approach to Logins
Spawny: A New Approach to Logins
Samsung Open Source Group
 
Rapid SPi Device Driver Development over USB
Rapid SPi Device Driver Development over USBRapid SPi Device Driver Development over USB
Rapid SPi Device Driver Development over USB
Samsung Open Source Group
 
Tizen RT: A Lightweight RTOS Platform for Low-End IoT Devices
Tizen RT: A Lightweight RTOS Platform for Low-End IoT DevicesTizen RT: A Lightweight RTOS Platform for Low-End IoT Devices
Tizen RT: A Lightweight RTOS Platform for Low-End IoT Devices
Samsung Open Source Group
 
IoTivity: Smart Home to Automotive and Beyond
IoTivity: Smart Home to Automotive and BeyondIoTivity: Smart Home to Automotive and Beyond
IoTivity: Smart Home to Automotive and Beyond
Samsung Open Source Group
 
IoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorialIoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorial
Samsung Open Source Group
 
GENIVI + OCF Cooperation
GENIVI + OCF CooperationGENIVI + OCF Cooperation
GENIVI + OCF Cooperation
Samsung Open Source Group
 
Framework for IoT Interoperability
Framework for IoT InteroperabilityFramework for IoT Interoperability
Framework for IoT Interoperability
Samsung Open Source Group
 
Open Source Metrics to Inform Corporate Strategy
Open Source Metrics to Inform Corporate StrategyOpen Source Metrics to Inform Corporate Strategy
Open Source Metrics to Inform Corporate Strategy
Samsung Open Source Group
 
IoTivity for Automotive IoT Interoperability
IoTivity for Automotive IoT InteroperabilityIoTivity for Automotive IoT Interoperability
IoTivity for Automotive IoT Interoperability
Samsung Open Source Group
 
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...
Samsung Open Source Group
 
Adding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux Device
Adding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux DeviceAdding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux Device
Adding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux Device
Samsung Open Source Group
 
IoTivity: From Devices to the Cloud
IoTivity: From Devices to the CloudIoTivity: From Devices to the Cloud
IoTivity: From Devices to the Cloud
Samsung Open Source Group
 
SOSCON 2016 JerryScript
SOSCON 2016 JerryScriptSOSCON 2016 JerryScript
SOSCON 2016 JerryScript
Samsung Open Source Group
 
IoT: From Arduino Microcontrollers to Tizen Products using IoTivity
IoT: From Arduino Microcontrollers to Tizen Products using IoTivityIoT: From Arduino Microcontrollers to Tizen Products using IoTivity
IoT: From Arduino Microcontrollers to Tizen Products using IoTivity
Samsung Open Source Group
 
Run Your Own 6LoWPAN Based IoT Network
Run Your Own 6LoWPAN Based IoT NetworkRun Your Own 6LoWPAN Based IoT Network
Run Your Own 6LoWPAN Based IoT Network
Samsung Open Source Group
 
Practical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under Linux
Practical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under LinuxPractical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under Linux
Practical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under Linux
Samsung Open Source Group
 
IoTivity Tutorial: Prototyping IoT Devices on GNU/Linux
IoTivity Tutorial: Prototyping IoT Devices on GNU/LinuxIoTivity Tutorial: Prototyping IoT Devices on GNU/Linux
IoTivity Tutorial: Prototyping IoT Devices on GNU/Linux
Samsung Open Source Group
 
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Things
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of ThingsJerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Things
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Things
Samsung Open Source Group
 

More from Samsung Open Source Group (20)

The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)The Complex IoT Equation (and FLOSS solutions)
The Complex IoT Equation (and FLOSS solutions)
 
Easy IoT with JavaScript
Easy IoT with JavaScriptEasy IoT with JavaScript
Easy IoT with JavaScript
 
Spawny: A New Approach to Logins
Spawny: A New Approach to LoginsSpawny: A New Approach to Logins
Spawny: A New Approach to Logins
 
Rapid SPi Device Driver Development over USB
Rapid SPi Device Driver Development over USBRapid SPi Device Driver Development over USB
Rapid SPi Device Driver Development over USB
 
Tizen RT: A Lightweight RTOS Platform for Low-End IoT Devices
Tizen RT: A Lightweight RTOS Platform for Low-End IoT DevicesTizen RT: A Lightweight RTOS Platform for Low-End IoT Devices
Tizen RT: A Lightweight RTOS Platform for Low-End IoT Devices
 
IoTivity: Smart Home to Automotive and Beyond
IoTivity: Smart Home to Automotive and BeyondIoTivity: Smart Home to Automotive and Beyond
IoTivity: Smart Home to Automotive and Beyond
 
IoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorialIoTivity for Automotive: meta-ocf-automotive tutorial
IoTivity for Automotive: meta-ocf-automotive tutorial
 
GENIVI + OCF Cooperation
GENIVI + OCF CooperationGENIVI + OCF Cooperation
GENIVI + OCF Cooperation
 
Framework for IoT Interoperability
Framework for IoT InteroperabilityFramework for IoT Interoperability
Framework for IoT Interoperability
 
Open Source Metrics to Inform Corporate Strategy
Open Source Metrics to Inform Corporate StrategyOpen Source Metrics to Inform Corporate Strategy
Open Source Metrics to Inform Corporate Strategy
 
IoTivity for Automotive IoT Interoperability
IoTivity for Automotive IoT InteroperabilityIoTivity for Automotive IoT Interoperability
IoTivity for Automotive IoT Interoperability
 
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Thin...
 
Adding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux Device
Adding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux DeviceAdding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux Device
Adding IEEE 802.15.4 and 6LoWPAN to an Embedded Linux Device
 
IoTivity: From Devices to the Cloud
IoTivity: From Devices to the CloudIoTivity: From Devices to the Cloud
IoTivity: From Devices to the Cloud
 
SOSCON 2016 JerryScript
SOSCON 2016 JerryScriptSOSCON 2016 JerryScript
SOSCON 2016 JerryScript
 
IoT: From Arduino Microcontrollers to Tizen Products using IoTivity
IoT: From Arduino Microcontrollers to Tizen Products using IoTivityIoT: From Arduino Microcontrollers to Tizen Products using IoTivity
IoT: From Arduino Microcontrollers to Tizen Products using IoTivity
 
Run Your Own 6LoWPAN Based IoT Network
Run Your Own 6LoWPAN Based IoT NetworkRun Your Own 6LoWPAN Based IoT Network
Run Your Own 6LoWPAN Based IoT Network
 
Practical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under Linux
Practical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under LinuxPractical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under Linux
Practical Guide to Run an IEEE 802.15.4 Network with 6LoWPAN Under Linux
 
IoTivity Tutorial: Prototyping IoT Devices on GNU/Linux
IoTivity Tutorial: Prototyping IoT Devices on GNU/LinuxIoTivity Tutorial: Prototyping IoT Devices on GNU/Linux
IoTivity Tutorial: Prototyping IoT Devices on GNU/Linux
 
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Things
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of ThingsJerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Things
JerryScript: An ultra-lighteweight JavaScript Engine for the Internet of Things
 

Recently uploaded

Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
Ivanti
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
softsuave
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
Priyanka Aash
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
Arpan Buwa
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 

Recently uploaded (20)

Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 

CSS 3, Style and Beyond

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. How Flexbox works #1 div { display: flex; height: 400px; } p { flex: 1; } Open Source Group – Silicon Valley 12 © 2013 SAMSUNG Electronics Co.
  • 13. How Flexbox works #2 #sidebar { width: 100px; flex: 0; } Open Source Group – Silicon Valley 13 © 2013 SAMSUNG Electronics Co.
  • 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. 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. 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. 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. How Exclusions work #2 Open Source Group – Silicon Valley 18 © 2013 SAMSUNG Electronics Co.
  • 19. How Exclusions work #3 #box { border: thin solid silver; shape-inside: polygon(...); } Open Source Group – Silicon Valley 19 © 2013 SAMSUNG Electronics Co.
  • 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. 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. Blending & Compositing Alpha-compositing Blend-mode GPU acceleration Open Source Group – Silicon Valley 22 © 2013 SAMSUNG Electronics Co.
  • 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. 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. Fonts Open Source Group – Silicon Valley 25 © 2013 SAMSUNG Electronics Co.
  • 26. Fonts Open Source Group – Silicon Valley 26 © 2013 SAMSUNG Electronics Co.
  • 27. One last thing… CSS Preprocessors - SASS - LESS -… Open Source Group – Silicon Valley 27 © 2013 SAMSUNG Electronics Co.
  • 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. Thank you. d.glazman@partner.samsung.com Open Source Group – Silicon Valley 29 © 2013 SAMSUNG Electronics Co.