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

design@zomigi.com

www.zomigi.com

38

Questions?

Zoe Mickley Gillenwater@zomigidesign@zomigi.comwww.zomigi.com