CSS 3, Style and Beyond

1 © 2013 SAMSUNG Electronics Co.Open Source Group – Silicon Valley

Daniel Glazman, Web Technologies Lead

Samsung Web Tech Talk

15-oct-2013

CSS 3, Style and beyond


A short history of CSS #1

Date Status

Before 1993 DSSSL, Fosi, P

1993-1995 Original CSS proposal byHå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


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


The CSS Working Group

2008 2013 %

# of Members 32 98 +206%

# of active Mem-bers

10 35 +250%

# of specifications 30 65 +116%


The CSS ecosystem

EPUBMobile Web-based

OSes

Web-based apps

Slideshows

Docu-ments

Web sites

SVGPrinted books

and maga-zines


CSS today #1Animations

Backgrounds and Borders

Basic Box Model

Basic User Interface (CSS3 UI)

Blending & Compositing

Box Alignment

CSS3 Tables

CSSOM Values

CSSOM View

Cascading & Inheritance

Color

Color Correction

Conditional Rules

Device Adaptation

Display

Exclusions

Filter Effects

Flexible Box Model

Fonts

Font Load Events

Fragmentation

Generated Content

Generated Content for Paged

Media

Grid Layout

Grid Positioning

Grid Template Layout

Hierarchies

Image Values and Replaced

Content


Content

Intrinsic & Extrinsic Sizing

Line Grid

Line Layout

Lists and Counters

Media Queries

Mobile Text Size Adjustment

Multi-column Layout

Namespaces

Object Model (CSSOM)

Overflow

Page Floats

Page Media

Pagination Templates

Positioned Layout

Presentation Levels

Pseudo-elements

Regions

Ruby

Selectors

Shapes

Shapes

Speech

Style Attributes

Syntax

Text

Text Decoration

Transforms

Transitions

Values and Units

Variables

Variables

Writing Modes


CSS today #2Animations

Backgrounds and Borders

Basic Box Model

Basic User Interface (CSS3 UI)


Box Alignment

CSS3 Tables

CSSOM Values

CSSOM View

Cascading & Inheritance

Color

Color Correction

Conditional Rules

Device Adaptation

Display

Exclusions

Filter Effects

Flexible Box Model

Fonts

Font Load Events

Fragmentation

Generated Content

Generated Content for Paged

Media

Grid Layout

Grid Positioning

Grid Template Layout

Hierarchies


Content


Content

Intrinsic & Extrinsic Sizing

Line Grid

Line Layout

Lists and Counters

Media Queries

Mobile Text Size Adjustment

Multi-column Layout

Namespaces

Object Model (CSSOM)

Overflow

Page Floats

Page Media

Pagination Templates

Positioned Layout

Presentation Levels

Pseudo-elements

Regions

Ruby

Selectors

Shapes

Shapes

Speech

Style Attributes

Syntax

Text

Text Decoration

Transforms

Transitions

Values and Units

Variables

Variables

Writing Modes


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


CSS Variables

#1 user request since 1998...

CSS is not a programming

language

Take the problem differently

Use the Cascade


How CSS Variables work

body { var-main-color: white;}

.foo { var-main-color: silver;}

p { background-color: var(main-color);}


Flexible Box Module

Distribute space

Resolve simply old problems

Important for Web-based apps’ UI

Already existed ages ago in Motif...


How Flexbox works #1


How Flexbox works #2


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


How Regions Work


Exclusions and Shapes

Make content flow around an image or

a shape

Make content flow into a shape...

These are old print media features


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);}






Grids

The whole Print Industry relies on Grids

Strong involvement from HP, Adobe and Microsoft


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;}



Alpha-compositing

Blend-mode

GPU acceleration


How Blending & Compositing work

body { background-image: linear-gradient(0deg, #404040, silver); }p { color: yellow; background-image: linear-gradient(0deg, red, blue); }


Filter Effects

Proposal by Adobe, Apple and Opera with

strong Adobe involvement

CSS and SVG, Shaders

Extremely powerful, game changing

specification


Fonts


Fonts


One last thing…

CSS Preprocessors-SASS-LESS-…


Conclusion

CSS still improving every day

CSS reaching new industries-eBooks-OSes, apps-Appliances

CSS is now inevitable

Thank you.


[email protected]

CSS 3, Style and Beyond

Technology

samsung electronics

css variables

implementation of css

short history of css

webbased projects css

js toolkits css

p original css proposal

bordersgenerated content