HTML5 Presentation

HTML5 & CSS3Graceful 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)


Problems with CSS

• Very powerful, yet still limited

• Few ways to select elements

• As with HTML: No Structure == Mess!


So What’s New?


• SECTION

• HEADER

• NAV

• ARTICLE

• FIGURE

• FOOTER

• HGROUP

• MENU

• ASIDE

HTML5 : Semantic Tags

HTML 5 provides tags which aim to use the DOM to define the functionality and structure of the site.

Through this, markup is dramatically cleaned up and clarity is provided... Mostly.


HTML 4 HTML 5

Nice, tidy markup


HTML 4 HTML 5

Nice, tidy markup


Nice, tidy markup

<!DOCTYPE html>

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

HTML 4 HTML 5


<video> & <audio>

• Full play controls without Flash

• JS Events and JS API

• CSS3 Hooks


• XDMSG - Cross Domain Messages

• Datagrid* (new table)

• contentEditable with UndoManager

• Major update to CANVAS *

• “Required” <input>s

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!!!

Other Really Cool Stuff


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


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)


text-shadowFinally 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;


New Selectors

E[foo=‘bar’] an E element whose "foo" attribute value is exactly equal to "bar"

E[foo~=‘bar’] an E element whose "foo" attribute value is a list of whitespace-separated values, 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"

E[hfool=’en’] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"

/^Patterns$/


New Selectors

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

E:nth-last-child(n) The :nth-last-child pseudo-class works basically as the :nth-child pseudo-class, but it starts counting the elements from the last one.

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

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

By Position

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




nth-child(n)

tr:nth-child(2n+1) {...}tr:nth-child(odd) {...}

Match Odd number rows

tr:nth-child(2n-1) {...}tr:nth-child(even) {...}

Match Even number rows

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

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


Useful For

• Zebra Striping Tables

• Removing borders from the bottom row of floated <LI>s

• Styling nested menus

Position Selectors

ul li:nth-child(odd) {color: yellow;}


Wait a Damn Minute!What about IE?!


IE 6 & 7 FAIL!!!

• No Shadows

• Square corners

• Many new selectors will fail

• Multi backgrounds... nope..


• 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/

Fixing IE 6, 7, & 8


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


FF2 re-render bughttp://html5doctor.com/how-to-get-html5-working-in-ie-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


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




http://www.css3.info

http://www.css3.info

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

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



http://www.masterwebdesign.net/blog

http://www.masterwebdesign.net/blog

Documents

HTML5 Presentation