real-world css3

Download Real-world CSS3

Post on 27-Jan-2015




7 download

Embed Size (px)




  • Real-world CSS3

    January 25, 2011CSS3 book launchZoe Mickley Gillenwater@zomigi

  • 2What I do

    BooksStunning CSS3: A Project-based Guide to the Latest in

    Flexible Web Design: Creating Liquid and Elastic Layouts with

    WebAccessibility specialist for AT&TWeb design/CSS consultantMember of Adobe Task Force for WaSP


    Dec '08

  • 3Is it ready yet?

    Photo by U.S. Department of Agriculture,

  • 4Status of

  • 5Don't wait for recommendation

  • 6Use the parts of CSS3 that:

    have generally stable syntax. have good support. don't harm non-supporting browsers by

    their lack.

  • 7Progressive enhancement

  • 8Good enhancementFirefox

    IE 8

  • 9Enhancement failureRGBA/HSLA in


    RGBA/HSLA in IE 8

  • 10

    A few of the things you can use...

    Photo by Kristin Roach,

  • 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 requestsis the most important guideline for improving performance for first time visitors.Yahoo! Exceptional Performance Team,

  • 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


  • 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



    current page indicator

    Before: 8 images

  • 20

    The nav bar



    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


  • 22

    After CSS3

    FF 3.6 IE 8 IE 6HTTP requests 22 23 24Loading time 1.1 1 1.5

    15% 13% 25%seconds


  • 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

  • 29

    IE support

    Make it work in IE 5-8 with JavaScript

  • 30

    Media queries for mobile


  • 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

  • 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

    Stunning CSS3

    Zoe Mickley Gillenwater


  • 38


    Zoe Mickley


View more >