Scribd Logo
Upload

Welcome to Scribd!

  • 3K views

    HTML5 Presentation

    Uploaded by

    codeninja
    HTML5 and CSS3 are two emerging standards which are rapidly gaining support from modern browsers. Learn how you can integrate HTML5 and CSS3 into your designs today and with a few simple tricks, whip IE into shape.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd

    HTML5 Presentation

    Uploaded by

    codeninja
    3K views22 pages
    HTML5 and CSS3 are two emerging standards which are rapidly gaining support from modern browsers. Learn how you can integrate HTML5 and CSS3 into your designs today and with a few simple tricks, whip IE into shape.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    HTML5 and CSS3 are two emerging standards which are rapidly gaining support from modern browsers. Learn how you can integrate HTML5 and CSS3 into your designs today and with a few simple tricks, whip IE into shape.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3K views22 pages

    HTML5 Presentation

    Uploaded by

    codeninja
    HTML5 and CSS3 are two emerging standards which are rapidly gaining support from modern browsers. Learn how you can integrate HTML5 and CSS3 into your designs today and with a few simple tricks, whip IE into shape.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 22

    HTML5 & CSS3

    Graceful Degradation and Progressive Enhancement


    (Or: Say “Good Bye!” to Flash and Photoshop)

    Wednesday, August 26, 2009


    Problems with HTML4

    • No guidelines left uncertainty.


    • Loose structure leads to “Divitus”
    • Also, Class Hell / ID Hell
    • Not flexible for web applications
    • Tables for Layouts (evil but still reliable)

    Wednesday, August 26, 2009


    Problems with CSS

    • Very powerful, yet still limited


    • Few ways to select elements
    • As with HTML: No Structure == Mess!

    Wednesday, August 26, 2009


    So What’s New?

    Wednesday, August 26, 2009


    HTML5 : Semantic Tags
    • SECTION
    • HEADER
    • NAV HTML 5 provides tags which
    aim to use the DOM to define
    • ARTICLE
    the functionality and structure
    • FIGURE of the site.
    • FOOTER Through this, markup is
    dramatically cleaned up and
    • HGROUP clarity is provided... Mostly.
    • MENU
    • ASIDE

    Wednesday, August 26, 2009


    Nice, tidy markup
    HTML 4 HTML 5

    Wednesday, August 26, 2009


    Nice, tidy markup
    HTML 4 HTML 5

    Wednesday, August 26, 2009


    Nice, tidy markup
    HTML 4 HTML 5

    <!DOCTYPE html>

    <style>
      article, aside, dialog, figure, footer, header,
      hgroup, menu, nav, section { display: block; }
    </style>

    Wednesday, August 26, 2009


    <video> & <audio>

    • Full play controls


    without Flash

    • JS Events and JS API

    • CSS3 Hooks

    Wednesday, August 26, 2009


    Other Really Cool Stuff
    • XDMSG - Cross
    Domain Messages
    • Datagrid* (new
    table)
    • contentEditable with
    UndoManager
    • Major update to
    CANVAS *
    • “Required” <input>s

    Wednesday, August 26, 2009


    Other Really Cool Stuff
    • Drag and Drop!
    • Offline Storage!
    • Formally removes
    center, font, strike, u
    (and <b> is next)
    • Removes formatting
    attributes (align,
    nowrap, cellpadding,
    border) in leu of CSS
    • * Evolving!!!

    Wednesday, August 26, 2009


    Speaking of CSS
    • Border: color, image, radius
    • Box Shadow
    • multiple backgrounds, with
    sizing and clipping
    • HSL, HSLA, RGBA colors
    (no longer limited to hex)
    • Text shadow, overflow, and
    word-wrap
    • Box Model (box-sizing)
    • Powerful Selectors
    • Web Fonts, Multi-column

    Wednesday, August 26, 2009


    border-radius
    <style>
    div.round{
    -moz-border-radius:1em;
    -webkit-border-radius: 1em;
    border-radius:1em;
    }
    </style>

    // -moz for FireFox


    // -webkit for safari
    // border-radius for IE 8 (soon)

    Wednesday, August 26, 2009


    text-shadow
    Finally replacing the need for Photoshop
    for simple drop shadow effects.

    text-shadow: 2px 2px 2px #000;


    text-shadow: right, bottom, blur, color;

    Also here, is the box-shadow property.

    box-shadow: 10px 10px 5px #888;


    box-shadow: right, bottom, blur, color;

    Wednesday, August 26, 2009


    New Selectors
    /^Patterns$/
    E[foo=‘bar’] an E element whose "foo" attribute value is exactly equal to "bar"

    an E element whose "foo" attribute value is a list of whitespace-separated values,


    E[foo~=‘bar’] one of which is exactly equal to "bar"

    E[foo^=‘bar’] an E element whose "foo" attribute value begins exactly with the string "bar"

    E[foo$=‘bar’] an E element whose "foo" attribute value ends exactly with the string "bar"

    E[foo*=‘bar’] an E element whose "foo" attribute value contains the substring "bar"

    an E element whose "foo" attribute has a hyphen-separated list of values


    E[hfool=’en’] beginning (from the left) with "en"

    Wednesday, August 26, 2009


    New Selectors
    By Position
    The :nth-child() pseudo-class allows you to target one or more specific children of a
    E:nth-child(n) parent element. Can also be specified as “even” or “odd”

    The :nth-last-child pseudo-class works basically as the :nth-child pseudo-class, but it


    E:nth-last-child(n) starts counting the elements from the last one.

    The :nth-of-type pseudo-class works just like the :nth-child, with the difference that it
    E:nth-of-type(n) only counts children that match the element in the selector.

    You guessed it! The :nth-last-of-type pseudo-class can be used exactly like the
    E:nth-last-of-type(n) aforementioned :nth-last-child, but this time, it will only target the elements
    that match our selector:

    http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

    Wednesday, August 26, 2009


    nth-child(n)
    :nth-child(N) matches elements that are proceded by N-1 siblings in the document
    tree.

    tr:nth-child(2n+1) {...}
    Match Odd number rows
    tr:nth-child(odd) {...}

    tr:nth-child(2n-1) {...}
    Match Even number rows
    tr:nth-child(even) {...}

    tr:nth-child(-n+3) {...} Selects the first 3 rows of any table.

    Wednesday, August 26, 2009


    Position Selectors
    Useful For
    ul li:nth-child(odd) {color: yellow;}

    • Zebra Striping Tables

    • Removing borders from


    the bottom row of
    floated <LI>s

    • Styling nested menus

    Wednesday, August 26, 2009


    Wait a Damn Minute!
    What about IE?!

    Wednesday, August 26, 2009


    IE 6 & 7 FAIL!!!
    • No Shadows

    • Square corners

    • Many new selectors will


    fail

    • Multi backgrounds...
    nope..

    Wednesday, August 26, 2009


    Fixing IE 6, 7, & 8
    • CurvyCorners.net for rounded
    corners
    • filter:DropShadow for drop
    shadows
    • IE8.js to add many selectors & fix
    PNGs.
    http://code.google.com/p/ie7-js/

    Wednesday, August 26, 2009


    http://html5doctor.com/how-to-get-html5-working-in-ie-
    FF2 re-render bug
    and-firefox-2/

    CSS3 News and Updates http://www.css3.info

    CSS3 Selectors http://www.w3.org/TR/css3-selectors/

    IE7.js http://code.google.com/p/ie7-js/

    MWD Blog http://www.masterwebdesign.net/blog

    Wednesday, August 26, 2009

    You might also like