Talk given at Web-5 Conference in Beziers, France on 5th April 2012. http://www.web-5.org/

1. The future is now
by @karolinaszczur
Web 5 conference, Béziers, France

2. Who’s that girl?
Front-end dev and designer with 7
years of experience. Earlier worked
at AdTaily and Applicake. Currently
@XHTMLized.
karolinaszczur

3. 1. Long live CSS3
2. Back to the future
variables, conditionals, selectors, filters, paged media
exclusions, regions, grid layout, flexbox
3. Considerations

4. Borders
Enabling multiple shadows with inset, radius and border
image handling.
.box {
box-shadow: 5px 5px 10px rgb(255, 255, 255),
1px 0 1px rgba(0, 0, 0, .2) inset;
border-radius: 20px;
}
for border-image check: http://www.norabrowndesign.com/css-experiments/border-image-anim.html and http://css-tricks.com/understanding-border-image/

5. Color modes
HSL, HSLA, CMYK, RGBA
hue hue cyan red
saturation saturation magenta green
lightness lightness yellow black
alpha black alpha
http://www.flickr.com/photos/foxtwo/2540952589/

6. Backgrounds
Multiple images, determining the background position
relatively, expansion ratios.
.box {
background-image: url(../images/bg_one.jpg), url(../images/
bg_two);
background-position: center top, left bottom;
background-origin: content-box;
background-clip: padding-box;
}

7. Text
Shadows, overflow and wrapping.
.box p {
text-shadow: 0 2px 3px rgba(0, 0, 0, .3);
text-overflow: ellipsis;
word-wrap: break-word;
}

8. Multi-column layouts
Newspaper-like grids.
.multicolumn {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
http://www.flickr.com/photos/eivind1983/4704630872/

9. Gradients
.box {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
}

10. Media queries
Feature detection with CSS.
@media screen and (min-width: 320px) {
body {
font-size: 70%;
}
}

11. Transitions
Smooth animations on property change
a, a:visited {
text-decoration: none;
color: #FFD600;
}
a {
-moz-transition: color 1s linear;
-webkit-transition: color 1s linear;
transition: color 1s linear;
}
a:hover, a:active, a:focus {
color: #ff6600;
}

12. Transforms
2 and 3D manipulations on objects
.box {
height: 300px;
width: 300px;
transform: scale(1, 1.5), rotate(30deg);
}

13. Benefits of CSS3
Fewer HTTP requests
Faster development
Lightweight CSS (?)
Good support

14. 1. Long live CSS3
2. Back to the future
variables, conditionals, selectors, filters, paged media
exclusions, regions, grid layout, flexbox
3. Considerations

15. There’s no CSS4

16. Variables
:root { $base-color: rgb(255, 255, 255);
var-base-color: rgb(255, 255, 255);
} .container {
background: $base-color;
.container { }
background: var(base-color);
} how SASS is dealing with variables
CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/

17. Variables (not yet available)
:root { $base-color: rgb(255, 255, 255);
var-base-color: rgb(255, 255, 255);
} .container {
background: $base-color;
.container { }
background: var(base-color);
} how SASS is dealing with variables
CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/

18. Conditionals
@supports (display: flexbox) { @media screen {
section { display: flexbox; } body {
} background: #000;
}
@document (http://w3.org) { @media (min-width: 1200px) {
p { font-size: 1em; } p {
} font-size: 2em;
} } }
CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/

19. Conditionals (not yet available)
@supports (display: flexbox) { @media screen {
section { display: flexbox; } body {
} background: #000;
}
@document (http://w3.org) { @media (min-width: 1200px) {
p { font-size: 1em; } p {
} font-size: 2em;
} } }
CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/

20. Regions
.text-source {
flow-into: „main-thread”;
}
.region, .region-a, .region-b {
flow-from: main-thread;
}
CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

21. Sample
content flow
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin
consectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesent
nunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer
vel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.
bibendum mattis ipsum id
imperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis
nisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus
purus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl.
Integer vel risus quis velit rhoncus
porta. Proin vel quam in elit lacinia
adipiscing. Pellentesque vitae ante
vitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin
quis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.
elit vitae mattis. Aliquam et tellus
Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et
non mauris posuere consequat sit
felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.
amet sit amet nisl. Donec
malesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus
rutrum mauris mollis vitae. mattis elit vitae mattis.

