Real-world CSS3
38
Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi
-
Upload
zoe-gillenwater -
Category
Design
-
view
118 -
download
7
description
Transcript of Real-world CSS3
Real-world CSS3
January 25, 2011CSS3 book launchZoe Mickley Gillenwater@zomigi
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
3
Is it ready yet?
Photo by U.S. Department of Agriculture, www.flickr.com/photos/usdagov/5201431107/
4
Status of moduleswww.w3.org/Style/CSS/current-work
5
Don't wait for “recommendation”
6
Use the parts of CSS3 that:
✔ have generally stable syntax.✔ have good support.✔ don't harm non-supporting browsers by
their lack.
7
Progressive enhancement
8
Good enhancementFirefox
IE 8
9
Enhancement failureRGBA/HSLA in
Firefox
RGBA/HSLA in IE 8
10
A few of the things you can use...
Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135
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)
12
Benefits of CSS3
Decreasedevelopment timemaintenance timepage loading time
Increaseusabilityaccessibilityadaptability across devicessearch engine placement
(besides looking cool)
13
Reduced development and maintenance time• Fewer images, Flash, JavaScript• Streamlined markup
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
15
Better search engine placement
• Google uses speed as ranking factor• Real text instead of image or Flash text
16
Increased usability
• Real text• Optimized styles based on device
capabilities
17
Real-world example
18
Before CSS3
FF 3.6 IE 8 IE 6HTTP requests 36 37 47Loading time 1.5 1.3 3seconds
19
The nav bar
inactive
hovered
current page indicator
Before: 8 images
20
The nav bar
inactive
hovered
current page indicator
After: 1 image
Before: 8 images
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
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
23
IE 9 beta
24
IE 8
25
IE 6
26
Wrapping tabs
Larger text + narrow window = ugly Amazon double-row tabs from 2000
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.
28
Media queries separated
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="narrow.css" media="only screen and (max-width:52em)">
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]-->
30
Media queries for mobile
min-widthmax-widthdevice-widthmin-device-widthmax-device-widthorientation-webkit-min-device-pixel-ratio
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
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
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">
34
Closer look: tabs
• border-radius for rounded corners on top only
• HSLA semitransparent white gradient for background
35
Closer look: multiple columns
• column-count on paragraph to set number of columns with variable width
• column-gap to control gutter width
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
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
