The Future of CSS: Short Guide

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).

mezzoblue.com/presentations/2011/fowdDAVE SHEA / NEW YORK / 8 NOV 2011

THEFUTUREOFCSS

(or, as much as will fit in 40 minutes)

Browsers &

Specs

Oct 2010

2011 Data Source: http://gs.statcounter.com/

Oct 2011 Oct 2010

2011 Data Source: http://gs.statcounter.com/

Original Presentation: http://goo.gl/81zP8

Word of Warning

24 Ways in

Wikipedia in

Sites in Question: 24ways.org & wikipedia.org

CSS3 Checkup

}

}

First/Last of Type

0 ; }

0 ; }

Forms - Required?

}

Forms - Optional?

}

border-­‐radius 5px ; }

border-­‐radius 5px ; }

Vendor Prefixes:

Time to drop them?

border-­‐radius 5px ; }

url (shadow-­‐top.gif) ,

}

; }

; }

100px 100px ; }

100px 100px ; }

; }

; }

repeat ; }

space ; }

round ; }

background-­‐image linear-­‐gradient ( top ,

);

}

linear-­‐gradient ( top #1e5799 0% #7db9e8 100%);

startColorstr = '#1e5799' endColorstr = '#7db9e8' ,GradientType=0

}

text-­‐shadow #000 ;

}

text-shadow

http://markdotto.com/playground/3d-text/

text-­‐shadow #000 ;

}

don’t do this

box-­‐shadow #000 ; }

box-­‐shadow inset #000 ; }

border-image

}

padding 20px ; }

width 100% ;

padding 20px ; }

width calc ( -­‐ 40px );

padding 20px ;

}

Jakarta Karachi Kinshasa Kolkata

Lagos Lima London Los

Angeles Manila Mexico City

Moscow Mumbai New York Osaka

Paris Rio de Janeiro

}

Jakarta Karachi Kinshasa Kolkata

Lagos Lima London Los Angeles Manila

Mexico City

Moscow Mumbai New York Osaka

Paris Rio de Janeiro

}

Jakarta Karachi Kinshasa Kolkata

Lagos Lima London Los Angel

Manila Mexico City

Moscow Mumbai New York Osaka

Paris Rio de Jan

}

}

; }

optimizeLegibility ; }

http://www.aestheticallyloyal.com/public/optimize-legibility/

common-­‐ligatures ; }

discretionary-­‐ligatures ; }

historical-­‐forms ; }

historical-­‐ligatures ; }

ItalicSerif , ;

swash ( flowing ); }

http://hacks.mozilla.org/2009/10/font-control-for-designers/

scale ( 2 ); }

scale ( 2 ); }

transform translate ( -­‐20px -­‐20px ); }

transform translate ( -­‐20px -­‐20px ); }

transform skewX ( 90 ); }

transform skewX ( 90 ); }

transform rotate ( 90 );

}

transform rotate ( 90 );

}

transform rotate ( 90 );

}

translate ( -­‐40px -­‐40px ),

rotate ( 10deg );

}

translate ( -­‐40px -­‐40px ),

rotate ( 10deg );

}

Shadow DOM

http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

none ; }

http://lab.simurai.com/css/umbrui/

class = "box" >

placeholder =

type = "email" placeholder =

type = "submit" value = "Send" >

</form>

background #333 ;

border none ;

none ; }

http://css-tricks.com/examples/WebKitScrollbars/

WebKit Extras

#3d8ba4 ;

plus-­‐darker ; }

1px black ; }

5px black ; }

rgba ( 0 , 0 , 0 , 0 );

1px rgba ( 0 , 0 , 0 , 0 5 );

rgba ( 0 , 0 , 0 , 0 25 ; }

url(/path/to/mask.png) ;

rgba ( 30 28 28 0 6 );

}

http://trentwalton.com/2011/05/19/mask-image-text/

below 5px

(

linear from ( transparent ),

color-­‐stop ( 0 5 transparent to ( white ) }

Where Next?

Floats Suck

New layout controls?

How about 4?

Multi-column

3 ;

3em ;

1px solid #CCC ; }

all ; }

100% ; }

all ; }

100% ; }

2 ;

3em ;

1px solid #CCC ; }

Regions

"main-­‐thread" ; }

"main-­‐thread" ; }

"main-­‐thread" ; }

http://www.netmagazine.com/features/future-css-layouts

Template Layout

&

Grid Layout

; }

a ; }

b ; }

c ; }

Bonus 5th Layout Method!

Flexible Box

Layout

So which one(s)?

CSS Shaders

http://www.adobe.com/devnet/html5/articles/css-shaders.html

CSS Variables

CSS

CSS 4?

bold ; }

normal ; }

100% ; }

}

bold ; }

normal ; }

bold ; }

Elements Out

Pseudo-mezzoblue.com/presentations/2011/fowdDAVE SHEA / NEW YORK / 8 NOV 2011

Thanks!