The CSS of Tomorrow (Front Row 2011)

THE CSS3 OFTOMORROW

PETER GASSTON@STOPSATGREEN

BROKEN-LINKS.COM

“35 Awesome CSS3 Examples!”

“50+ Best CSS3 Examples!”

“350+ Amazing CSS3Resources - All You'll Ever

Need to Become a CSS3 Master!”

CSS3 TODAY

border-radius: 5px;

box-shadow: 2px 2px 4px #000;

text-shadow: 4px 4px 2px #000;

BACKGROUNDS & BORDERS

background-image: url('img1.png'), url('img2.png'), url('img3.png');

border-image:url('img1.png')20 25 20 25 stretch;

SELECTORS

:first-child | :last-child

:first-of-type | :last-of-type

:nth-child() | :nth-last-child()

:nth-of-type() | :nth-last-of-type()

OPACITY, ALPHA & COLOUR

opacity: 0.5;

color: rgba(255,0,0,0.5);

color: hsl(0,100%,50%);

color: hsla(0,100%,50%,0.5);

WEB FONTS

@font-face { font-family: 'My Font'; src: url('/path/to/font.woff');}

h1 { font-family: 'My Font'; }

MEDIA QUERIES

@media all and (min-device-width: 480px)

@media all and (pixel-ratio: 2)

@media screen not (monochrome)

@media screen and (max-device-width: 640px) and (touch-enabled: 1)

GRADIENTS

linear-gradient(45deg,red,yellow);

repeating-linear-gradient(red,blue 10%);

radial-gradient(circle cover,red,blue);

repeating-radial-gradient(red,blue 10%);

http://leaverou.me/css3patterns/

TRANSFORMATIONS

transform: rotate(45deg);

transform: rotate3d(1,1,0,45deg);

http://westciv.com/tools/transforms/

TRANSITIONS & ANIMATIONS

