The document discusses using CSS3 in real-world projects. It recommends using stable CSS3 features that don't break without support, like border-radius, box-shadow, and multiple backgrounds. CSS3 can reduce development time through fewer images and HTTP requests. Media queries allow responsive designs for different devices. Features like gradients, transforms and animations can be used but require more testing. The document provides examples of CSS3 for navigation tabs, columns, and badges.

1. Real-world CSS3
January 25, 2011
CSS3 book launch
Zoe Mickley Gillenwater
@zomigi

2. What I do
Books Web
new Stunning CSS3: Accessibility
A Project-based Guide to specialist for AT&T
the Latest in CSS Web design/CSS
www.stunningcss3.com consultant
Member of Adobe
Dec '08 Flexible Web Design: Task Force for WaSP
Creating Liquid and Elastic
Layouts with CSS
www.flexiblewebbook.com
2

3. Is it ready yet?
Photo by U.S. Department of Agriculture, www.flickr.com/photos/usdagov/5201431107/ 3

4. Status of modules
www.w3.org/Style/CSS/current-work
4

5. Don't wait for “recommendation”
5

6. Use the parts of CSS3 that:
✔ have generally stable syntax.
✔ have good support.
✔ don't harm non-supporting browsers by
their lack.
6

7. Progressive enhancement
7

8. Good enhancement
Firefox
IE 8
8

9. Enhancement failure
RGBA/HSLA in
Firefox
RGBA/HSLA in
IE 8
9

10. A few of the things
you can use...
Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135 10

11. Go forth and style
Safe when used Use a little more
wisely cautiously
border-radius transforms
box-shadow gradients
text-shadow animations
multiple backgrounds HSLA (or RGBA if youyourself)
things hard on
like to make
border-image new selectors
box-sizing
transitions
@font-face
media queries
11

12. Benefits of CSS3 (besides looking cool)
Decrease Increase
development time usability
maintenance time accessibility
page loading time adaptability across devices
search engine placement
12

13. Reduced development and
maintenance time
• Fewer images, Flash, JavaScript
• Streamlined markup
13

14. Increased page performance
• Smaller file sizes
• Fewer HTTP requests
Reducing the number of HTTP requests…is
the most important guideline for improving
performance for first time visitors.
Yahoo! Exceptional Performance Team,
http://developer.yahoo.com/performance/rules.html
14

15. Better search engine
placement
• Google uses speed as ranking factor
• Real text instead of image or Flash text
15

16. Increased usability
• Real text
• Optimized styles based on device
capabilities
16

17. Real-world example
17

18. Before CSS3
FF 3.6 IE 8 IE 6
HTTP requests 36 37 47
Loading time seconds 1.5 1.3 3
18

19. The nav bar
Before: 8 images inactive
hovered
current page indicator
19

20. The nav bar
Before: 8 images inactive
hovered
current page indicator
After: 1 image
20

21. Before CSS3, optimized
FF 3.6 IE 8 IE 6
HTTP requests 29 30 33
Loading time seconds 1.3 1.15 2
decrease 13% 11% 33%
21

22. After CSS3
FF 3.6 IE 8 IE 6
HTTP requests 22 23 24
Loading time seconds 1.1 1 1.5
decrease 15% 13% 25%
22

23. IE 9 beta
23

24. IE 8
24

25. IE 6
25

26. Wrapping tabs
Larger text + narrow window =
ugly Amazon double-row tabs from 2000
26

27. Media query for nav bar
@media all and (max-width:52em) { English translation:
#swoosh { display: none; } Up to a maximum
#mainnav { padding: 8px 0; }
width of 52 ems, use
#mainnav ul { margin: 0; }
#mainnav li {
these styles. Once you
margin-left: 12px; get past 52 ems, use
padding: 0; the regular styles.
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: none; }
#mainnav li:hover { background: none; }
}
27

28. Media queries separated
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="narrow.css"
media="only screen and (max-width:52em)">
28

29. IE support
Make it work in IE 5-8 with JavaScript
http://code.google.com/p/css3-mediaqueries-js/
<!--[if lte IE 8]>
<script src="css3-mediaqueries.js"></script>
<![endif]-->
29

30. Media queries for mobile
min-width
max-width
device-width
min-device-width
max-device-width
orientation
-webkit-min-device-pixel-ratio
30

31. Targeting iPhone, Android, etc.
@media screen and
portrait & landscape (min-width: 320px) and
(max-width: 480px)
portrait & landscape (min-device-width: 320px) and
(max-device-width: 480px)
portrait & landscape (max-device-width: 480px)
landscape only (min-width: 321px)
portrait only (max-width: 320px)
31

32. Targeting iPad
@media screen and
portrait & landscape (min-device-width: 768px) and
(max-device-width: 1024px)
landscape only (min-width: 769px)
landscape only (min-device-width: 481px) and
(max-device-width: 1024px)
and (orientation: landscape)
portrait only (min-device-width: 481px) and
(max-device-width: 1024px)
and (orientation: portrait)
32

33. Viewport meta tag
Forces mobile devices to scale viewport to
actual device width
<meta name="viewport"
content="width=device-width,
minimum-scale=1.0,
maximum-scale=1.0">
33

34. Closer look: tabs
• border-radius for rounded corners on
top only
• HSLA semitransparent white gradient for
background
34

35. Closer look: multiple columns
• column-count on paragraph to set
number of columns with variable width
• column-gap to control gutter width
35

36. Closer look: deals badge
• width/height set in
ems
• border-radius set to
half width/height to
make circle
• green dashed border is
actual border; white
solid border is hard-
edged box-shadow
• second fuzzy gray
box-shadow beneath 36

37. Learn more
Download slides, get links:
www.zomigi.com/blog/css3-book-launch-event/
Stunning CSS3 book:
www.stunningcss3.com
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
www.zomigi.com
37

38. Questions?
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
www.zomigi.com
38