22. Sample
content flow
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin
consectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesent
nunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer
vel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.
bibendum mattis ipsum id
imperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis
nisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus
purus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl. content flow
Integer vel risus quis velit rhoncus
porta. Proin vel quam in elit lacinia
adipiscing. Pellentesque vitae ante
vitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin
quis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.
elit vitae mattis. Aliquam et tellus
Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et
non mauris posuere consequat sit
felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.
amet sit amet nisl. Donec
malesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus
rutrum mauris mollis vitae. mattis elit vitae mattis.

23. Sample
content flow
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin
consectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesent
nunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer
vel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.
bibendum mattis ipsum id
imperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis
nisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus
purus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl. content flow
Integer vel risus quis velit rhoncus
porta. Proin vel quam in elit lacinia
adipiscing. Pellentesque vitae ante
vitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin
quis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.
elit vitae mattis. Aliquam et tellus
Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et
non mauris posuere consequat sit
felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.
amet sit amet nisl. Donec
malesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus
rutrum mauris mollis vitae. mattis elit vitae mattis.

24. Support
16+ 10.0 6.0

25. Exclusions and shapes
.circle { .circle {
wrap-shape: polygon(0px, 150px); wrap-shape: polygon(0px, 150px);
wrap-shape-mode: content; wrap-shape-mode: around;
} }
CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

26. Exclusions and shapes (not yet available)
.circle { .circle {
wrap-shape: polygon(0px, 150px); wrap-shape: polygon(0px, 150px);
wrap-shape-mode: content; wrap-shape-mode: around;
} }
CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

27. Samples

28. Flexbox
.box {
display: flexbox;
box one }
flex-flow: column;
.one {
flex-order: 1;
}
box three .two {
flex-order: 3;
}
.three {
box two }
flex-order: 2;
CSS Flexible Box Layout Model: http://www.w3.org/TR/css3-flexbox/

29. Flexbox
box one box two box three
.box-container {
display: flexbox;
flex-flow: row;
}

30. Support
16+ 10.0 5+ 3.6+

31. Grid layout
.box {
display: grid;
grid-columns: 1fr 1fr 2fr;
}
CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

32. Grid layout
.box {
display: grid;
grid-columns: 1fr 1fr 2fr;
header
}
#header {
grid-column: 1;
grid-column-span: 2;
grid-grid-row: 1;
left right
}
column column
#left-column {
grid-column: 1;
grid-grid-row: 2;
}
#right-column {
grid-column: 2;
grid-grid-row: 2;
}
CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

33. Grid layout (not yet available)
.box {
display: grid;
grid-columns: 1fr 1fr 2fr;
header
}
#header {
grid-column: 1;
grid-column-span: 2;
grid-grid-row: 1;
left right
}
column column
#left-column {
grid-column: 1;
grid-grid-row: 2;
}
#right-column {
grid-column: 2;
grid-grid-row: 2;
}
CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

34. Filters
.box {
background: red;
-webkit-filter: blur(20px);
-webkit-filter: grayscale(.2);
-webkit-filter: hue-rotate(180deg);
}
CSS Filters 1.0l: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

35. Support
16+ 9+ 5+ 3.6+
and Opera too!

36. Selectors
Location
Matching Linguistic
Negation User action
Attribute selectors UI States
Tree structural
pseudo classes

37. Logical combinators
a:matches(:hover, :focus) { input:not([type=”submit”]) {
color: red; border: none;
} }

38. Attribute and values
a[title] { a[class~=”action”] {
<a href="#" class="call
color: red; display: block;
action button" />
} }

39. Location pseudo classes
#navigation :local-link { :link { :visited {
color: red; color: blue; text-decoration: underline;
} } }

40. Linguistic pseudo classes
:dir(ltr) :lang(fr)

41. UI pseudo classes
:enabled :required
:disabled :valid

42. Tree structural pseudo classes
:root :nth-of-type()
:nth-child() :first-of-type()

43. 1. Long live CSS3
2. Back to the future
variables, conditionals, selectors, filters, paged media
exclusions, regions, grid layout, flexbox
3. Considerations

44. Don’t solve problems
that you don’t have

45. Mind the
vendor prefixes

46. Check the
support

47. progressive vs graceful
enhancement degradation

48. thank you
@karolinaszczur
slideshare.net/karolinaszczur