@keyframes foo { from { color: #f00; } 50% { color: #00f; } to { color: #0f0; }}

div { animation: foo 1s linear; }

transition: all 2s 500ms ease-in;

TRANSITIONS & ANIMATIONS

http://daneden.me/animate/

MULTIPLE COLUMNS

div { column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00;}

h2 { column-span: all; }

Implemented fully in Chrome, Opera, Safari, coming in IE10, in Firefox but using -moz- prefix.

FLEXIBLE BOX LAYOUT

A Bdiv { display: flexbox; }.a,.b { width: 40%; }

A B.a,.b { width: flex(1); }

A B.a { width: flex(3); }.b { width: flex(2); }

Currently in Chrome, Firefox, Safari, coming in IE10, but all use an older syntax; you can read more about this in an article I wrote: http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained

FLEXIBLE BOX LAYOUT

a

.a { flex-align: center; flex-pack: center; width: flex(0);}

c

a

b

div { flex-flow: column; }.a,.b { flex-order: 2; }.c { flex-order: 1; }

GRID LAYOUT

div { display: grid; grid-columns: 1fr 1fr 2fr;}

div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 80px auto 10em;}

Coming in IE10, work apparently underway in WebKit too. Latest spec: http://dev.w3.org/csswg/css3-grid-align/

GRID LAYOUT

article { grid-column: 2; grid-row: 2; grid-column-span: 2;}

GRID LAYOUT

a

b

c

.a { grid-cell: a; }

.b { grid-cell: b; }

.c { grid-cell: c; }

a b c

div { grid-template: 'abc';}

GRID LAYOUT

a

b c

div { grid-template: 'aa' 'bc';}

a

b

cdiv { grid-template: 'acc' 'a.b';}

REGIONSa

b

.a { flow-into: foo; }

.b { flow-from: foo; }

b

c

d

e

.b, .c, .d, .e { flow-from: foo;}

@region .b { color: #f00 }

Currently in IE10: http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSConnected and in an experimental WebKit build, using a different syntax: http://labs.adobe.com/technologies/cssregions/. Latest spec: http://dev.w3.org/csswg/css3-regions/

LINE GRID

article { layout-grid-line: 1.5; }

h1 { layout-grid-mode: block;}

p { layout-grid-mode: line; margin-bottom: 1gd;}

Not currently implemented. Latest spec: http://dev.w3.org/csswg/css-line-grid/

EXCLUSIONS

div { shape-outside: circle(50%, 50%, 50px); wrap-flow: both;}

Currently only in an experimental WebKit build, with a different syntax: http://labs.adobe.com/technologies/cssregions/. Latest spec: http://dev.w3.org/csswg/css3-exclusions/

EXCLUSIONS

div { shape-inside: polygon(150px,0 0,300px 300px,300px);}

PAGED MEDIA

@media paged { height: 100%; overflow: paged-x;}

<link rel="next" href="p2.htm">

@navigation { nav-right: link-rel(next);}

Currently only in an experimental Opera build: http://people.opera.com/howcome/2011/reader/index.html

FILTER EFFECTSimg { filter: grayscale(0.25); }

img { filter: blur(5,2) sepia(1); }

Currently unimplemented. Latest spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html

SHADERS

img { filter: custom(url(foo.fs), 20 20, phase 90);}

Currently unimplemented. Introduction: http://dstorey.tumblr.com/post/11059109286/cssshaders. Latest spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html

IMAGES

background-image: image('img.svg','img.png',#f00);

background-image: url('img.png#xywh=0,20,25,30');

background-image: element(#foobar);

Latest spec: http://www.w3.org/TR/2011/WD-css3-images-20110908/

VALUES

width: calc((12em * 3) + 10px);

height: min(3em, 30px);

list-style-type: cycle(disk, circle);

content: attr(href);

Latest spec: http://www.w3.org/TR/css3-values/

CONDITIONAL RULES

@supports (display: grid) {}

@supports (display: box)and (background: linear-gradient) {}

@supports (display: box)or (background: linear-gradient) {}

@supports not (transform: rotate3d) {}

Latest spec: http://dev.w3.org/csswg/css3-conditional/

CONDITIONAL RULES

@document url('http://w3.org/index.html') {}

@document url-prefix('http://w3.org/blog/') {}

@document domain('w3.org') {}

@document regexp('http://w3.org/[^/]*-\\d{8}/') {}

Implemented in Firefox: https://developer.mozilla.org/en/CSS/@-moz-document

DEVICE ADAPTATION

@viewport { width: device-width; }

<meta name="viewport" content="width=device-width">

Implemented in Opera: http://www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/. Latest spec: http://dev.w3.org/csswg/css-device-adapt/

VARIABLES

@var $myColor #f00;

h1 { color: $myColor; }

Only a suggestion at the moment: http://www.xanthir.com/blog/b4AD0

MIXINS

@mixin myStuff { color: #f00; font-size: 1.5em;}

h1 { @mix myStuff; font-weight: bold;}

Only a suggestion at the moment: http://www.xanthir.com/blog/b4Av0

MIXINS

@mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em;}

h1 { @mix myStuff(#00f); font-weight: bold;}

NESTING

h1 { border: 1px solid #f00;

& a { color: #00f;

&:hover { color: #ff0; }

}}

Only a suggestion at the moment: http://www.xanthir.com/blog/b49w0

SELECTORS

:matches(header,aside,div) h1 {}

:not(header,aside,div) h1 {}

$div h1 {}

Introduction: http://www.blog.highub.com/css/whats-new-in-css-selectors-level-4/. Latest spec: http://dev.w3.org/csswg/selectors4/

http://www.netmagazine.com/features/developers-guide-browser-adoption-rates

http://caniuse.com/

THX. PLEASE BUY MY BOOK

http://nostarch.com/css3.htm

http://thebookofcss3.com or http://nostarch.com/css3.htm

Superman copyright is a contentious issue, but the images I use here belong to DC Comics and no permission was given. I

hope they fall under fair use doctrines. You should buy a copy of All Star Superman – it’s really good!

LEGAL NOTE