real-world css3€¦ · real-world css3 january 25, 2011 css3 book launch zoe mickley gillenwater...
TRANSCRIPT
![Page 1: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/1.jpg)
Real-world CSS3
January 25, 2011CSS3 book launchZoe Mickley Gillenwater@zomigi
![Page 2: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/2.jpg)
2
What I do
BooksStunning CSS3: A Project-based Guide to the Latest in CSSwww.stunningcss3.com
Flexible Web Design: Creating Liquid and Elastic Layouts with CSSwww.flexiblewebbook.com
WebAccessibility specialist for AT&TWeb design/CSS consultantMember of Adobe Task Force for WaSP
new
Dec '08
![Page 3: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/3.jpg)
3
Is it ready yet?
Photo by U.S. Department of Agriculture, www.flickr.com/photos/usdagov/5201431107/
![Page 4: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/4.jpg)
4
Status of moduleswww.w3.org/Style/CSS/current-work
![Page 5: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/5.jpg)
5
Don't wait for “recommendation”
![Page 6: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/6.jpg)
6
Use the parts of CSS3 that:
✔ have generally stable syntax.✔ have good support.✔ don't harm non-supporting browsers by
their lack.
![Page 7: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/7.jpg)
7
Progressive enhancement
![Page 8: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/8.jpg)
8
Good enhancementFirefox
IE 8
![Page 9: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/9.jpg)
9
Enhancement failureRGBA/HSLA in
Firefox
RGBA/HSLA in IE 8
![Page 10: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/10.jpg)
10
A few of the things you can use...
Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135
![Page 11: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/11.jpg)
11
Go forth and style
Safe when used wiselyborder-radiusbox-shadowtext-shadowmultiple backgroundsborder-imagebox-sizingtransitions@font-facemedia queries
Use a little more cautiouslytransformsgradientsanimationsHSLAnew selectors
(or RGBA if you like to make things hard on yourself)
![Page 12: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/12.jpg)
12
Benefits of CSS3
Decreasedevelopment timemaintenance timepage loading time
Increaseusabilityaccessibilityadaptability across devicessearch engine placement
(besides looking cool)
![Page 13: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/13.jpg)
13
Reduced development and maintenance time• Fewer images, Flash, JavaScript• Streamlined markup
![Page 14: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/14.jpg)
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
![Page 15: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/15.jpg)
15
Better search engine placement
• Google uses speed as ranking factor• Real text instead of image or Flash text
![Page 16: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/16.jpg)
16
Increased usability
• Real text• Optimized styles based on device
capabilities
![Page 17: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/17.jpg)
17
Real-world example
![Page 18: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/18.jpg)
18
Before CSS3
FF 3.6 IE 8 IE 6HTTP requests 36 37 47Loading time 1.5 1.3 3seconds
![Page 19: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/19.jpg)
19
The nav bar
inactive
hovered
current page indicator
Before: 8 images
![Page 20: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/20.jpg)
20
The nav bar
inactive
hovered
current page indicator
After: 1 image
Before: 8 images
![Page 21: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/21.jpg)
21
Before CSS3, optimized
FF 3.6 IE 8 IE 6HTTP requests 29 30 33Loading time 1.3 1.15 2
13% 11% 33%seconds
decrease
![Page 22: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/22.jpg)
22
After CSS3
FF 3.6 IE 8 IE 6HTTP requests 22 23 24Loading time 1.1 1 1.5
15% 13% 25%seconds
decrease
![Page 23: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/23.jpg)
23
IE 9 beta
![Page 24: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/24.jpg)
24
IE 8
![Page 25: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/25.jpg)
25
IE 6
![Page 26: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/26.jpg)
26
Wrapping tabs
Larger text + narrow window = ugly Amazon double-row tabs from 2000
![Page 27: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/27.jpg)
27
Media query for nav bar@media all and (max-width:52em) { #swoosh { display: none; } #mainnav { padding: 8px 0; } #mainnav ul { margin: 0; } #mainnav li { margin-left: 12px; padding: 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: none; } #mainnav li:hover { background: none; }}
English translation:Up to a maximum
width of 52 ems, use
these styles. Once you
get past 52 ems, use
the regular styles.
![Page 28: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/28.jpg)
28
Media queries separated
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="narrow.css" media="only screen and (max-width:52em)">
![Page 29: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/29.jpg)
29
IE support
Make it work in IE 5-8 with JavaScripthttp://code.google.com/p/css3-mediaqueries-js/
<!--[if lte IE 8]><script src="css3-mediaqueries.js"></script><![endif]-->
![Page 30: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/30.jpg)
30
Media queries for mobile
min-widthmax-widthdevice-widthmin-device-widthmax-device-widthorientation-webkit-min-device-pixel-ratio
![Page 31: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/31.jpg)
31
Targeting iPhone, Android, etc.
(min-width: 320px) and (max-width: 480px)(min-device-width: 320px) and (max-device-width: 480px)(max-device-width: 480px)(min-width: 321px)(max-width: 320px)
@media screen andportrait & landscape
portrait & landscape
portrait & landscape
landscape only
portrait only
![Page 32: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/32.jpg)
32
Targeting iPad
(min-device-width: 768px) and (max-device-width: 1024px)(min-width: 769px)(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)
@media screen andportrait & landscape
landscape only
landscape only
portrait only
![Page 33: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/33.jpg)
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">
![Page 34: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/34.jpg)
34
Closer look: tabs
• border-radius for rounded corners on top only
• HSLA semitransparent white gradient for background
![Page 35: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/35.jpg)
35
Closer look: multiple columns
• column-count on paragraph to set number of columns with variable width
• column-gap to control gutter width
![Page 36: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/36.jpg)
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
![Page 37: Real-world CSS3€¦ · Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi. 2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in](https://reader035.vdocuments.mx/reader035/viewer/2022070214/6112f4ab47ba7079af6e40de/html5/thumbnails/37.jpg)
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
www.zomigi.com